【JavaScript】textContent和innerText的区别

文字的排列：

innerText ： 按照HTML结构的位置，嵌套元素的位置是同行还是分行，但都是顶头
textContent ： 按照HTML结构中的位置， 文字的排行和缩进

<div class="box">
      jjjjj
      <div>
        理论上来说李老师
        <span>span</span>
      </div>
    </div>

var box = document.querySelector('.box')
      console.log(box.innerText) 
      //jjjjj
	  //理论上来说李老师 span
      console.log(box.textContent)
      // jjjjj
      
     //    理论上来说李老师
    //     span

样式的影响

innerText ： 不显示在页面上的就不包含
textContent : 没有影响

 <div class="box">
      jjjjj
      <div>
        理论上来说李老师
        <span style="display:none">span</span>
      </div>
 </div>

console.log(box.innerText) 
     //jjjjj
     //理论上来说李老师 
     
  console.log(box.textContent）
      //jjjjj
    //    理论上来说李老师
   //     span

兼容性

innerText ： 对IE浏览器比较友好
textContent ： 只支持IE8以上