一篇文章帶你了解JavaScript Htmldom 導(dǎo)航

作者：前端進(jìn)階者 2021-11-16 07:54:33

在一個(gè)HTML文檔都是一個(gè)節(jié)點(diǎn)，The entire document is a document node 每個(gè)HTML元素是元素節(jié)點(diǎn) 在HTML元素的文本是文本節(jié)點(diǎn) 每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn) 所有注釋都是注釋節(jié)點(diǎn)。

[[435200]]

使用HTML DOM，可以使用節(jié)點(diǎn)關(guān)系來(lái)導(dǎo)航"節(jié)點(diǎn)樹(shù)"。

一、DOM 節(jié)點(diǎn)

使用HTML DOM, 在節(jié)點(diǎn)樹(shù)的所有節(jié)點(diǎn)可以通過(guò)JavaScript訪(fǎng)問(wèn)。可以創(chuàng)建新節(jié)點(diǎn)，并可以修改或刪除所有節(jié)點(diǎn)。

1. 節(jié)點(diǎn)關(guān)系

節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn)彼此具有層次關(guān)系。

2. 子節(jié)點(diǎn)和節(jié)點(diǎn)值

在DOM處理中常見(jiàn)的錯(cuò)誤就是認(rèn)為一個(gè)元素節(jié)點(diǎn)包含文本。

<title id="demo">DOM Tutorial</title>

元素節(jié)點(diǎn)<title> (在上面的實(shí)例中) 不包含文本。

它包含有值的文本節(jié)點(diǎn) "DOM Tutorial"。

該文本節(jié)點(diǎn)的值可以通過(guò)節(jié)點(diǎn)的innerHTML屬性訪(fǎng)問(wèn)。

var myTitle = document.getElementById("demo").firstChild.nodeValue;

訪(fǎng)問(wèn)innerHTML屬性訪(fǎng)問(wèn)和訪(fǎng)問(wèn)第一個(gè)子節(jié)點(diǎn)值相同:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

訪(fǎng)問(wèn)第一個(gè)子節(jié)點(diǎn)也可以這樣做:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

實(shí)例1：

查詢(xún)<h1>元素的文本，并且拷貝它到<p>元素。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>項(xiàng)目</title> 
</head> 
<body style="background-color: aqua;"> 
 
<h1 id="id01">My First Page</h1> 
<p id="id02"></p> 
 
<script> 
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML; 
</script> 
 
</body> 
</html>

實(shí)例2：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>項(xiàng)目</title> 
</head> 
<body style="background-color: aqua;"> 
 
   <h1 id="id01">My First Page</h1> 
    <p id="id02"></p> 
 
 <script> 
  document.getElementById("id02").innerHTML =         document.getElementById("id01").firstChild.nodeValue; 
</script> 
 
</body> 
</html>

實(shí)例3 ：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>項(xiàng)目</title> 
</head> 
<body style="background-color: aqua;"> 
   <h1 id="id01">My First Page</h1> 
    <p id="id02">Hello!</p> 
 
   <script> 
    document.getElementById("id02").innerHTML =       document.getElementById("id01").childNodes[0].nodeValue; 
</script> 
 
</body> 
</html>

二、DOM 根節(jié)點(diǎn)

有兩個(gè)特殊屬性允許訪(fǎng)問(wèn)完整文檔:

document.body - 文檔主體

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>項(xiàng)目</title> 
</head> 
<body style="background-color: aqua;"> 
 
<h1 id="id01">我的第一個(gè)頁(yè)面</h1> 
<p id="id02"></p> 
 
<script> 
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue; 
</script> 
 
 
</body> 
</html>

document.documentElement - 完整的文檔

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>項(xiàng)目</title> 
  </head> 
  <body style="background-color: aqua;"> 
  <p>Hello World!</p> 
  <div> 
  <p>The DOM is very useful!</p> 
   <p>This example demonstrates the <b>document.documentElement</b> property.</p> 
  </div> 
 
  <script> 
    alert(document.documentElement.innerHTML); 
</script> 
 
</body> 
</html>

1. nodeName 屬性

nodeName屬性指定一個(gè)節(jié)點(diǎn)的名稱(chēng)，nodeName 是只讀的。

nodeName 是只讀的。

nodeName 一個(gè)元素節(jié)點(diǎn)的節(jié)點(diǎn)名稱(chēng)和標(biāo)簽名稱(chēng)相同。

一個(gè)屬性節(jié)點(diǎn)的節(jié)點(diǎn)名稱(chēng)是屬性名。

一個(gè)文本節(jié)點(diǎn)的nodeName總是 #text。

文檔的節(jié)點(diǎn)名稱(chēng)總是 #document。

<h1 id="id01">My First Page</h1> 
<p id="id02"></p> 
 
<script> 
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName; 
</script>

注意:

nodeName總是包含HTML元素的大寫(xiě)標(biāo)簽名稱(chēng)。

2. nodeValue 屬性

nodeValue 屬性指定節(jié)點(diǎn)的值。素節(jié)點(diǎn)的節(jié)點(diǎn)值是 undefined，文本節(jié)點(diǎn)的節(jié)點(diǎn)是文本本身，屬性節(jié)點(diǎn)的節(jié)點(diǎn)值是屬性值。

3. nodeType 屬性

nodeType 屬性返回節(jié)點(diǎn)類(lèi)型. nodeType 是只讀的。

<script> 
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType; 
</script>

三、總結(jié)

本文基于JavaScript，介紹了頁(yè)面上htmldom 導(dǎo)航的節(jié)點(diǎn)。節(jié)點(diǎn)和節(jié)點(diǎn)之間的關(guān)系，采用生動(dòng)的比喻進(jìn)行講解。以及根節(jié)點(diǎn)的屬性進(jìn)行了詳細(xì)講解。通過(guò)豐富的案例，運(yùn)行效果圖的展示。希望能幫助讀者更好的學(xué)習(xí)。

使用JavaScript 語(yǔ)言，方便大家更好理解，希望對(duì)大家的學(xué)習(xí)有幫助。

責(zé)任編輯：武曉燕來(lái)源：前端進(jìn)階學(xué)習(xí)交流