innerHTML, innerText, textConte

前言：在前端开发中，我们经常用到的获取某标签元素内容。相应操作有很多，不知道用哪个更好。下面让我来为大家解疑innerHTML, innerText, textContent,nodeValue

示例：

<label id='label'>请输入北京今天空气质量
 <span>ddddd</span>
 <span>hhhhhhhh</span>
</label>

var label = document.getElementById('label');

innerHTML

label.innerHTML的结果显示

Paste_Image.png

也就是说，label.innerHTML显示了label标签内的所有内容(包括<span></span>)，但是不包含标签label本身。

---

outerHTML

label.outerHTML的结果显示

Paste_Image.png

也就是说，label.outerHTML显示了 label标签以及label标签内的所有内容(包括<span></span>)。

---

innerText

label.innerText的结果显示

Paste_Image.png

也就是说，label.innerText只是将label中的文本(text)内容显示出来。(不包括<span></span>)

---

outerText

一般不用，因为它能做的事，textContent、innerText和innerHTML都可以做。

---

textContent

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent
链接说的很清晰，总结来说就是，用textContent代替innerText会更好一点。

Paste_Image.png

---

nodeValue

利用childNodes获取节点位置后，再用nodeValue获取节点内容

 <div id="box">one<span>two</span></div>
    <div id="content1"></div>
    <div id="content2"></div>
    <script>
        content1.innerHTML = box.childNodes[0].nodeValue;//div中,先获取one所在节点位置，再获取节点内容
        content2.innerHTML = box.childNodes[1].childNodes[0].nodeValue;
    </script>

页面上的显示

Paste_Image.png

控制台

Paste_Image.png

---

综述

我们经常用以下节点属性来 设置或获取标签元素的内容

• node.textContent : 用来设置或是获取某个元素内所有文本内容，包括子元素中的内容。（css等兼容性比innerText好）
• node.innerText : IE 专有属性 ，现在也可以在其它浏览器用。用来设置或是获取某个元素内所有文本内容，包括子元素中的内容。
• node.innerHTML: 当内容都是文本的时候，可以把这个属性当做textContent属性来用。