JavaScript HTML DOM導航（總結分享）

本篇文章給大家帶來了關於的相關知識，其中主要介紹了HTML DOM導航的相關問題，下面一起來看一下，希望對大家有幫助。

【相關推薦：、】

JS HTML DOM 導航

通過 HTML DOM，您能夠使用節點關係來導航節點樹。

DOM節點

根據 W3C HTML DOM 標準，HTML 檔案中的所有事物都是節點：

整個檔案是檔案節點
每個 HTML 元素是元素節點
HTML 元素內的文字是文位元組點
每個 HTML 屬性是屬性節點
所有註釋是註釋節點

有了 HTML DOM，節點樹中的所有節點都能通過 JavaScript 存取。

能夠建立新節點，還可以修改和刪除所有節點。

節點關係

節點樹中的節點彼此之間有一定的等級關係。

術語（父、子和同胞，parent、child和sibling）用於描述這些關係
- 在節點樹中，頂端節點被稱為根（根節點）
- 每個節點都有父節點，除了根（根節點沒有父節點）
- 節點能夠擁有一定數量的子
- 同胞（兄弟或姐妹）指的是擁有相同父的節點

eg:

<html>

   <head>
       <title>DOM 教學</title>
   </head>

  <body>
       <h1>DOM 第一課</h1>
       <p>Hello world!</p>
   </body>

</html>

在這裡插入圖片描述

從以上的 HTML 中您能讀到以下資訊：

- <html> 是根節點
- <html> 沒有父
- <html> 是 <head> 和 <body> 的父
- <head> 是 <html> 的第一個子
- <body> 是 <html> 的最後一個子
**同時：**

- <head> 有一個子：<title>
- <title> 有一個子（文位元組點）："DOM 教學"
- <body> 有兩個子：<h1> 和 <p>
- <h1> 有一個子："DOM 第一課"
- <p> 有一個子："Hello world!"
- <h1> 和 <p> 是同胞

在節點之間導航

通過 JavaScript，您可以使用以下節點屬性在節點之間導航：

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

子節點和節點值

DOM 處理中的一種常見錯誤是認為元素節點中包含文字。

範例：

<title id="demo">DOM 教學</title>

（上面例子中的）元素節點

<strong>不包含</strong>文字。

它包含了值為「DOM 教學」的文位元組點。

文位元組點的值能夠通過節點的 innerHTML 屬性進行存取：

var myTitle = document.getElementById("demo").innerHTML;

存取 innerHTML 屬性等同於存取首個子節點的 nodeValue：

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

也可以這樣存取第一個子節點：

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

以下三個例子取回

元素的文字並複製到

元素中：

範例 1

<html>
<body>

<h1 id="id01">我的第一張頁面</h1>
<p id="id02">Hello!</p>

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

</body>
</html>

範例 2

<html>
<body>

<h1 id="id01">我的第一張頁面</h1>
<p id="id02">Hello!</p>

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

</body>
</html>

範例 3

<html>
<body>

<h1 id="id01">我的第一張頁面</h1>
<p id="id02">Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

InnerHTML

我們使用 innerHTML 取回 HTML 元素的內容。

DOM 根節點

有兩個特殊屬性允許存取完整檔案：

document.body - 檔案的 body
document.documentElement - 完整檔案
範例

<html>
<body>

<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.body</b> 屬性。</p>
</div>

<script>
 alert(document.body.innerHTML);
</script>

</body>
</html>

在這裡插入圖片描述
範例

<html>
<body>

<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.documentElement</b> 屬性。</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

</body>
</html>

在這裡插入圖片描述

nodeName 屬性

nodeName 屬性規定節點的名稱。

nodeName是唯讀的
元素節點的 nodeName等同於標籤名
屬性節點的 nodeName是屬性的名稱
文位元組點的 nodeName 總是 #text
檔案節點的 nodeName 總是 #document
範例：

<h1 id="id01">我的第一張網頁</h1>
<p id="id02">Hello!</p>

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

返回H1
註釋：
nodeName 總是包含 HTML 元素的大寫標籤名。

nodeValue 屬性

nodeValue 屬性規定節點的值。

元素節點的 nodeValue 是 undefined
文位元組點的 nodeValue 是文字文字
屬性節點的 nodeValue 是屬性值

nodeType 屬性

nodeType 屬性返回**節點的型別。**nodeType 是唯讀的。

範例

<h1 id="id01">我的第一張網頁</h1>
<p id="id02">Hello!</p>

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

返回1
最重要的 nodeType 屬性是：
在這裡插入圖片描述

Type 2 在 HTML DOM 中已棄用。XML DOM 中未棄用。

【相關推薦：、】

以上就是JavaScript HTML DOM導航（總結分享）的詳細內容，更多請關注TW511.COM其它相關文章！