DOM系列：DOM節(jié)點(diǎn)屬性

經(jīng)過(guò)前幾篇文章的學(xué)習(xí)，對(duì)DOM有一定的了解逗概。但這僅僅是DOM一些基礎(chǔ)性的知識(shí)，如果要對(duì)DOM更了解忘衍，需要更深入地了解DOM節(jié)點(diǎn)逾苫。在這一節(jié)中，咱們將圍繞DOM的節(jié)點(diǎn)屬性枚钓、標(biāo)簽和內(nèi)容來(lái)展開(kāi)铅搓。這樣我們就可以更進(jìn)一步的了解它們是什么？以及它們最常的屬性搀捷。

DOM節(jié)點(diǎn)類(lèi)

DOM節(jié)點(diǎn)的屬性取決于它們的類(lèi)（class）星掰。例如多望，<a>標(biāo)簽對(duì)應(yīng)的是一個(gè)元素節(jié)點(diǎn)和鏈接a相關(guān)的屬性。文本節(jié)點(diǎn)與元素節(jié)點(diǎn)不一樣氢烘，但是它們之間也有相同的屬性和方法怀偷，因?yàn)樗械腄OM節(jié)點(diǎn)會(huì)形成一個(gè)DOM樹(shù)。

每個(gè)DOM節(jié)點(diǎn)屬于相應(yīng)的內(nèi)置類(lèi)播玖。

root是DOM樹(shù)的EventTarget椎工，它是由Node繼承的，而其他DOM節(jié)點(diǎn)繼承它蜀踏。

下圖可以幫助我們更易于理解：

image

DOM節(jié)點(diǎn)的類(lèi)主要有：

EventTarget：是root抽象類(lèi)（Abstract Class）维蒙。該類(lèi)的對(duì)象永遠(yuǎn)不會(huì)創(chuàng)建。它作為一個(gè)基礎(chǔ)果覆，因此所有的DOM節(jié)點(diǎn)都支持所謂的事件（Events）木西，稍后會(huì)涉及這個(gè)
Node：也是一個(gè)抽象類(lèi)，作為DOM節(jié)點(diǎn)的基礎(chǔ)随静。它提供了核心功能：parentNode、nextSibling吗讶、childNodes等（它們是getter）燎猛。節(jié)點(diǎn)類(lèi)的對(duì)象沒(méi)有被創(chuàng)建。但是照皆，有一些具體的節(jié)點(diǎn)類(lèi)繼承了它重绷，比如：文本節(jié)點(diǎn)的Text，元素節(jié)點(diǎn)的Element以及注釋節(jié)點(diǎn)的Comment等
Element：是DOM元素的基本類(lèi)膜毁。它提供了元素級(jí)的搜索昭卓，比如nextElementSibling、childern瘟滨、getElementsByTagName候醒、querySelector等。在瀏覽器中杂瘸，不僅有HTML倒淫，還有XML和SVG文檔。元素類(lèi)是更具體類(lèi)的一些基礎(chǔ)败玉，比如SVGElement敌土、XMLElement和HTMLElement
HTMLElement：是HTML元素的基本類(lèi)，它由各種HTML元素繼承运翼。比如HTMLInputElemnt（對(duì)應(yīng)input元素的類(lèi)）返干、HTMLBodyElement（對(duì)應(yīng)body元素的類(lèi)）和HTMLAnchorElement（對(duì)應(yīng)a元素的類(lèi)）等

對(duì)于HTMLElement類(lèi)，還有很多其它種血淌，比如下圖所示的這些矩欠。

image

因此，節(jié)點(diǎn)的全部屬性和方法都是繼承的結(jié)果！

例如晚顷，DOM對(duì)象中的<input>元素峰伙。它屬于HTMLElement類(lèi)中的HTMLInputElement類(lèi)。它將屬性和方法疊加在一起：

HTMLInputElement：提供了input指定的屬性
HTMLElement：它提供常用的HTML元素方法（getter和setter）
Element：提供元素通用方法
Node：提供公共的DOM節(jié)點(diǎn)屬性
EventTarget：提供對(duì)事件的支持（覆蓋）
最后它繼承了Object的方法（純對(duì)象）该默，比如hasOwnProperty

如果我們想查DOM節(jié)點(diǎn)類(lèi)名瞳氓，可以使用對(duì)象常用的constructor屬性。它引用類(lèi)構(gòu)造函數(shù)栓袖，可以使用constructor.name來(lái)獲取它的name匣摘。比如：

image.gif

或者使用toString把它串起來(lái)，比如：

[圖片上傳失敗...(image-4c8f54-1527513792087)]

我們還可以使用instanceof來(lái)檢查繼承關(guān)系：

image

正如我們所看到的裹刮，DOM節(jié)點(diǎn)是常規(guī)的JavaScript對(duì)象音榜。他們使用基于原型的類(lèi)來(lái)繼承。

在瀏覽器中使用console.dir(elem)輸出元素也很容易捧弃。在控制臺(tái)可以看到HTMLElement.prototype赠叼、Element.prototype等等。

image

DOM節(jié)點(diǎn)類(lèi)型

在瀏覽器和DOM一節(jié)中违霞，我們知道瀏覽器會(huì)根據(jù)DOM模型嘴办，將HTML文檔解析成一系列的節(jié)點(diǎn)，再由這些節(jié)點(diǎn)組成一個(gè)DOM樹(shù)买鸽。在DOM中的最小組成單位叫做節(jié)點(diǎn)（Node）涧郊，DOM樹(shù)由12種類(lèi)型的節(jié)點(diǎn)組成。

DOM中的Node至少擁有nodeType眼五、nodeName和nodeValue這三個(gè)基本屬性妆艘。節(jié)點(diǎn)類(lèi)型不同，這三個(gè)屬性的值也會(huì)不相同看幼。

nodeType：該屬性返回節(jié)點(diǎn)類(lèi)型的常數(shù)值批旺。不同的類(lèi)型對(duì)應(yīng)不同的常數(shù)值，12種類(lèi)型分別對(duì)應(yīng)1到12的常數(shù)值桌吃，如下面的表格所示
nodeName：該屬性返回節(jié)點(diǎn)的名稱(chēng)
nodeValue：該屬性返回或設(shè)置當(dāng)前節(jié)點(diǎn)的值朱沃，格式為字符串

nodeType節(jié)點(diǎn)類(lèi)型：

image

而其中元素節(jié)點(diǎn)、文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)是我們操作DOM最常見(jiàn)的幾種節(jié)點(diǎn)類(lèi)型茅诱。

在JavaScript中逗物，我們可以使用instanceof和其他基于類(lèi)的測(cè)試來(lái)查看節(jié)點(diǎn)類(lèi)型，但是有時(shí)候nodeType可能更簡(jiǎn)單瑟俭。

image

而nodeType是只能屬性翎卓，我們不能修改它。

image

DOM節(jié)點(diǎn)標(biāo)簽

前面提到過(guò)nodeName將會(huì)返回節(jié)點(diǎn)名稱(chēng)（返回的是HTML標(biāo)簽摆寄，并且是大寫(xiě)的）失暴。也就是說(shuō)坯门，給定的DOM節(jié)點(diǎn)，可以通過(guò)nodeName屬性讀取它的標(biāo)簽名稱(chēng)逗扒，比如：

document.body.nodeName // => BODY

</pre>

除了nodeName屬性之外古戴，還可以通過(guò)tagName屬性來(lái)讀取：

document.body.tagName // => BODY

</pre>

雖然nodeName和tagName都能讀取到元素標(biāo)簽名矩肩，但兩者之間有區(qū)別嗎现恼？當(dāng)然，兩者之間有略微的差異：

tagName屬性只能用于元素節(jié)點(diǎn)（Element）
nodeName屬性可以用于任意節(jié)點(diǎn)（Node）上黍檩，如果用于元素上叉袍，那么和tagName相同，如果用于其他節(jié)點(diǎn)類(lèi)型刽酱，比如文本喳逛、注釋節(jié)點(diǎn)等，它有一個(gè)帶有節(jié)點(diǎn)類(lèi)型的字符串

也就是說(shuō)棵里，tagName只支持元素節(jié)點(diǎn)（因?yàn)樗从?code>Element類(lèi)）润文，而nodeName可以用于所有節(jié)點(diǎn)類(lèi)型。比如下面這個(gè)示例殿怜，來(lái)比較一下tagName和nodeName的結(jié)果：

image

如果我們只處理DOM元素转唉，那么我們就可以選擇tagName屬性來(lái)做相應(yīng)的處理。

除了XHTML稳捆，標(biāo)簽名始終是大寫(xiě)的。瀏覽器有兩種處理文檔的模式：HTML和XML麦轰。通常HTML模式用于Web頁(yè)面乔夯。當(dāng)瀏覽器接收到一個(gè)帶有Content-Type:application/xml+xhtml的頭，就會(huì)啟用XML模式款侵。在HTML模式中末荐，tagName或者nodeName總是返回大寫(xiě)標(biāo)簽，比如<body>或<BoDy>返回的是BODY新锈；對(duì)于XML模式甲脏，現(xiàn)在很少使用了。

DOM節(jié)點(diǎn)內(nèi)容

對(duì)于DOM節(jié)點(diǎn)的內(nèi)容妹笆，JavaScript中提供了幾個(gè)方法來(lái)對(duì)其進(jìn)行操作块请，比如innerHTML、outerHTML拳缠、textContent墩新、innerText、outerText和nodeValue等窟坐。接下來(lái)海渊，咱們看看他們的使用場(chǎng)景以及相應(yīng)的差異性绵疲。

為了易于幫助大家理解和掌握這向方法的使用，接下來(lái)的示例都將圍繞著下面這個(gè)DOM結(jié)構(gòu)來(lái)做處理：

<body>

<div id="main">
<p>The paragraph element</p>
<div>The div </div>
<input type="text" id="name" value="User name" />
</div> </body>

</pre>

`innerHTML`

innerHTML屬性允許我們獲取元素的HTML臣疑，而且其獲取的的值是一個(gè)String類(lèi)型盔憨。比如：

let ele = document.getElementById('main')
let eleContent = ele.innerHTML;
console.log(typeof eleContent, eleContent)

</pre>

輸出的結(jié)果如下：

image

上面看到的是innerHTML屬性獲取某個(gè)元素的內(nèi)容，當(dāng)然innerHTML也可以修改某個(gè)元素的內(nèi)容讯沈。比如：

let eleP = document.querySelector('p')
eleP.innerHTML = '我是一個(gè)段落郁岩，新修改的內(nèi)容：<a href="#">我是一個(gè)鏈接</a>'

</pre>

刷新頁(yè)面，段落p元素整個(gè)內(nèi)容都將被修改了：

image

如果使用innerHTML將<script>標(biāo)簽插入到document芙盘，它不會(huì)被執(zhí)行驯用。

使用innerHTML可以使用ele.innerHTML += "something"來(lái)追回更多的HTML，比如下面這個(gè)示例：

let eleP = document.querySelector('p')
eleP.innerHTML += '我是一個(gè)段落儒老，新修改的內(nèi)容：'
eleP.innerHTML += '<a href="#">我是一個(gè)鏈接</a>'

</pre>

結(jié)果如下：

image.gif

使用innerHTML要非常小心蝴乔，因?yàn)樗龅牟皇羌臃ǎ峭暾母采w驮樊。還有：

當(dāng)內(nèi)容為“零輸出”（zeroed-out）和從頭重寫(xiě)時(shí)薇正，所有的圖像和其他資源將被重新加載。

`outerHTML`

outerHTML屬性包含元素的全部HTML囚衔。就像innerHTML的內(nèi)容加上元素本身一樣挖腰。從文字難于理解或想象的話(huà)，咱們把上面的示例修改一下练湿，通過(guò)innerHTML和outerHTML的結(jié)果來(lái)看其獲取的是什么：

let eleP = document.querySelector('p')
let eleInner = eleP.innerHTML
let eleOuter = eleP.outerHTML

console.log('>>> innerHTML >>>', eleInner)
console.log('>>> outerHTML >>>', eleOuter)

</pre>

輸出的結(jié)果：

image.gif

outerHTML和innerHTML也可以寫(xiě)入猴仑，但不同的是：

innerHTML可以寫(xiě)入內(nèi)容，改變?cè)胤拾ィ?code>outerHTML在外部環(huán)境中取代了整體!

比如下面這個(gè)示例：

let eleP = document.querySelector('p')

eleP.outerHTML = '<div class="new">把整個(gè)p元素?fù)Q成div元素</div>'

</pre>

image

從效果和頁(yè)面源碼上截圖可以看出來(lái)辽俗，div替換了p。

outerHTML賦值不修改DOM元素篡诽，而是從外部環(huán)境中提取它崖飘，并插入一個(gè)新的HTML片段，而不是它杈女。新手時(shí)常在這里會(huì)犯錯(cuò)誤：修改eleP.outerHTML朱浴，然后繼續(xù)使用eleP，就好像它有新的內(nèi)容一樣达椰。

let eleP = document.querySelector('p')

eleP.outerHTML = '<div class="new">把整個(gè)p元素?fù)Q成div元素</div>'

console.log(eleP.innerHTML)

</pre>

image

我們可以寫(xiě)入outerHTML翰蠢，但是要記住，它不會(huì)改變我們寫(xiě)入的元素啰劲。相反躏筏，它會(huì)在它的位置上創(chuàng)建新的內(nèi)容。我們可以通過(guò)查詢(xún)DOM獲得對(duì)新元素的引用呈枉。比如：

let eleP = document.querySelector('p')
eleP.outerHTML = '<div class="new">把整個(gè)p元素?fù)Q成div元素</div>'

console.log('>>>> ', eleP)

let newEle = document.querySelector('.new')

console.log('>>>> ', newEle)

</pre>

結(jié)果如下：

image

`textContent`

textContent屬性和innerHTML以及outerHTML都不一樣趁尼。textContent只獲取元素的純文本內(nèi)容埃碱，包括其后代元素的內(nèi)容。比如：

let mainEle = document.querySelector('#main')

console.log('>>>> innerHTML >>>>', mainEle.innerHTML)
console.log('>>>> outerHTML >>>>', mainEle.outerHTML)
console.log('>>>> textContent >>>>', mainEle.textContent)

</pre>

結(jié)果如下：

image

正如我們所看到的酥泞，textContent返回的只有文本內(nèi)容砚殿，就像是把所有HTML元素的標(biāo)簽都刪除了，但是它們的文本仍然保留著芝囤。正如上面示例中的似炎，innerHTML、outerHTML和textContent輸出的結(jié)果悯姊，可以一目了然知道他們之間的差異性羡藐。

textContent和其他兩個(gè)屬性一樣，也可以寫(xiě)入內(nèi)容悯许。但對(duì)于textContent的寫(xiě)入更為有用仆嗦，因?yàn)樗鼘?xiě)入的內(nèi)容是純內(nèi)容，是一種安全方式先壕。而innerHTML和outerHTML都會(huì)寫(xiě)入HTML瘩扼，而會(huì)寫(xiě)入HTML標(biāo)簽的方式是一種不安全的形式，容易引起Web的XSS攻擊垃僚。

XSS我們先忽略集绰，來(lái)看看寫(xiě)入的差異性：

let mainEle = document.querySelector('#main')
let content = "我要新內(nèi)容，并帶有一個(gè)標(biāo)簽：<b>Boo,Waa!!!</b>"

mainEle.textContent = content
mainEle.innerHTML = content
mainEle.outerHTML = content

</pre>

效果如下：

image

如果你夠仔細(xì)的話(huà)谆棺，會(huì)發(fā)現(xiàn)栽燕，name中的<b>Boo,Waa!!!</b>的<body>標(biāo)簽也被當(dāng)做文本內(nèi)容寫(xiě)進(jìn)去了。如下圖所示：

image

大多數(shù)情況之下改淑，我們希望從用戶(hù)那里得到文本纫谅，并希望將其視為文本。我們不希望在我們的網(wǎng)站上出現(xiàn)意想不到的HTML溅固，那么textContent就可以得到你想要的。

`innerText`和`outerText`

innerText和outerText是IE的私有屬性兰珍，獲取的也是元素的文本內(nèi)容侍郭，有點(diǎn)類(lèi)似于textContent。所以這里只簡(jiǎn)單的提一提掠河，并不深入展開(kāi)亮元。如果這里有誤，請(qǐng)大大們指正唠摹。

`nodeValue`和`data`

innerHTML屬性?xún)H對(duì)元素節(jié)點(diǎn)有效爆捞。

其他節(jié)點(diǎn)類(lèi)型有對(duì)應(yīng)的節(jié)點(diǎn)：nodeValue和data屬性。這兩種方法在實(shí)際應(yīng)用中幾乎是相同的勾拉，只有很小的差異煮甥。來(lái)看看示例盗温。

<body>
Hello JavaScript!!!!
<div id="main">
<p>The paragraph element</p>
<div>The div </div>
<input type="text" id="name" value="User name" />
</div>
<script> console.log('>>> nodeValue >>>', document.body.firstChild.nodeValue)
console.log('>>> data >>>', document.body.firstChild.data)</script></body>

</pre>

他們輸出的結(jié)果是相同的：

image

總結(jié)

每個(gè)DOM節(jié)點(diǎn)屬于某個(gè)類(lèi)。這些類(lèi)構(gòu)成一個(gè)DOM樹(shù)成肘。所有的屬性和方法都將被繼承卖局。主要的DOM節(jié)點(diǎn)屬性有：

nodeType：我們可以從DOM對(duì)象類(lèi)中獲取nodeType。我們通常需要查看它是否是文本或元素節(jié)點(diǎn)双霍，使用nodeType屬性很好砚偶。它可以獲取對(duì)應(yīng)的常數(shù)值，其中1表示元素節(jié)點(diǎn)洒闸，3表示文本節(jié)點(diǎn)染坯。另外，該屬性是一個(gè)只讀屬性丘逸。
nodeName / tagName：tagName只用于元素節(jié)點(diǎn)单鹿，對(duì)于非元素節(jié)點(diǎn)使用nodeName來(lái)描述。它們也是只讀屬性鸣个。
innerHTML：獲取HTML元素的內(nèi)容（包括元素標(biāo)簽自身）羞反。其可以被修改。
outerHTML：獲取元素完整的HTML囤萤。outerHTML并沒(méi)有觸及元素自身昼窗。相反，它被外部環(huán)境中的新HTML所取代涛舍。
nodeValue / data：非元素節(jié)點(diǎn)的內(nèi)容（文本澄惊、注釋?zhuān)＿@兩個(gè)幾乎是一樣的富雅，不過(guò)我們通常使用data掸驱。
textContent：獲取元素內(nèi)容的文本，基本上是HTML減去所有的標(biāo)簽没佑。它也具有寫(xiě)入特性毕贼，可以將文本放入元素中，所有特殊的字符和標(biāo)記都被精確的處理為文本蛤奢。

DOM節(jié)點(diǎn)也有其他屬性鬼癣，這取決于它們的類(lèi)。例如啤贩，<input>元素（HTMLElement）具有value待秃、type屬性，而<a>元素（HTMLAnchorElement）具有href屬性痹屹。大多數(shù)標(biāo)準(zhǔn)的HTML屬性都具有相應(yīng)的DOM屬性章郁。但HTML屬性和DOM屬性并不總是相同的，有關(guān)于這方面的介紹志衍，我們?cè)诤竺娴奈恼轮袑?huì)闡述暖庄。如果你感興趣聊替，歡迎持續(xù)關(guān)注相關(guān)的更新。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末雄驹，一起剝皮案震驚了整個(gè)濱河市佃牛，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌医舆，老刑警劉巖俘侠，帶你破解...
沈念sama閱讀 211,265評(píng)論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異蔬将，居然都是意外死亡爷速，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,078評(píng)論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)霞怀，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)惫东，“玉大人，你說(shuō)我怎么就攤上這事毙石×冢” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 156,852評(píng)論 0贊 347
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵徐矩，是天一觀的道長(zhǎng)滞时。經(jīng)常有香客問(wèn)我，道長(zhǎng)滤灯，這世上最難降的妖魔是什么坪稽？我笑而不...
開(kāi)封第一講書(shū)人閱讀 56,408評(píng)論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮鳞骤，結(jié)果婚禮上窒百，老公的妹妹穿的比我還像新娘。我一直安慰自己豫尽，他們只是感情好篙梢，可當(dāng)我...
茶點(diǎn)故事閱讀 65,445評(píng)論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著美旧，像睡著了一般渤滞。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上陈症，一...
開(kāi)封第一講書(shū)人閱讀 49,772評(píng)論 1贊 290
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音震糖，去河邊找鬼录肯。笑死，一個(gè)胖子當(dāng)著我的面吹牛吊说，可吹牛的內(nèi)容都是我干的论咏。我是一名探鬼主播优炬，決...
沈念sama閱讀 38,921評(píng)論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼厅贪！你這毒婦竟也來(lái)了蠢护？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 37,688評(píng)論 0贊 266
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤养涮，失蹤者是張志新（化名）和其女友劉穎葵硕，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體贯吓，經(jīng)...
沈念sama閱讀 44,130評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡懈凹，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,467評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了悄谐。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片介评。...
茶點(diǎn)故事閱讀 38,617評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖爬舰，靈堂內(nèi)的尸體忽然破棺而出们陆，到底是詐尸還是另有隱情，我是刑警寧澤情屹，帶...
沈念sama閱讀 34,276評(píng)論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布坪仇，位于F島的核電站，受9級(jí)特大地震影響屁商，放射性物質(zhì)發(fā)生泄漏烟很。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,882評(píng)論 3贊 312
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一蜡镶、第九天我趴在偏房一處隱蔽的房頂上張望雾袱。院中可真熱鬧，春花似錦官还、人聲如沸芹橡。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,740評(píng)論 0贊 21
一樁弒父案望伦，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)林说。三九已至，卻和暖如春屯伞，著一層夾襖步出監(jiān)牢的瞬間腿箩，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,967評(píng)論 1贊 265
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工劣摇，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留珠移，地道東北人。一個(gè)月前我還...
沈念sama閱讀 46,315評(píng)論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像钧惧，于是被迫代替她去往敵國(guó)和親暇韧。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,486評(píng)論 2贊 348

DOM系列：DOM節(jié)點(diǎn)屬性

DOM節(jié)點(diǎn)類(lèi)

DOM節(jié)點(diǎn)類(lèi)型

DOM節(jié)點(diǎn)標(biāo)簽

DOM節(jié)點(diǎn)內(nèi)容

innerHTML

outerHTML

textContent

innerText和outerText

nodeValue和data

總結(jié)

推薦閱讀更多精彩內(nèi)容

`innerHTML`

`outerHTML`

`textContent`

`innerText`和`outerText`

`nodeValue`和`data`