textContent和innerText屬性

eechen 發(fā)布于2019-08-19 18:12 / 3206人閱讀

摘要：在操作中，我們?nèi)绻@取和修改節(jié)點(diǎn)的的文本，就離不開或?qū)傩?。其中作為?biāo)準(zhǔn)方法，但無奈要而屬性最近也被火狐支持了，已經(jīng)成了不是標(biāo)準(zhǔn)的標(biāo)準(zhǔn)參考。

在DOM操作中，我們?nèi)绻@取和修改節(jié)點(diǎn)的的文本，就離不開textContent或innerText屬性。其中textContent作為標(biāo)準(zhǔn)方法，但無奈要IE8+；而innerText屬性最近也被火狐支持了，已經(jīng)成了不是標(biāo)準(zhǔn)的標(biāo)準(zhǔn)（參考）。也就是說，如果只考慮最新瀏覽器的話這兩個方法都是可以使用的，那他們到底使用時有何不同呢？先上代碼：

    testtest

運(yùn)行上述代碼，結(jié)果為：

可看到存在兩個差異：

textContent會獲取style元素里的文本（若有script元素也是這樣），而innerText不會

textContent會獲取display:none的節(jié)點(diǎn)的文本；而innerText好像會感知到節(jié)點(diǎn)是否呈現(xiàn)一樣，不作返回

也就是說，textContent能夠獲取元素的所有子節(jié)點(diǎn)上的文本，不管這個節(jié)點(diǎn)是否呈現(xiàn)；而innerText只返回呈現(xiàn)到頁面上的文本。

當(dāng)然，除了獲取文本，這兩個元素也可以設(shè)置元素的文本內(nèi)容，不過要注意設(shè)置文本時被替換的可不只是文本了；這時，兩個屬性作用相當(dāng)于innerHTML屬性，會把指定節(jié)點(diǎn)下的所有子節(jié)點(diǎn)也一并替換掉。

GPU云服務(wù)器云服務(wù)器 textContent innerText 引用和類屬性匹配對象的屬性和函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79303.html

相關(guān)文章

innerHTML、innerText、textContent、outerHTML和value，傻傻

摘要：會省略內(nèi)嵌的標(biāo)簽名，所以文本的只顯示了的內(nèi)容，并沒有顯示的標(biāo)簽名也必須是標(biāo)簽對的形式刪除了格式信息，所有文本均在一行，所以文本的內(nèi)容都在一行。也用來設(shè)置或獲取成對標(biāo)簽之間的內(nèi)容，并且只關(guān)注文本信息。之前，是不支持的。是的親兒子，放心用吧。原文地址：https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-val...

HollisChuang 2019-08-23 11:35 評論0 收藏0
關(guān)于DOM的問題筆記

摘要：實(shí)時可以傳參返回包括了所有名字符合指定條件的元素實(shí)時可以傳參用于選擇擁有屬性的元素比如和等返回匹配指定屬性的元素節(jié)點(diǎn)。返回位于頁面指定位置最上層的子節(jié)點(diǎn)。此外，使用可以防止攻擊。而自身不在存在于創(chuàng)建它時所在的位置。 1. 獲取某個 dom 元素的方式 //節(jié)點(diǎn)集合屬性（元素節(jié)點(diǎn)選?。?document.all //返回文檔中所有元素 document.links //返回當(dāng)前文...

FullStackDeveloper 2019-08-22 10:54 評論0 收藏0
JavaScript DOM 5 － HTML元素的內(nèi)容

摘要：一個元素的內(nèi)容到底是指什么特別是對于那些有子節(jié)點(diǎn)的元素。對于這種類型的，和返回的結(jié)果也不同。假如我們有這樣的一段代碼我們對分別取和，得到的結(jié)果如下還是會把里面的內(nèi)容返回來，但是則不會。一個HTML元素的內(nèi)容到底是指什么？特別是對于那些有子節(jié)點(diǎn)的HTML元素。1: 首先來看一下可以獲取HTML元素的內(nèi)容的方式有哪些： 1: element.innerHTML 2: element.o...

Harpsichord1207 2019-08-20 17:29 評論0 收藏0
innerText和textContent

摘要：今天在使用時遇到一個兼容性問題，不支持方法，查了，發(fā)現(xiàn)下有個類似的方法，叫，它和的類似，都是用來獲取設(shè)置元素中的方法。今天在使用innerText時遇到一個兼容性問題，F(xiàn)ireFox不支持innerText方法，查了MDN，發(fā)現(xiàn)FireFox下有個類似的方法，叫textContent，它和IE的innerText類似，都是用來獲取（設(shè)置）元素中text的方法。語法設(shè)置 elem...

ephererid 2019-08-19 17:28 評論0 收藏0
高程3總結(jié)#第11章DOM擴(kuò)展

摘要：操作類名時可以通過屬性添加刪除和替換類名。如果將可選的參數(shù)設(shè)置為，則表示盡量將元素顯示在視口中部垂直方向。將元素的內(nèi)容滾動指定的頁面高度，具體高度由元素的高度決定。 DOM擴(kuò)展選擇符API querySelector()方法 querySelector()方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，如果沒有找到匹配的元素，返回null //取得body元素 var b...

cucumber 2019-08-23 12:00 評論0 收藏0