成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

HollisChuang / 3098人閱讀

摘要：會省略內(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-value.html

innerHTML、innerText、textContent、outerHTML和value，傻傻分不清楚？什么時候該用哪個？雖然我們常用的總是innerHTML，但在一些特殊情況下，正確的選擇能夠事半功倍，所以是時候?qū)@幾個小家伙仔細分分清楚了。

一個栗子

廢話不多說，先來看個例子：

innerHTML、innerText、textContent、outerHTML和value的區(qū)別


你是誰？
  這是一個內(nèi)嵌span測試

結(jié)果如圖：

看完了其實還是一臉懵逼狀。。有的值一樣，有的甚至連值都不見了，什么鬼？好了總結(jié)一下：

innerHTML

innerHTML用來設(shè)置或獲取成對標(biāo)簽之間的HTML內(nèi)容，包括其中內(nèi)嵌的子元素標(biāo)簽。

innerHTML會顯示內(nèi)嵌的標(biāo)簽，所以文本p的innerHTML會有內(nèi)嵌的span

使用innerHTML的元素必須是標(biāo)簽對的形式，所以input的innerHTML值為空

innerHTML保留了格式信息，所以文本p的innerHTML內(nèi)容會有換行

innerText

innerText也用來設(shè)置或獲取成對標(biāo)簽之間的HTML內(nèi)容，但它只關(guān)注文本信息，會省略內(nèi)嵌的標(biāo)簽名。

innerHTML會省略內(nèi)嵌的標(biāo)簽名，所以文本p的innerHTML只顯示了span的內(nèi)容，并沒有顯示span的標(biāo)簽名

innerText也必須是標(biāo)簽對的形式

innerText刪除了格式信息，所有文本均在一行，所以文本p的innerText內(nèi)容都在一行。

textContent

textContent也用來設(shè)置或獲取成對標(biāo)簽之間的HTML內(nèi)容，并且只關(guān)注文本信息。

這家伙和innerText一樣一樣的，但它保留了格式信息。

outerHTML

outerHTML設(shè)置或獲取元素及其內(nèi)容的HTML形式。

這個是最好區(qū)分的，直接看例子，它會把DOM元素本身的標(biāo)簽+內(nèi)容+格式全部顯示出來。

value

value是表單元素特有的屬性，通常input用的比較多，就是其中輸入的值，也很好區(qū)別。

innerHTML、innerText和textContent的再次較量

我們還要再把這三個難兄難弟挑出來，從瀏覽器兼容的角度來區(qū)別一下：

innerHTML是符合W3C標(biāo)準的屬性，而innerText適用于IE瀏覽器，textContent適用于火狐瀏覽器。

這也就是為什么我們總能看到innerHTML，總對它偏愛有加，畢竟是W3C的親兒子嘛。

只不過到了今天，其余的瀏覽器也都實現(xiàn)了innerText和textContent，但要注意的是：

IE6-8只部分支持了innerHTML，在IE下，跟table有關(guān)的元素的innerHTML是只讀的，我們無法改變其值；從IE9開始，全面支持了innerHTML。

IE9之前，是不支持textContent的。

innerText是IE的親兒子，放心用吧。

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/97179.html

相關(guān)文章

  • jQuery 源碼系列（十六）html 和 text

    摘要：函數(shù)源碼下面是和的源碼，看了之后肯定有話要說函數(shù)回調(diào)函數(shù)好吧，我承認，又是同樣的套路，先交給函數(shù)來處理，然后函數(shù)，我猜這個時候函數(shù)肯定是采用方式使綁定當(dāng)前。 歡迎來我的專欄查看系列文章。 上一章談到了 dom 的幾個插入操作，雖然插入的方式多種多樣，但只要在懂了原生方法等基礎(chǔ)上，代碼看起來都不是很復(fù)雜。比較有意思的一個函數(shù)就是 buildFragment 方法，用來將 html 字符串...

    mj 評論0 收藏0

  • JavaScript DOM 5 － HTML元素的內(nèi)容

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

    Harpsichord1207 評論0 收藏0

  • 關(guān)于DOM的問題筆記

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

    FullStackDeveloper 評論0 收藏0

  • DOM疑惑點整理（三）

    摘要：好的，這些是眾所周知的。和兩者最大區(qū)別就是是否會改變調(diào)用它們的節(jié)點自身，類似上面與的其二中所描述。并未寫入規(guī)范，不建議使用，而且會導(dǎo)致調(diào)用它的節(jié)點自身消失。兩者可能因為瀏覽器不同，輸出的文本格式略有差別 innerHTML和outerHTML 先說一個幾乎眾所周知的，innerHTML和outerHTML中的內(nèi)容都會被解析為DOM子樹，其二就是， let txt = doc...

    高勝山 評論0 收藏0

  • DOM疑惑點整理（三）

    摘要：好的，這些是眾所周知的。和兩者最大區(qū)別就是是否會改變調(diào)用它們的節(jié)點自身，類似上面與的其二中所描述。并未寫入規(guī)范，不建議使用，而且會導(dǎo)致調(diào)用它的節(jié)點自身消失。兩者可能因為瀏覽器不同，輸出的文本格式略有差別 innerHTML和outerHTML 先說一個幾乎眾所周知的，innerHTML和outerHTML中的內(nèi)容都會被解析為DOM子樹，其二就是， let txt = doc...

    lucas 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<