删除并设置元素的文本

Question

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

如果你想知道为什么控制台显示你的东西后,当你登录它之前,它是因为控制台(部分)一个活的东西是在DOM中显示,而不是一群在某一时刻写出来的字符串.更多关于这个问题及其答案的内容.

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

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

...可以(根据各种条件)显示div包含foo,因为控制台在我们更改时更新了显示.(实例,打开控制台看)

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