溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了javascript DOM節(jié)點(diǎn)屬性知識(shí)點(diǎn)有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇javascript DOM節(jié)點(diǎn)屬性知識(shí)點(diǎn)有哪些文章都會(huì)有所收獲，下面我們一起來看看吧。
DOM節(jié)點(diǎn)的屬性取決于它們的類（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樹。
每個(gè)DOM節(jié)點(diǎn)屬于相應(yīng)的內(nèi)置類。
root是DOM樹的EventTarget，它是由Node繼承的，而其他DOM節(jié)點(diǎn)繼承它。
下圖可以幫助我們更易于理解：
DOM節(jié)點(diǎn)的類主要有：
EventTarget：是root抽象類（Abstract Class）。該類的對(duì)象永遠(yuǎn)不會(huì)創(chuàng)建。它作為一個(gè)基礎(chǔ)，因此所有的DOM節(jié)點(diǎn)都支持所謂的事件（Events），稍后會(huì)涉及這個(gè)
Node：也是一個(gè)抽象類，作為DOM節(jié)點(diǎn)的基礎(chǔ)。它提供了核心功能：parentNode、nextSibling、childNodes等（它們是getter）。節(jié)點(diǎn)類的對(duì)象沒有被創(chuàng)建。但是，有一些具體的節(jié)點(diǎn)類繼承了它，比如：文本節(jié)點(diǎn)的Text，元素節(jié)點(diǎn)的Element以及注釋節(jié)點(diǎn)的Comment等
Element：是DOM元素的基本類。它提供了元素級(jí)的搜索，比如nextElementSibling、childern、getElementsByTagName、querySelector等。在瀏覽器中，不僅有HTML，還有XML和SVG文檔。元素類是更具體類的一些基礎(chǔ)，比如SVGElement、XMLElement和HTMLElement
HTMLElement：是HTML元素的基本類，它由各種HTML元素繼承。比如HTMLInputElemnt（對(duì)應(yīng)input元素的類）、HTMLBodyElement（對(duì)應(yīng)body元素的類）和HTMLAnchorElement（對(duì)應(yīng)a元素的類）等
對(duì)于
HTMLElement類，還有很多其它種，比如下圖所示的這些。
因此，節(jié)點(diǎn)的全部屬性和方法都是繼承的結(jié)果！
例如，DOM對(duì)象中的<input>元素。它屬于HTMLElement類中的HTMLInputElement類。它將屬性和方法疊加在一起：
HTMLInputElement：提供了input指定的屬性
HTMLElement：它提供常用的HTML元素方法（getter和setter）
Element：提供元素通用方法
Node：提供公共的DOM節(jié)點(diǎn)屬性
EventTarget：提供對(duì)事件的支持（覆蓋）
最后它繼承了Object的方法（純對(duì)象），比如hasOwnProperty
如果我們想查DOM節(jié)點(diǎn)類名，可以使用對(duì)象常用的constructor屬性。它引用類構(gòu)造函數(shù)，可以使用constructor.name來獲取它的name。比如：
或者使用toString把它串起來，比如：
我們還可以使用instanceof來檢查繼承關(guān)系：
正如我們所看到的，DOM節(jié)點(diǎn)是常規(guī)的JavaScript對(duì)象。他們使用基于原型的類來繼承。
在瀏覽器中使用console.dir(elem)輸出元素也很容易。在控制臺(tái)可以看到HTMLElement.prototype、Element.prototype等等。
在瀏覽器和DOM一節(jié)中，我們知道瀏覽器會(huì)根據(jù)DOM模型，將HTML文檔解析成一系列的節(jié)點(diǎn)，再由這些節(jié)點(diǎn)組成一個(gè)DOM樹。在DOM中的最小組成單位叫做節(jié)點(diǎn)（Node），DOM樹由12種類型的節(jié)點(diǎn)組成。
DOM中的Node至少擁有
nodeType、nodeName和nodeValue這三個(gè)基本屬性。節(jié)點(diǎn)類型不同，這三個(gè)屬性的值也會(huì)不相同。
nodeType：該屬性返回節(jié)點(diǎn)類型的常數(shù)值。不同的類型對(duì)應(yīng)不同的常數(shù)值，12種類型分別對(duì)應(yīng)1到12的常數(shù)值，如下面的表格所示
nodeName：該屬性返回節(jié)點(diǎn)的名稱
nodeValue：該屬性返回或設(shè)置當(dāng)前節(jié)點(diǎn)的值，格式為字符串
nodeType節(jié)點(diǎn)類型：
而其中元素節(jié)點(diǎn)、文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)是我們操作DOM最常見的幾種節(jié)點(diǎn)類型。
在JavaScript中，我們可以使用instanceof和其他基于類的測(cè)試來查看節(jié)點(diǎn)類型，但是有時(shí)候nodeType可能更簡單。
而nodeType是只能屬性，我們不能修改它。
前面提到過nodeName將會(huì)返回節(jié)點(diǎn)名稱（返回的是HTML標(biāo)簽，并且是大寫的）。也就是說，給定的DOM節(jié)點(diǎn)，可以通過nodeName屬性讀取它的標(biāo)簽名稱，比如：
document.body.nodeName // => BODY
除了nodeName屬性之外，還可以通過tagName屬性來讀?。?/p>
document.body.tagName // => BODY
雖然nodeName和tagName都能讀取到元素標(biāo)簽名，但兩者之間有區(qū)別嗎？當(dāng)然，兩者之間有略微的差異：
tagName屬性只能用于元素節(jié)點(diǎn)（Element）
nodeName屬性可以用于任意節(jié)點(diǎn)（Node）上，如果用于元素上，那么和tagName相同，如果用于其他節(jié)點(diǎn)類型，比如文本、注釋節(jié)點(diǎn)等，它有一個(gè)帶有節(jié)點(diǎn)類型的字符串
也就是說，tagName只支持元素節(jié)點(diǎn)（因?yàn)樗从?code>Element類），而nodeName可以用于所有節(jié)點(diǎn)類型。比如下面這個(gè)示例，來比較一下tagName和nodeName的結(jié)果：
如果我們只處理DOM元素，那么我們就可以選擇tagName屬性來做相應(yīng)的處理。
除了XHTML，標(biāo)簽名始終是大寫的。瀏覽器有兩種處理文檔的模式：HTML和XML。通常HTML模式用于Web頁面。當(dāng)瀏覽器接收到一個(gè)帶有
Content-Type:application/xml+xhtml的頭，就會(huì)啟用XML模式。在HTML模式中，tagName或者nodeName總是返回大寫標(biāo)簽，比如<body>或<BoDy>返回的是BODY；對(duì)于XML模式，現(xiàn)在很少使用了。
對(duì)于DOM節(jié)點(diǎn)的內(nèi)容，JavaScript中提供了幾個(gè)方法來對(duì)其進(jìn)行操作，比如innerHTML、outerHTML、textContent、innerText、outerText和nodeValue等。接下來，咱們看看他們的使用場(chǎng)景以及相應(yīng)的差異性。
為了易于幫助大家理解和掌握這向方法的使用，接下來的示例都將圍繞著下面這個(gè)DOM結(jié)構(gòu)來做處理：
<body> <!-- 主內(nèi)容 --> <div id="main"> <p>The paragraph element</p> <div>The div </div> <input type="text" id="name" value="User name" /> </div> </body>
innerHTMLinnerHTML屬性允許我們獲取元素的HTML，而且其獲取的的值是一個(gè)String類型。比如：
let ele = document.getElementById('main')
let eleContent = ele.innerHTML; console.log(typeof eleContent, eleContent)輸出的結(jié)果如下：
上面看到的是innerHTML屬性獲取某個(gè)元素的內(nèi)容，當(dāng)然innerHTML也可以修改某個(gè)元素的內(nèi)容。比如：
let eleP = document.querySelector('p') eleP.innerHTML = '我是一個(gè)段落，新修改的內(nèi)容：<a href="#">我是一個(gè)鏈接</a>'刷新頁面，段落p元素整個(gè)內(nèi)容都將被修改了：
如果使用
innerHTML將<script>標(biāo)簽插入到document，它不會(huì)被執(zhí)行。
使用innerHTML可以使用ele.innerHTML += "something"來追回更多的HTML，比如下面這個(gè)示例：
let eleP = document.querySelector('p') eleP.innerHTML += '我是一個(gè)段落，新修改的內(nèi)容：' eleP.innerHTML += '<a href="#">我是一個(gè)鏈接</a>'結(jié)果如下：
使用innerHTML要非常小心，因?yàn)樗龅牟皇羌臃?，而是完整的覆蓋。還有：
當(dāng)內(nèi)容為“零輸出”（zeroed-out）和從頭重寫時(shí)，所有的圖像和其他資源將被重新加載。
outerHTMLouterHTML屬性包含元素的全部HTML。就像innerHTML的內(nèi)容加上元素本身一樣。從文字難于理解或想象的話，咱們把上面的示例修改一下，通過innerHTML和outerHTML的結(jié)果來看其獲取的是什么：
let eleP = document.querySelector('p')
let eleInner = eleP.innerHTML
let eleOuter = eleP.outerHTML console.log('>>> innerHTML >>>', eleInner) console.log('>>> outerHTML >>>', eleOuter)輸出的結(jié)果：
outerHTML和innerHTML也可以寫入，但不同的是：
innerHTML可以寫入內(nèi)容，改變?cè)?，?code>outerHTML在外部環(huán)境中取代了整體!
比如下面這個(gè)示例：
let eleP = document.querySelector('p') eleP.outerHTML = '<div class="new">把整個(gè)p元素?fù)Q成div元素</div>'
從效果和頁面源碼上截圖可以看出來，p替換了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)
我們可以寫入outerHTML，但是要記住，它不會(huì)改變我們寫入的元素。相反，它會(huì)在它的位置上創(chuàng)建新的內(nèi)容。我們可以通過查詢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)結(jié)果如下：
textContenttextContent屬性和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)結(jié)果如下：
正如我們所看到的，textContent返回的只有文本內(nèi)容，就像是把所有HTML元素的標(biāo)簽都刪除了，但是它們的文本仍然保留著。正如上面示例中的，innerHTML、outerHTML和textContent輸出的結(jié)果，可以一目了然知道他們之間的差異性。
textContent和其他兩個(gè)屬性一樣，也可以寫入內(nèi)容。但對(duì)于textContent的寫入更為有用，因?yàn)樗鼘懭氲膬?nèi)容是純內(nèi)容，是一種安全方式。而innerHTML和outerHTML都會(huì)寫入HTML，而會(huì)寫入HTML標(biāo)簽的方式是一種不安全的形式，容易引起Web的XSS攻擊。
XSS我們先忽略，來看看寫入的差異性：
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效果如下：
如果你夠仔細(xì)的話，會(huì)發(fā)現(xiàn)，name中的<b>Boo,Waa!!!</b>的<body>標(biāo)簽也被當(dāng)做文本內(nèi)容寫進(jìn)去了。如下圖所示：
大多數(shù)情況之下，我們希望從用戶那里得到文本，并希望將其視為文本。我們不希望在我們的網(wǎng)站上出現(xiàn)意想不到的HTML，那么textContent就可以得到你想要的。
innerText和outerTextinnerText和outerText是IE的私有屬性，獲取的也是元素的文本內(nèi)容，有點(diǎn)類似于textContent。所以這里只簡單的提一提，并不深入展開。如果這里有誤，請(qǐng)大大們指正。
nodeValue和datainnerHTML屬性僅對(duì)元素節(jié)點(diǎn)有效。
其他節(jié)點(diǎn)類型有對(duì)應(yīng)的節(jié)點(diǎn)：nodeValue和data屬性。這兩種方法在實(shí)際應(yīng)用中幾乎是相同的，只有很小的差異。來看看示例。
<body>
Hello JavaScript!!!!
<!-- 主內(nèi)容 -->
<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>他們輸出的結(jié)果是相同的：
每個(gè)DOM節(jié)點(diǎn)屬于某個(gè)類。這些類構(gòu)成一個(gè)DOM樹。所有的屬性和方法都將被繼承。主要的DOM節(jié)點(diǎn)屬性有：
nodeType：我們可以從DOM對(duì)象類中獲取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來描述。它們也是只讀屬性。
innerHTML：獲取HTML元素的內(nèi)容（包括元素標(biāo)簽自身）。其可以被修改。
outerHTML：獲取元素完整的HTML。outerHTML并沒有觸及元素自身。相反，它被外部環(huán)境中的新HTML所取代。
nodeValue / data：非元素節(jié)點(diǎn)的內(nèi)容（文本、注釋）。這兩個(gè)幾乎是一樣的，不過我們通常使用data。
textContent：獲取元素內(nèi)容的文本，基本上是HTML減去所有的標(biāo)簽。它也具有寫入特性，可以將文本放入元素中，所有特殊的字符和標(biāo)記都被精確的處理為文本。
DOM節(jié)點(diǎn)也有其他屬性，這取決于它們的類。例如，<input>元素（HTMLElement）具有value、type屬性，而<a>元素（HTMLAnchorElement）具有href屬性。大多數(shù)標(biāo)準(zhǔn)的HTML屬性都具有相應(yīng)的DOM屬性。
關(guān)于“javascript DOM節(jié)點(diǎn)屬性知識(shí)點(diǎn)有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“javascript DOM節(jié)點(diǎn)屬性知識(shí)點(diǎn)有哪些”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼