JS之DOM篇-节点内容

innerHTML

innerHTML属性是一个可读写属性。在读模式下，返回调用元素的所有子节点。在写模式下，会用指定的新值替换调用元素原先的所有子节点

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.innerHTML) // 'This is a <i>simple</i> document'
test.innerHTML = 123
console.log(test.innerHTML) // '123'

//  如果将innerHTML属性设为空，等于删除所有它包含的子节点
test.innerHTML = ''
console.log(test.childNodes.length) // 0
</script>

在效率上，使用innerHTML要比使用appendChild()方法添加DOM的性能高

<ul id="listOne"></ul>
<ul id="listTwo"></ul>
<script>
  // appendChild()
  console.time('one')
  for (let i = 0; i < 1000; i++) {
    let newLi = document.createElement('li')
    listOne.appendChild(newLi)
  }
  console.timeEnd('one') // one: 6.257080078125ms

  // innerHTML
  console.time('two')
  let html = ''
  for (let i = 0; i < 1000; i++) {
    html += '<li></li>'
  }
  listTwo.innerHTML = html
  console.timeEnd('two') // two: 2.46484375ms
</script>

注意： 如果innerHTML属性用“+=”操作符重复追加一小段文本，效率会非常低，因为它既要序列化又要解析

<ul id="listThree"></ul>
<script>
  console.time('three')
  for (let i = 0; i < 1000; i++) {
    listThree.innerHTML += '<li></li>'
  }
  console.timeEnd('three') // three: 856.999755859375ms
</script>

outerHTML

outerHTML属性也是一个可读写属性，与innerHTML不同的是它包含了调用元素本身。在读模式下，outerHTML返回调用元素以及所有子节点。在写模式下，会用指定的新值替换调用元素以及所有子节点

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.outerHTML) // '<p id="test">This is a <i>simple</i>document</p>'
test.outerHTML = '<div id="test"></div>'
console.log(test.outerHTML) // '<div id="test"></div>'
</script>

innerText

innerText是一个可读写属性，在读模式下，它会按照由浅入深地顺序，将子文档树中的所有文本拼接起来并返回。在写模式下，会用指定的新值相应的文本值替换所有子节点

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.innerText) // 'This is a simple document'
test.innerText = '<div>hello world</div>'
// 即使插入的节点包含元素节点，也只会作为字符串在内部显示
console.log(test.innerText) // '<div>hello world</div>'
</script>

小技巧： 利用innerText属性过滤掉所有的HTML标签

<p id="test">This is a <i>simple</i> document</p>
<script>
test.innerText = test.innerText
console.log(test.innerHTML) // 'This is a simple document'
</script>

outerText

在读取文本值时，outerText与innerText的结果完全一样。在写模式下，outerText会替换调用元素本身以及元素的所有子节点

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.outerText) // 'This is a simple document'
test.outerText = 'This is a simple document'
// 由于test节点已经不存在，所以报错了
console.log(test.outerText) // Uncaught ReferenceError: test is not defined
</script>

textContent

textContent属性与innerText属性类似，也是一个可读写属性。与innerText不同的是，textContent属性适用于所有节点，而innerText只适用于元素节点

<p id="test">This is a <i>simple</i> document</p>
<script>
var text = test.childNodes[0]; // 文本节点
console.log(test.textContent) // 'This is a'
console.log(test.innerText) // undefined
</script>