HTML的DOM中innerHTML,innerText,textContent,nodeValue的区别

参考文章：Day21 - innerText、 nodeValue与 textContent的区别 - 掘金

四个都是取文本内容 

代码如下

<div id="ceshi"><div>1</div>
   <style>
   	.ceshi1 {
   		height: 12px:
   		width12px;
   		border: 1px solid #000;
   	}
   	.ceshi2 {
   		display: none
   	}
   </style>
   <div class="ceshi1">ceshi1</div>
   <div class="ceshi2">ceshi2</div>
   <!-- <div class="ceshi3">ceshi3</div> -->
   <div class="ceshi4">
   	ceshi4
   	<div class="ceshi5">ceshi5</div>
   </div>
</div>
<script type="text/javascript">
	const el = document.getElementById('ceshi')

	console.log('innerHTML')
	console.log(el.innerHTML)
	console.log('')
	console.log('innerText')
	console.log(el.innerText)
	console.log('')
	console.log('textContent')
	console.log(el.textContent)
	console.log('')
	console.log('nodeValue')
	console.log(el.nodeValue)
	console.log(el.childNodes[0].childNodes[0].nodeValue)
</script>

结果如下：

innerHTML: dom中所有的内容全部转为字符串，包括注释内容和不显示的内容

 

 

innerText： 该dom下所有在页面上显示的元素的文本内容 

 

 textContent: 该dom下所有元素去掉<div>这样的标签，取中间的文本，注意上面的注释整个没有了

 

 nodeValue：只能取文本节点内容，要配合childNodes[i]来使用，如果节点不是文本节点，取出来是null

  

总结 : 都是取文本内容