Question

Secrets of the JavaScript Ninja显示了如何删除和设置元素的文本：

HTML

<div id="test">Hey!
    <div id="child">delete me</div>
</div>

的Javascript

var b = document.getElementById("test");

console.log("b before:", b);

while(b.firstChild) {
    console.log("removing child:",b.firstChild);
    b.removeChild(b.firstChild);
}

console.log("b's value post remove:", b);

b.appendChild(document.createTextNode("Some new text."));

var text = b.textContent || b.innerText;
console.log("text:", text);

这是控制台输出：

b before: <div id="test">Some new text.</div>
removing child:     "Hey!"
removing child:  <div id="child">delete me</div>
removing child:  "  "
b's value post remove: <div id="test">Some new text.</div>
text: Some new text.

当HTML明确设置为b时，Some new text.如何等于Hey!？

此外，为什么b's value post remove:输出会显示为Some new text，即使它尚未设置？

http://jsfiddle.net/X6fYM/

Answer 1

如果您想知道为什么控制台会在之前之前显示以后的内容，那是因为控制台（部分）是 live < / em>显示DOM中的内容，而不是在一瞬间写出的一串字符串。有关in this question及其答案的更多信息。

基本上，如果您记录对象，控制台可能会将其视为活动显示，并在您更改对象时更新它。如果您记录字符串，控制台将正确显示该字符串作为一个不变的东西。所以：

var div = document.createElement("div"); console.log("div", div); div.appendChild(document.createTextNode("foo"));

...可以（根据各种条件）显示div包含foo，因为控制台在我们更改时更新了显示。（Live Example, open the console to see）

如果您在调试器中单步执行代码，您可以看到控制台显示一件事，然后在我们更改其内容时更改它。

Answer 2

或许还需要更多解释。

请记住，标记中的每个项目都有某种元素上下文。甚至文本也是一个节点。

因此，在脚本开头的#test中有三个节点：

喂！
<div id="child">delete me</div>
[空白文字节点]

这就是为什么你看到输出为while语句通过#test的子节点工作，依次删除每个节点。

在Firefox中运行你的jsFiddle后，我不确定为什么你会看到你发布的输出：

b's value post remove: <div id="test">Some new text.</div>

因为它没有为我显示。它只显示有一个ID为test的div。

此外，在开始时，您正在创建指向测试节点的指针，这就是执行此调用时的原因：

b.appendChild(document.createTextNode("Some new text."));

b突然有内容......它永远不会消失，你没有处理指向该对象的指针，所以当你测试它的内容时，它会显示你刚刚添加到它的新文本节点。

删除并设置元素的文本

2 个答案: