javascript - 删除和设置元素的文本

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 明确设置为 Hey! 时，b 怎么可能等于 Some new text. ？

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

http://jsfiddle.net/X6fYM/

Answer 1

如果您想知道为什么在您之前登录时控制台会显示以后的内容，那是因为控制台(部分)是实时 显示 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 )

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