国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

HollisChuang / 3017人閱讀

摘要：會省略內嵌的標簽名，所以文本的只顯示了的內容，并沒有顯示的標簽名也必須是標簽對的形式刪除了格式信息，所有文本均在一行，所以文本的內容都在一行。也用來設置或獲取成對標簽之間的內容，并且只關注文本信息。之前，是不支持的。是的親兒子，放心用吧。

原文地址：https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-value.html

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

一個栗子

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

innerHTML、innerText、textContent、outerHTML和value的區別


你是誰？
  這是一個內嵌span測試

結果如圖：

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

innerHTML

innerHTML用來設置或獲取成對標簽之間的HTML內容，包括其中內嵌的子元素標簽。

innerHTML會顯示內嵌的標簽，所以文本p的innerHTML會有內嵌的span

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

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

innerText

innerText也用來設置或獲取成對標簽之間的HTML內容，但它只關注文本信息，會省略內嵌的標簽名。

innerHTML會省略內嵌的標簽名，所以文本p的innerHTML只顯示了span的內容，并沒有顯示span的標簽名

innerText也必須是標簽對的形式

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

textContent

textContent也用來設置或獲取成對標簽之間的HTML內容，并且只關注文本信息。

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

outerHTML

outerHTML設置或獲取元素及其內容的HTML形式。

這個是最好區分的，直接看例子，它會把DOM元素本身的標簽+內容+格式全部顯示出來。

value

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

innerHTML、innerText和textContent的再次較量

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

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

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

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

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

IE9之前，是不支持textContent的。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97179.html

相關文章

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

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

    mj 評論0 收藏0

  • JavaScript DOM 5 － HTML元素的內容

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

    Harpsichord1207 評論0 收藏0

  • 關于DOM的問題筆記

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

    FullStackDeveloper 評論0 收藏0

  • DOM疑惑點整理（三）

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

    高勝山 評論0 收藏0

  • DOM疑惑點整理（三）

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

    lucas 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<