資訊專(zhuān)欄INFORMATION COLUMN
摘要：會(huì)省略內(nèi)嵌的標(biāo)簽名，所以文本的只顯示了的內(nèi)容，并沒(méi)有顯示的標(biāo)簽名也必須是標(biāo)簽對(duì)的形式刪除了格式信息，所有文本均在一行，所以文本的內(nèi)容都在一行。也用來(lái)設(shè)置或獲取成對(duì)標(biāo)簽之間的內(nèi)容，并且只關(guān)注文本信息。之前，是不支持的。是的親兒子，放心用吧。
原文地址：https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-value.html
innerHTML、innerText、textContent、outerHTML和value，傻傻分不清楚？什么時(shí)候該用哪個(gè)？雖然我們常用的總是innerHTML，但在一些特殊情況下，正確的選擇能夠事半功倍，所以是時(shí)候?qū)@幾個(gè)小家伙仔細(xì)分分清楚了。
一個(gè)栗子廢話不多說(shuō)，先來(lái)看個(gè)例子：
innerHTML、innerText、textContent、outerHTML和value的區(qū)別
你是誰(shuí)？ 這是一個(gè)內(nèi)嵌span測(cè)試
結(jié)果如圖：
看完了其實(shí)還是一臉懵逼狀。。有的值一樣，有的甚至連值都不見(jiàn)了，什么鬼？好了總結(jié)一下：
innerHTMLinnerHTML用來(lái)設(shè)置或獲取成對(duì)標(biāo)簽之間的HTML內(nèi)容，包括其中內(nèi)嵌的子元素標(biāo)簽。
innerHTML會(huì)顯示內(nèi)嵌的標(biāo)簽，所以文本p的innerHTML會(huì)有內(nèi)嵌的span
使用innerHTML的元素必須是標(biāo)簽對(duì)的形式，所以input的innerHTML值為空
innerHTML保留了格式信息，所以文本p的innerHTML內(nèi)容會(huì)有換行
innerTextinnerText也用來(lái)設(shè)置或獲取成對(duì)標(biāo)簽之間的HTML內(nèi)容，但它只關(guān)注文本信息，會(huì)省略內(nèi)嵌的標(biāo)簽名。
innerHTML會(huì)省略內(nèi)嵌的標(biāo)簽名，所以文本p的innerHTML只顯示了span的內(nèi)容，并沒(méi)有顯示span的標(biāo)簽名
innerText也必須是標(biāo)簽對(duì)的形式
innerText刪除了格式信息，所有文本均在一行，所以文本p的innerText內(nèi)容都在一行。
textContenttextContent也用來(lái)設(shè)置或獲取成對(duì)標(biāo)簽之間的HTML內(nèi)容，并且只關(guān)注文本信息。
這家伙和innerText一樣一樣的，但它保留了格式信息。
outerHTMLouterHTML設(shè)置或獲取元素及其內(nèi)容的HTML形式。
這個(gè)是最好區(qū)分的，直接看例子，它會(huì)把DOM元素本身的標(biāo)簽+內(nèi)容+格式全部顯示出來(lái)。
valuevalue是表單元素特有的屬性，通常input用的比較多，就是其中輸入的值，也很好區(qū)別。
innerHTML、innerText和textContent的再次較量我們還要再把這三個(gè)難兄難弟挑出來(lái)，從瀏覽器兼容的角度來(lái)區(qū)別一下：
innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText適用于IE瀏覽器，textContent適用于火狐瀏覽器。
這也就是為什么我們總能看到innerHTML，總對(duì)它偏愛(ài)有加，畢竟是W3C的親兒子嘛。
只不過(guò)到了今天，其余的瀏覽器也都實(shí)現(xiàn)了innerText和textContent，但要注意的是：
IE6-8只部分支持了innerHTML，在IE下，跟table有關(guān)的元素的innerHTML是只讀的，我們無(wú)法改變其值；從IE9開(kāi)始，全面支持了innerHTML。
IE9之前，是不支持textContent的。
innerText是IE的親兒子，放心用吧。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97179.html
摘要：函數(shù)源碼下面是和的源碼，看了之后肯定有話要說(shuō)函數(shù)回調(diào)函數(shù)好吧，我承認(rèn)，又是同樣的套路，先交給函數(shù)來(lái)處理，然后函數(shù)，我猜這個(gè)時(shí)候函數(shù)肯定是采用方式使綁定當(dāng)前。 歡迎來(lái)我的專(zhuān)欄查看系列文章。 上一章談到了 dom 的幾個(gè)插入操作，雖然插入的方式多種多樣，但只要在懂了原生方法等基礎(chǔ)上，代碼看起來(lái)都不是很復(fù)雜。比較有意思的一個(gè)函數(shù)就是 buildFragment 方法，用來(lái)將 html 字符串...
摘要：一個(gè)元素的內(nèi)容到底是指什么特別是對(duì)于那些有子節(jié)點(diǎn)的元素。對(duì)于這種類(lèi)型的，和返回的結(jié)果也不同。假如我們有這樣的一段代碼我們對(duì)分別取和，得到的結(jié)果如下還是會(huì)把里面的內(nèi)容返回來(lái)，但是則不會(huì)。 一個(gè)HTML元素的內(nèi)容到底是指什么？特別是對(duì)于那些有子節(jié)點(diǎn)的HTML元素。1: 首先來(lái)看一下可以獲取HTML元素的內(nèi)容的方式有哪些： 1: element.innerHTML 2: element.o...
摘要：實(shí)時(shí)可以傳參返回包括了所有名字符合指定條件的元素實(shí)時(shí)可以傳參用于選擇擁有屬性的元素比如和等返回匹配指定屬性的元素節(jié)點(diǎn)。返回位于頁(yè)面指定位置最上層的子節(jié)點(diǎn)。此外，使用可以防止攻擊。而自身不在存在于創(chuàng)建它時(shí)所在的位置。 1. 獲取某個(gè) dom 元素的方式 //節(jié)點(diǎn)集合屬性（元素節(jié)點(diǎn)選?。?document.all //返回文檔中所有元素 document.links //返回當(dāng)前文...
摘要：好的，這些是眾所周知的。和兩者最大區(qū)別就是是否會(huì)改變調(diào)用它們的節(jié)點(diǎn)自身，類(lèi)似上面與的其二中所描述。并未寫(xiě)入規(guī)范，不建議使用，而且會(huì)導(dǎo)致調(diào)用它的節(jié)點(diǎn)自身消失。兩者可能因?yàn)闉g覽器不同，輸出的文本格式略有差別 innerHTML和outerHTML 先說(shuō)一個(gè)幾乎眾所周知的，innerHTML和outerHTML中的內(nèi)容都會(huì)被解析為DOM子樹(shù)，其二就是， let txt = doc...
摘要：好的，這些是眾所周知的。和兩者最大區(qū)別就是是否會(huì)改變調(diào)用它們的節(jié)點(diǎn)自身，類(lèi)似上面與的其二中所描述。并未寫(xiě)入規(guī)范，不建議使用，而且會(huì)導(dǎo)致調(diào)用它的節(jié)點(diǎn)自身消失。兩者可能因?yàn)闉g覽器不同，輸出的文本格式略有差別 innerHTML和outerHTML 先說(shuō)一個(gè)幾乎眾所周知的，innerHTML和outerHTML中的內(nèi)容都會(huì)被解析為DOM子樹(shù)，其二就是， let txt = doc...
閱讀 1906·2021-11-23 09:51
閱讀 1550·2021-11-19 09:40
閱讀 3222·2021-11-11 11:01
閱讀 1121·2021-09-27 13:34
閱讀 1853·2021-09-22 15:56
閱讀 2136·2019-08-30 15:52
閱讀 1072·2019-08-30 14:13
閱讀 3487·2019-08-30 14:10
