JavaScript菜鳥教程

JavaScript 對象

JavaScript 函數(shù)

JS HTML DOM

JS 瀏覽器BOM

AJAX 菜鳥教程

JavaScript 參考手冊

JS Window 瀏覽器對象模型 JS DOM 改變元素屬性

JS DOM Navigation

HTML DOM允許JavaScript使用節(jié)點關(guān)系導(dǎo)航節(jié)點樹。

DOM節(jié)點

根據(jù)W3C HTML DOM標準，HTML文檔中的所有內(nèi)容都是一個節(jié)點：

整個文檔是一個文檔節(jié)點
每個HTML元素都是一個元素節(jié)點
HTML元素內(nèi)的文本是文本節(jié)點
每個HTML屬性都是一個屬性節(jié)點（不建議使用）
所有注釋都是注釋節(jié)點

使用HTML DOM，可以通過JavaScript訪問節(jié)點樹中的所有節(jié)點。

可以創(chuàng)建新節(jié)點，并且可以修改或刪除所有節(jié)點。

節(jié)點關(guān)系

節(jié)點樹中的節(jié)點之間具有層次關(guān)系。

術(shù)語“父母”，“孩子”和“兄弟姐妹”用于描述關(guān)系。

在節(jié)點樹中，頂部節(jié)點稱為根（或根節(jié)點）
每個節(jié)點只有一個父節(jié)點，根節(jié)點除外（根節(jié)點沒有父節(jié)點）
一個節(jié)點可以有多個子節(jié)點
兄弟姐妹（兄弟姐妹）是具有相同父節(jié)點的節(jié)點

示例

<html>

  <head>
<title>DOM Tutorial</title>
  </head>

  
<h1>DOM Nodes</h1>
<p>Hello, World</p>
  

</html>

從上面的HTML中，您可以閱讀：
<html>是根節(jié)點，并且沒有父節(jié)點
<html>是<head>和<body>的父級
<head>是<html>的第一個孩子
<body>是<html>的最后一個孩子
和：
<head>有一個孩子：<title>
<title>有一個孩子（一個文本節(jié)點）：“ DOM Tutorial”
<body>有兩個孩子：<h1>和<p>
<h1>有一個孩子（一個文本節(jié)點）：“ DOM Nodes”
<p>有一個孩子（一個文本節(jié)點）：“ Hello，world”
<h1>和<p>是同級

在節(jié)點之間導(dǎo)航

您可以使用以下節(jié)點屬性在具有JavaScript的節(jié)點之間導(dǎo)航：

parentNode

childNodes[nodenumber]

訪問子節(jié)點

您可以使用firstChildDOM節(jié)點的屬性來訪問節(jié)點的第一個直接子節(jié)點。

示例

<p id="para">
  <span>First span</span>
  <b>First Bold</b>
</p>

<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName); // returns SPAN
</script>

測試看看 ?/?

注意：在上面的示例中，輸出將是#text，因為插入了文本節(jié)點以維護標記之間的空白。任何空格都會創(chuàng)建一個#text節(jié)點，從單個空格到多個空格，返回，制表符等。

但是，如果刪除空格，則不會插入#text節(jié)點，并且span元素將成為段落的第一個子元素：

示例

<p id="para"><span>First span</span> <b>First Bold</b></p>

<script>
var para = document.getElementById("para");
alert(para.firstChild.nodeName); // returns SPAN
</script>

測試看看?/?

訪問第一個孩子也可以這樣進行：

示例

para.childNodes[0].nodeName; // returns SPAN

測試看看?/?

您可以使用lastChildDOM節(jié)點的屬性來訪問節(jié)點的最后一個直接子節(jié)點。

示例

para.lastChild.nodeName; // returns B

測試看看?/?

為避免出現(xiàn)#text或#comment節(jié)點firstChild并lastChild返回該問題，您可以選擇使用：

firstElementChild屬性返回指定父元素的第一個子元素。

示例

<p id="para">
  <span>First span</span>
  <b>First Bold</b>
</p>

<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName); // returns SPAN
</script>

測試看看?/?

lastElementChild屬性返回指定父元素的最后一個子元素。

示例

<p id="para">
  <span>First span</span>
  <b>First Bold</b>
</p>

<script>
var para = document.getElementById("para");
alert(para.lastElementChild.nodeName); // returns B
</script>

測試看看?/?

注：本nodeName是一個只讀屬性，返回當前節(jié)點作為字符串的名稱。

訪問父節(jié)點

您可以使用parentNode屬性來訪問DOM樹中指定節(jié)點的父級。

示例

<div>
   <p>This is first P inside DIV</p>
   <p id="para">This is second P inside DIV</p>
   <p>This is third P inside DIV</p>
</div>

<script>
var para = document.getElementById("para");
alert(para.parentNode.nodeName);  // returns DIV
</script>

測試看看?/?

您還可以使用parentElement屬性返回指定元素的父元素。

訪問兄弟節(jié)點

您可以使用previousSibling和nextSibling屬性來訪問DOM樹中的上一個和下一個節(jié)點。

示例

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>

<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>

測試看看?/?

或者，您可以使用previousElementSibling和nextElementSibling來跳過任何空白文本節(jié)點來獲取上一個和下一個同級元素。

示例

<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>

<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>

測試看看?/?

textContent屬性表示節(jié)點的文本內(nèi)容。

DOM根節(jié)點

以下兩個屬性允許訪問整個文檔：

document.body屬性設(shè)置或返回文檔的元素。

示例

<!DOCTYPE html>
<html>


<p>Hello, World!</p>

<div>
  <p>DOM根節(jié)點</p>
  <p>document.body屬性設(shè)置或返回文檔的body元素。</p>
</div>

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


</html>

測試看看?/?

document.documentElement屬性返回文檔的<html>元素。

示例

<!DOCTYPE html>
<html>


<p>Hello, World!</p>

<div>
  <p>DOM根節(jié)點</p>
  <p>document.documentElement屬性返回文檔的根元素。</p>
</div>

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


</html>

測試看看?/?

nodeType屬性

nodeType屬性以數(shù)字形式返回指定節(jié)點的節(jié)點類型。

示例

var x = document.getElementById("myPara").nodeType;

測試看看?/?

DOM樹由不同類型的節(jié)點組成，例如元素，文本，注釋等。

每個節(jié)點都有一個nodeType屬性，可用于查找要處理的節(jié)點類型。

下表列出了最重要的節(jié)點類型：

節(jié)點	類型	例
ELEMENT_NODE	1個	<p class="heading">Hello, World</p>
ATTRIBUTE_NODE	2	class =“heading”（不建議使用）
TEXT_NODE	3	Hello, World
COMMENT_NODE	8	<！--這是注釋-->
DOCUMENT_NODE	9	HTML文檔本身（<html>的父級）
DOCUMENT_TYPE_NODE	10	<！doctype html>

JS Window 瀏覽器對象模型 JS DOM 改變元素屬性