textContent 和 innerText 的区别

1. 文本内容：
该属性用于设置或返回选定节点及其所有后代的文本值。设置 textContent 属性时，将删除所有子节点。它被包含指定字符串的单个 Text 节点替换。

句法 ：

• 设置节点的文本 –

  node.textContent = text

• 返回节点的文本 –

  node.textContent

2. 内文：
此属性还设置或返回选定节点及其所有后代的文本值。但是，使用以下示例显示了一些差异。

HTML

  
    Differences between innerText and textContent.
  


  Differences between innerText & textContent.
   This element has extra       spacing and contains 
a span element.
  
  Get innerText
  Get textContent
  
  
  
    function getInnerText() {
      alert(document.getElementById("demo").innerText)
    }
  
    function getTextContent() {
      alert(document.getElementById("demo").textContent)
    }
  


[/tabbyending]Output :Before clicking any buttons :After clicking on innerText button :After clicking on textContent button :The innerText property returns the text, without spacing and the textContent property returns the text along with spacing.Other differences between innerText :Sl No.innerTexttextContent1.It returns the visible text contained in a node.It returns the full text.2.It is much more performance-heavy, as it requires layout information to return the result.It is not so much performance-heavy, as it doesn’t requires layout information to return the result.3.It is defined only for HTMLElement objects.It is defined for all Node objects.4.This property is not supported in IE9 and earlier.This property is not supported in Internet Explorer 8 and earlier.