<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-widt...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端14班</li>
</ul>
<script>
var liBox = document.querySelectorAll("li");
for (var i = 0; i < liBox.length; i++) {
(function (i) {
liBox[i].onclick = function () {
console.log(liBox[i].innerHTML);
console.log(liBox[i].innerText);
console.log(liBox[i].childNodes[0].nodeValue);
console.log(liBox[i].textContent);
}
})(i)
}
</script>
</body>
</html>方法1：innerHTML
innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法
element.innerHTML 会直接返回element节点下所有的HTML化的文本内容
<body> <div>文本</div> <div>文本</div> </body>document.body.innerHTML //返回"<div>文本</div><div>文本</div>";
同样逆向的：
document.body.innerHTM="<div>文本</div><div></div>"会生成<body> <div>文本</div> <div>文本</div></body>
注意 innerHTML方法只能作用于元素节点调用；文本节点并不能使用这个方法返回undefined！
方法2:
nodeValue是一个HTML DOM的对象属性；
同样的 可以通过 nodeValue设置节点的文本内容也可以直接返回文本内容
直接用节点对象调用就都可以： 如上例
document.getElementsByTagName(div)[0].childNodes[0].nodeValue //返回“文本”
另外 nodeValue 属性并不只存在于文本节点下 元素节点和属性节点对象也都具有nodeValue属性:
属性节点的 nodeValue属性返回属性值
元素节点的 nodeValue属性返回null
方法3：textContent
textContent与innerHTML方法类似会返回对象节点下所有的文本内容
但是区别为 textContent返回的内容只有去HTML化的文本节点的内容 如上例：
document.body.textContent //返回"文本文本" ！hjjjjjLO注意在DOM中标签换行产生的空白字符会计入DOM中作为文本节点 另外IE8以前不支持textContent属性
方法4：innerText
innerText方法与textContent方法类似 并且和innerHTML一样也是作用于元素节点上
但是浏览器对于这两种方法解析空白字符的机制不一样；不是很常用
类似的还有outText outHTML等类似操作文本相关的方法，不是很常用不介绍了；
最后要提醒一点：文本与文本节点一定要区分，有些方法是依靠元素节点返回子文本内容，有些方法是文本节点返回自身文本内容，文本节点是对象而文本只是字符串；
阅读全文