今天要講的這些屬性都可以用來(lái)獲取某個(gè)元素的內(nèi)容，你可能會(huì)覺(jué)得不可思議，或是說(shuō)上一句“喪心病狂”也。但當(dāng)你看完以下內(nèi)容后，會(huì)發(fā)現(xiàn)除outerText無(wú)用外，其他的都有各自的使用場(chǎng)景，不然它就真的是喪心病狂，然后我們就可以各回各家了。

innerText

引用MDN，Node.textContent上的一段話:

Internet Explorer 引入了 element.innerText，目的是相似的，不過(guò)有下面幾點(diǎn)不同之處：

• textContent 會(huì)獲取所有元素的內(nèi)容，包括<script> 和 <style> 元素，然而 IE 專有屬性 innerText 不會(huì)。

• innerText 會(huì)受樣式的影響，它不返回隱藏元素的文本，但 textContent 返回。

• 由于 innerText 受 CSS 樣式的影響，它會(huì)觸發(fā)重排（reflow），但textContent 不會(huì)。

• 與 textContent 不同的是, 在 Internet Explorer (對(duì)于小于等于 IE11 的版本) 中對(duì) innerText 進(jìn)行修改， 不僅會(huì)移除當(dāng)前元素的子節(jié)點(diǎn)，而且還會(huì)永久性地銷毀所有內(nèi)部文本節(jié)點(diǎn)（由此導(dǎo)致無(wú)法再將這些被銷毀的文本節(jié)點(diǎn)插入到當(dāng)前元素或任何其他元素中）。

雖然innerText是IE私有屬性，但現(xiàn)在很多瀏覽器也都支持這個(gè)屬性。

也許你看了以上MDN上的一段話后，心情澎湃，原來(lái)天天使用的innerText竟然有如此多的問(wèn)題，但如果你看了下面這段或許又是另外一種心情了。

innerText屬性和textContent屬性除了MDN上面說(shuō)的幾點(diǎn)以外，還有一個(gè)很大的區(qū)別，而這個(gè)區(qū)別會(huì)讓你對(duì)innerText屬性即愛(ài)又恨，這個(gè)區(qū)別就在于innerText和textContent屬性對(duì)換行的處理，來(lái)看下面這段代碼

<div id="box"></div><div id="content1"></div><div id="content2"></div><script>box.innerHTML = "a\na";content1.innerText = box.innerHTML;content2.textContent = box.innerHTML;</script>

別問(wèn)我為什么不獲取元素直接使用id操作dom，懶/

以上我給box元素添加了兩個(gè)a和一個(gè)\n換行符，其解析結(jié)果如下圖

從上圖我們可以看到使用innerText設(shè)置內(nèi)容的元素中莫名的出現(xiàn)了一個(gè)br標(biāo)簽，也就是說(shuō)innerText把\n當(dāng)成了br來(lái)解析，我們?cè)倏词褂胻extContent設(shè)置內(nèi)容的元素，可以看到它好像多一個(gè)空格，但如果你打開(kāi)源代碼會(huì)發(fā)現(xiàn)它不是空格，而是實(shí)實(shí)在在的換行符，不信你瞧

也就是說(shuō)textContent才是解析正常的，那么為什么在頁(yè)面中看到的content2元素是一個(gè)空格呢，其實(shí)這不足為怪，來(lái)看看下面這段代碼

<div id="content2">aa</div>

以上代碼是編輯器中的源代碼，我們每天編寫的無(wú)數(shù)行代碼中，又有無(wú)數(shù)個(gè)換行和空格吧？你應(yīng)該看到過(guò)它的效果吧？HTML對(duì)換行和空格不敏感！！！多個(gè)換行或空格只會(huì)當(dāng)成是一個(gè)空格。

那么有沒(méi)有辦法解決？有！而且用CSS就可以做到了，想讓瀏覽器對(duì)某個(gè)元素原樣輸出，可以給它加以下這段CSS

white-space: pre;

這段css的意思是，將此元素按照在源代碼中的樣子進(jìn)行輸出，也就是你代碼怎么寫的，它就怎么輸出（保留空格和換行符）。除了用css以外也還可以使用pre元素來(lái)達(dá)到同樣的效果。

textContent和innerText的區(qū)別不僅僅在設(shè)置內(nèi)容的時(shí)候會(huì)出現(xiàn)，在獲取的時(shí)候一樣也會(huì)出現(xiàn)，比如下面這段

<div id="box"></div><div id="content1"></div><div id="content2"></div><script>box.innerHTML = "a<div></div>a";content1.innerHTML = box.innerText;content2.innerHTML = box.textContent;</script>

效果如下圖

使用innerText獲取的內(nèi)容將<div></div>當(dāng)成了一個(gè)換行，使用textContent獲取內(nèi)容的元素一切正常。如果我們將<div></div>換成<br>，你會(huì)發(fā)現(xiàn)更坑，它把每個(gè)<br>都當(dāng)成了一個(gè)換行，效果如下

你沒(méi)有看錯(cuò)就是兩個(gè)換行符，源代碼如下

<div id="box"></div><div id="content1"></div><div id="content2"></div><script>box.innerHTML = "a<br><br>a";content1.innerHTML = box.innerText;content2.innerHTML = box.textContent;</script>

也許你會(huì)想，如果使用兩個(gè)div元素，那么是不是也會(huì)出現(xiàn)兩個(gè)換行符呢？結(jié)果令你失望，只有當(dāng)是<br>才會(huì)。

它們的區(qū)別大概就是如此了，所以以后在選擇使用innerText和textContent的時(shí)候，請(qǐng)慎重啊。

textContent

用來(lái)設(shè)置或是獲取某個(gè)元素內(nèi)所有文本內(nèi)容，包括子元素中的內(nèi)容，如果是設(shè)置，則原本的子元素會(huì)被同被替換掉。

innerHTML

用來(lái)設(shè)置或是獲取某個(gè)元素內(nèi)所有元素及內(nèi)容，包括子元素。當(dāng)內(nèi)容都是文本的時(shí)候，可以把這個(gè)屬性當(dāng)做textContent屬性來(lái)用。

outerHTML

outerHTML和innerHTML很像，它們的唯一區(qū)別就是outerHTML包括自身元素而innerHTML不包括自身元素。

nodeValue

nodeValue和textContent很像，它們都是用來(lái)獲取某個(gè)元素中的內(nèi)容的，不過(guò)nodeValue并不能直接操作某個(gè)dom元素，它只能用來(lái)獲取某段文本節(jié)點(diǎn)中的內(nèi)容，知道你肯定對(duì)這個(gè)不熟，演示一下給你看。

<div id="box">javascript<span>html</span></div><div id="content1"></div><script>content1.innerHTML = box.childNodes[0].nodeValue;</script>

在使用nodeValue之前，我們需要先使用childNodes獲取box中的所有節(jié)點(diǎn)集合，childNodes返回的是一個(gè)NodeList數(shù)組，如下圖

雖然NodeList數(shù)組返回所有子節(jié)點(diǎn)，不過(guò)我們只能對(duì)文本節(jié)點(diǎn)使用nodeValue屬性噢，假如你想把html賦給content1，是不能直接通過(guò)box.childNodes[1].nodeValue來(lái)獲取的，因?yàn)閎ox.childNodes[1]是元素，而如果想獲取span中的文本節(jié)點(diǎn)，我們得像下面這樣

<div id="box">javascript<span>html</span></div><div id="content1"></div><script>content1.innerHTML = box.childNodes[1].childNodes[0].nodeValue;</script>

效果如下

雖然你可能會(huì)覺(jué)得以上那段代碼寫著很煩，但如果你想細(xì)致化的操作文本節(jié)點(diǎn)，這個(gè)屬性對(duì)你來(lái)說(shuō)就非常有用了。

outerText

看了以上內(nèi)容，你肯定想到了，這個(gè)outerText和outerHTML有同樣的功能它們都包括自身，不同的是outerText獲取的是元素內(nèi)容，而outerHTML獲取到的內(nèi)容包括元素。

那么為什么我一開(kāi)始說(shuō)outerText無(wú)用呢，因?yàn)樗茏龅氖?#xff0c;textContent、innerText和innerHTML都可以做。

那么為什么textContent、innerText和innerHTML都可以做outerText的事呢？

<div>javascript</div>

以上這段代碼使用div包含了一段文本節(jié)點(diǎn)。

因?yàn)槲谋竟?jié)點(diǎn)不可能單獨(dú)使用，也就是說(shuō)所有文本節(jié)點(diǎn)都有父元素！既然有父元素那么文本節(jié)點(diǎn)就只能是屬于某個(gè)元素的子節(jié)點(diǎn)，又因?yàn)槭亲庸?jié)點(diǎn)，textContent、innerText和innerHTML自然也就能使用啦，所有這個(gè)outerText也就只能做個(gè)有名無(wú)份的主了。

注意：就算文本節(jié)點(diǎn)是屬于元素自身的，那它也還是元素的子節(jié)點(diǎn)！

完。

總結(jié)

以上是生活随笔為你收集整理的textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。