innerHTML、 nodeValue与 textContent之间的区别？

前端打手
903 阅读3分钟

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

咱们直接先来看代码输出结果：

<body>
    <div id='box'>这是一个div</div>
</body>
<script>
    var ele = document.getElementById('box')
    console.dir(ele)
    
</script>

输出结果： image.png image.png

只是一个div包裹着一句文本内容，innerHTML与textContent显示内容一样；

那我们改一下代码再开看

<body>
    <div id='box'>
        这是一个div
        <span>我是一个span元素啊</span>
    </div>
</body>
<script>
    var ele = document.getElementById('box')
    console.dir(ele)
    console.log(ele.innerHTML)
    console.log(ele.textContent)
    console.log(ele.nodeValue);
</script>

image.png

image.png

image.png

这里就有明显的差别了

  • innerHTML 显示的是div内部文本+标签
  • textContent 显示的是div内的文本内容,包括它的子节点的文本，相当于把标签都过滤掉了，显示所有包含节点的文本内容。
  • nodeValue 还是一如既往的显示null， 因为当前打印的节点div,是元素节点。

tip: 标签就是元素，元素就是标签！

只看div这一级显示的nodeValue一直都是null; 那么这个nodeValue 到底是啥呢？

  • nodeValue 属性设置或返回指定节点的节点值。
  • nodeValue 属性的替代选择是 textContent 属性。
  • nodeValue 只适用于文本节点和属性节点，对元素节点不适用，返回null；

接下来再丰富下demo,看结果：

// html
<div id='box'>
    <p>这是p标签</p> 
    这是一个div
    <span name="我是sapn的name属性值">我是一个span元素啊</span>
</div>

// js
var ele = document.getElementById('box')
console.dir(ele)

image.png

image.png 这里来说明下这个childNodes内容分别是什么(停下你躁动的心，耐心看！)：

  • 第一个text,是div与p标签之间的换行和空格 image.png

  • 第二个p,就是p标签了 image.png

  • 第三个text,就是p与span标签之间的内容，包含换行、空格、文本内容 image.png

  • 第四个span,就是span标签了 image.png

  • 最后一个text, 就是span与div之间的内容，换行空格这些。 image.png

  • 给span添加了一个属性name image.png 通过上面👆🏻，可以发现什么？

  • 当nodeName是#text时，nodeValue就不为null了呢！

  • 当nodeName是#text时，nodeType 为 3, 也就是文本节点。

  • 另外，当前节点是元素节点时，nodeType 为 1。

  • 给span元素添加的一个name 属性，nodeType 为 2时，这就是属性节点。

  • 很显然属性节点中，nodeValue显示属性值

平时接触较多的也就是元素节点、文本节点、属性节点了，当然DOM中的节点类型可不止这几种；

DOM 中总共有 12 种节点类型，这些 类型都继承一种基本类型。

Node类型 console.dir(Node)

image.png Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)

每个节点都有 nodeType 属性，表示该节点的类型。

if(ele.nodeType == Node.ELEMENT_NODE) {
    console.log('元素节点')
}

image.png

再次丰富一下demo,来看

//html
<div id='box'>
    <p>这是p标签</p><span>标签之间没有换行空格呢！</span>
    <!-- 注释一个吧 -->
    这是一个div
    <span name="我是sapn的name属性值">我是一个span元素啊</span>
</div>

//js
var ele = document.getElementById('box')
console.dir(ele)

image.png

image.png

小结

  • innerHTM L属性读取或设置节点起始和结束标签中的 HTM L内容；
  • nodeValue属性读取或设置指定节点的文本内容，适用于文本类型的节点；
  • textContent属性读取或设置指定节点的文本内容，对于元素节点而言，会返回所包含的所有子节点中的文本内容的组合。
avatar
文章
阅读
粉丝