DOM
javascript 的組成部分
- DOM (document object model) 文檔對象模型
- BOM (browers object model) 瀏覽器對象模型
- ECMAScript js 的核心
DOM樹
我們可以打印“console.log(document)”看看：
DOM 節點
- 節點分類
- 元素節點：每個 HTML元素
- 屬性節點：HTML元素的屬性
- 文本節點：HTML元素內的文本
- 註釋節點：註釋
- 文檔節點：整個文檔document
- 元素節點：每個 HTML元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>第1個li</li>
<li>第2個li</li>
<li>第3個li</li>
<li>第4個li</li>
<!-- html註釋 -->
<li>
<span>span1</span>
<span>span2</span>
</li>
</ul>
<script>
{
console.log(document.childNodes);
let list = document.querySelector("#list");
console.log(list.childNodes);
}
</script>
</body>
</html>
html元素節點：html
li元素節點：li
文本節點：text
註釋節點：comment
疑問：爲啥有這麼多text節點？
我們可以刪除三個“換行”試試：
<ul id="list">
<li>第1個li</li><li>第2個li</li><li>第3個li</li><li>第4個li</li>
<!-- html註釋 -->
<li>
<span>span1</span>
<span>span2</span>
</li>
</ul>
會發現刪除三個換行，list下少了3個text節點，相信應該明白了吧！其實“換行”在文檔解析的時候，解析成空格或者空白符，其實這些東西實際也是節點，只不過劃分在文本節點裏了。
溜_x_i_a_o_迪童鞋認爲其實html上所有的東西都是DOM樹上的節點。
- 節點類型 — nodeType
- 元素節點：1
- 屬性節點：2
- 文本節點：3
- 註釋節點：8
- 文檔節點：9
- 元素節點：1
//console.log(document.childNodes);
let list = document.querySelector("#list");
//console.log(list.childNodes);
// 節點類型
document.childNodes.forEach(item => {
console.log("document:",item,item.nodeType);
// 10 文檔聲明
// 1 元素節點
});
list.childNodes.forEach(item => {
console.log("list:",item,item.nodeType);
// 3 文本節點
// 8 註釋節點
});
溜_x_i_a_o_迪童鞋在讓好奇的大傢伙看一下節點名稱。
//console.log(document.childNodes);
let list = document.querySelector("#list");
//console.log(list.childNodes);
// 節點類型
document.childNodes.forEach(item => {
console.log("document:",item,item.nodeType,item.nodeName);
// 10 文檔聲明
// 1 元素節點
});
list.childNodes.forEach(item => {
console.log("list:",item,item.nodeType,item.nodeName);
// 3 文本節點
// 8 註釋節點
});
- 節點名稱 — nodeName
- 元素節點：與標籤名相同
- 文本節點：爲#text
- 註釋節點：爲#comment
- 文檔節點：爲#document
溜_x_i_a_o_迪童鞋再次小結：
節點類型
1 元素節點 （標籤名稱）
3 文本節點 (#text)
8 註釋節點 (#comment)
9 document (#document)
10 文檔聲明 (html)