javascript - 防止 Javascript ChildNodes 解析 < 和 >

Question

我今天发现，如果我这样做：

var div = document.createElement('div');
div.innerHTML = "<div>&lt; x</div>";
var node = div.firstElementChild;
var childNodes = node.childNodes;
console.log(childNodes[0].data);

输出是< x。但我想要我的<不变，因为改变它会<弄乱我写的解析器。

不更改<为的推荐方式是<什么？我能想到的一件事是用 替换<，<这会产生：

var div = document.createElement('div');
div.innerHTML = "<div>&amp;lt; x</div>";
var node = div.firstElementChild;
var childNodes = node.childNodes;
console.log(childNodes[0].data);

输出为< x. 有没有更好的办法？因为在这种情况下，我会用一个正则表达式来预处理我的整个文档，<用&lt和>替换>。但这似乎很hacky，谁知道是否没有更多的属性被转义并且现在被该childNodes方法更改？

更新/澄清：

我收到一个html 字符串作为解析器的输入。例如，这可能是 <div> The <br> World <span> is &lt; Space </span> </div>. 然后我想为这个 html 写一个解析器。我首先使用document.createElement('div');. 从那里我走 dom 并做我的后处理。我特别想找到所有“相邻兄弟文本或 br 节点”。这就是我使用 迭代节点的原因childNodes，因为与之相反，children它还返回文本节点。

Answer 1

问题是，如果该字符串要代表您所看到的文本，那么它不是有效的 HTML。在 HTML 中，文字和符号不是写为&，而是写为&。&在正确的 HTML 中具有特殊含义：它用作 HTML 实体名称的一部分。

一种解决方案是将文本与 HTML 标记分开处理：首先添加元素，然后设置其文本内容：

var div = document.createElement('div');
var node = document.createElement('div');
node.textContent = '< x';
div.appendChild(node);
var childNodes = node.childNodes;
console.log(childNodes[0].data);

Answer 2

好吧，当您使用 innerHTML 时，它似乎可以工作..

这对你有用吗？

var div = document.createElement('div');
div.innerHTML = "<div>&lt; x</div>";
var node = div.firstElementChild;
console.log(node.innerHTML);