DOM與Node節點
1、DOM的概念
DOM 是 W3C（萬維網聯盟）的標準，DOM 定義了訪問 HTML 和 XML 文檔的標準。
W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
2、DOM的分類
- 核心 DOM ： 針對任何結構化文檔的標準模型
- XML DOM ： 針對 XML 文檔的標準模型，定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。
- HTML DOM ：針對 HTML 文檔的標準模型，定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
3、DOM節點
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點(NODE)：
- 整個文檔是一個文檔節點(document對象)
- 每個 HTML 元素是元素節點(element 對象)
- HTML 元素內的文本是文本節點(text對象)
- 每個 HTML 屬性是屬性節點(attribute對象)
- 註釋是註釋節點(comment對象)
4、DOM節點關係圖
自身屬性
1、屬性
- attributes - 節點（元素）的屬性節點
- nodeType – 節點類型
- nodeValue – 節點值
- nodeName – 節點名稱
- innerHTML - 節點的文本值（顯示在頁面上的內容）
2、測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">DIV1文本
<p name="p_label" class="p1">P文本</p>
<div class="div2">DIV2文本
<div div3>DIV3文本</div>
<a href="">A文本</a>
</div>
</div>
<script>
var ele=document.getElementsByClassName("p1")[0]; //獲取所有class爲p1的元素，0表示第一個元素名
//自身節點屬性
console.log(ele);
console.log(ele.nodeName); //元素名
console.log(ele.nodeType); //元素格式
console.log(ele.nodeValue); //元素值
console.log(ele.innerHTML); //在控制檯顯示節點內容
ele.innerHTML="Hello JavaScript"; //改變節點的內容（顯示在html頁面上的內容）
</script>
</body>
</html>
3、測試結果：
導航屬性
1、屬性
- parentNode - 節點（元素）的父節點 (推薦多用)
- firstChild – 節點下第一個子元素
- lastChild – 節點下最後一個子元素
- childNodes - 節點（元素）的子節點
2、測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">DIV1文本
<p name="p_label" class="p1">P文本</p>
<div class="div2">DIV2文本
<div div3>DIV3文本</div>
<a href="">A文本</a>
</div>
</div>
<script>
var ele=document.getElementsByClassName("p1")[0]; //獲取所有class爲p1的元素，0表示第一個元素名
//導航屬性
var a_ele=ele.parentNode; //獲取一個新的element對象
console.log(a_ele.nodeName);
var b_ele=ele.nextSibling;
console.log(b_ele.nextSibling);
var c_ele=ele.nextElementSibling;
console.log(c_ele.nodeName);
console.log(c_ele.innerHTML);
var ele2=document.getElementsByClassName("div1")[0];
console.log(ele2.children);
console.log(ele2.children[1].children); //獲取div1下的第二個元素（div2）的children，即div3和a標籤
</script>
</body>
</html>
3、測試結果：
頁面查找
1、各節點的層級關係
2、頁面查找方法
- 使用 getElementById() 方法
- 使用 getElementsByTagName() 方法
- 使用 getElementsByClassName() 方法
- 使用 getElementsByName() 方法
3、測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">DIV1文本
<p name="p_label" class="p1">P文本</p>
<div class="div2">DIV2文本
<div div3>DIV3文本</div>
<a href="">A文本</a>
</div>
</div>
<script>
var ele=document.getElementsByClassName("p1")[0]; //獲取所有class爲p1的元素，0表示第一個元素名
//獲取p標籤的“兄弟姐妹”
var ele3=document.getElementsByName("p_label")[0];
// console.log(ele3); //獲取p標籤
a_ele3=ele3.nextElementSibling
console.log(a_ele3.innerHTML);
console.log(a_ele3.innerText); //獲取標籤內文本
a_ele3.innerHTML="<h1>替換內容！</h1>";
</script>
</body>
</html>
4、測試結果
