这个是不是 JS 高程 3 的一个错误？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2127 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天在看高程 3 的时候，271 页写到:

如果这个文本节点当前存在于文档树中，那么修改文本节点的结果就会立即得到反映。另外，在修改文本节点时还要注意，此时的字符串会经过 HTML （或 XML，取决于文档类型）编码。换句话说，小于号，大于号或引号都会被转义。

即：div.firstChild.nodeValue = "Some <strong>other</strong> message";

的输出结果是："Some <strong>other</strong> message"

但我在浏览器里试了下面的代码，无论是页面还是控制台，输出的都是：Some <strong>other</strong> message，这是不是高程 3 的一个错误？

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<id id="app">v</id>
	<script>
		window.onload = function() {
                        document.getElementById('app').firstChild.nodeValue = 'Some <strong>other</strong>message'
                        console.log(document.getElementById('app').firstChild.nodeValue)
		}
	</script>
</body>
</html>

strong

HTML

高程

some

10 条回复 • 2019-03-03 13:23:23 +08:00

fe2018

2019-03-03 12:21:31 +08:00

求前端大牛看一下

SuperMild

2019-03-03 12:29:04 +08:00

你在网页里看见方括号，就证明被转义了，如果不转义，你看不见方括号，而是看见加粗效果。

zyEros

2019-03-03 12:32:41 +08:00

我看了下标准，标准上并没有说转义的问题，只是告诉你这是一个 DOMString，而 DOMString 只是一个 UTF16 的字符串。所以这可以算个别浏览器自己定义的行为。

Spec:
nodeValue: https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080
DOMString: https://www.w3.org/TR/DOM-Level-2-Core/core.html#DOMString

fe2018

2019-03-03 12:45:17 +08:00

@SuperMild
@zyEros 也就是说，因为内容是插入到文本节点里的，为了显示的和字符串内容一样，浏览器在显示的时候进行了转义。对于 XSS 攻击，文本节点里的内容不需要后端做转义。

zyEros

2019-03-03 12:48:30 +08:00

最简单的，把你那个例子改一下：
nodeValue = `<div style="width:100px;height:100px;background:red;"></div>`;

你就发现实际上不会显示一个红色块了。

这东西规范没有说，浏览器行为而已。

SuperMild

2019-03-03 12:55:48 +08:00

@fe2018 你在网页里使用了 JS 和 DOM 的 api，恰好该 api 有转义功能，因此对于该部分内容后端确实不需要做转义。至于该 api 是不是稳定的，我就不知道了。

另外，如果后端传过来的字符串里有单引号、双引号、换行符，有可能出问题哦。

morethansean

2019-03-03 12:57:26 +08:00

这些 html 里有特殊含义的字符串要在 html 上 "正确" 显示，是需要经过转义的。
你设置 nodeValue 他就自动转义了，你要看原值找父节点的 innerHTML 就知道了。

Yvette

2019-03-03 12:57:45 +08:00

貌似确实是错了，innerHTML 才涉及到转义，textContent 和 node 里的 nodeValue 都可以直出 text

fe2018

2019-03-03 13:21:50 +08:00

@zyEros
@SuperMild
@morethansean
@Yvette 感谢大牛的解答

fe2018

2019-03-03 13:23:23 +08:00

@Yvette 作者描述的不太完善吧。