[toc]
# 每日英語
1. `Uniform` 統一
2. `Resource` 資源
# DOM 概述
## DOM
1. DOM 是 JavaScript 操作網頁的接口，全稱為“文檔對象模型”（Document Object Model）。
1. 它的作用是將網頁轉為一個 JavaScript 對象，從而可以用腳本進行各種操作（比如增刪內容）。
1. 瀏覽器會根據 DOM 模型，將結構化文檔（比如 HTML 和 XML）解析成一系列的節點，再由這些節點組成一個樹狀結構（DOM Tree）。
1. 所有的節點和最終的樹狀結構，都有規范的對外接口。
1. DOM 操作是 JavaScript 最常見的任務，離開了 DOM，JavaScript 就無法控制網頁
## 節點
> DOM 的最小組成單位叫做節點（node）。
> 文檔的樹形結構（DOM 樹），就是由各種不同類型的節點組成。
> 每個節點可以看作是文檔樹的一片葉子。
節點的類型有七種。
1. `Document`：整個文檔樹的頂層節點
1. `Element`：網頁的各種 HTML 標簽（比如<body>、<a>等）
1. `Attribute`：網頁元素的屬性（比如 class="right"）
1. `Text`：標簽之間或標簽包含的文本
1. `Comment`：注釋
> 瀏覽器提供一個原生的節點對象 Node，
> 上面這七種節點都繼承了 Node，因此具有一些共同的屬性和方法。
## 節點樹
> 一個文檔的所有節點，按照所在的層級，可以抽象成一種樹狀結構。這種樹狀結構就是 DOM 樹。
> 它有一個頂層節點，下一層都是頂層節點的子節點，然后子節點又有自己的子節點，就這樣層層衍生出一個金字塔結構，倒過來就像一棵樹。
_瀏覽器原生提供 document 節點，代表整個文檔。_
> 控制臺輸出 document, 會是什么?
文檔的第一層只有一個節點，就是 HTML 網頁的第一個標簽<html>
它構成了樹結構的根節點（root node），其他 HTML 標簽節點都是它的下級節點。
除了根節點，其他節點都有三種層級關系。
1. 父節點關系（`parentNode`）：直接的那個上級節點
1. 子節點關系（`childNodes`）：直接的下級節點
1. 同級節點關系（`sibling`）：擁有同一個父節點的節點
DOM 提供操作接口，用來獲取這三種關系的節點。
子節點接口包括 `firstChild`（第一個子節點）和 `lastChild`（最后一個子節點）等屬性，
同級節點接口包括 `nextSibling`（緊鄰在后的那個同級節點）和 `previousSibling`（緊鄰在前的那個同級節點）屬性。
# Node 接口
## 屬性
### Node.prototype.nodeType
> nodeType 屬性返回一個整數值，表示節點的類型。
_document.nodeType 是多少?_
Node 對象定義了幾個常量，對應這些類型值。
```javascript
document.nodeType === Node.DOCUMENT_NODE; // true
```
不同節點的 nodeType 屬性值和對應的常量如下。
- 文檔節點（`document`）：9，對應常量 `Node.DOCUMENT_NODE`
- 元素節點（`element`）：1，對應常量 `Node.ELEMENT_NODE`
- 屬性節點（`attr`）：2，對應常量 `Node.ATTRIBUTE_NODE`
- 文本節點（`text`）：3，對應常量 `Node.TEXT_NODE`
- 文檔片斷節點（`DocumentFragment`）：11，對應常量 `Node.DOCUMENT_FRAGMENT_NODE`
- 文檔類型節點（`DocumentType`）：10，對應常量 `Node.DOCUMENT_TYPE_NODE`
- 注釋節點（`Comment`）：8，對應常量 `Node.COMMENT_NODE`
確定節點類型時，使用 nodeType 屬性是常用方法。
```javascript
var node = document.documentElement.firstChild;
if (node.nodeType === Node.ELEMENT_NODE) {
console.log("該節點是元素節點");
}
```
### Node.prototype.nodeName
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<!-- 如果改成別的... -->
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.nodeName ↓↓↓↓↓↓");
console.log(oDiv.nodeName);
};
</script>
</html>
```
> `nodeName`屬性返回節點的名稱。
不同節點的 nodeName 屬性值如下。
1. 文檔節點（`document`）：#document
1. 元素節點（`element`）：大寫的標簽名
1. 屬性節點（`attr`）：屬性的名稱
1. 文本節點（`text`）：#text
1. 文檔片斷節點（`DocumentFragment`）：#document-fragment
1. 文檔類型節點（`DocumentType`）：文檔的類型
1. 注釋節點（`Comment`）：#comment
### Node.prototype.nodeValue
> `nodeValue` 屬性返回一個字符串，表示當前節點本身的文本值，該屬性可讀寫。
只有文本節點（text）、注釋節點（comment）和屬性節點（attr）有文本值，因此這三類節點的 nodeValue 可以返回結果，其他類型的節點一律返回 null。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<hello id="div1"></hello>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.nodeValue ↓↓↓↓↓↓");
console.log(oDiv.nodeValue); // null
};
</script>
</html>
```
文本節點例子
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<hello id="div1">hello world</hello>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.firstChild.nodeValue ↓↓↓↓↓↓");
oDiv.firstChild.nodeValue = "hello world !!!!!!!!";
console.log(oDiv.firstChild.nodeValue);
};
</script>
</html>
```
注釋節點的例子
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"><!-- hello world --></div>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.firstChild.nodeValue ↓↓↓↓↓↓");
oDiv.firstChild.nodeValue = "hello world !!!!!!!!";
console.log(oDiv.firstChild.nodeValue);
};
</script>
</html>
```
屬性節點的例子
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.div1 {
width: 200px;
height: 200px;
background: red;
}
.div2 {
width: 300px;
height: 300px;
background: green;
}
</style>
</head>
<body>
<div id="div1" class="div1"></div>
</body>
<script>
window.onload = function() {
console.log(
'↓↓↓↓↓↓ document.getElementById("div1").getAttributeNode("class").nodeValue ↓↓↓↓↓↓'
);
console.log(
document.getElementById("div1").getAttributeNode("class")
.nodeValue
);
document
.getElementById("div1")
.getAttributeNode("class").nodeValue = "div2";
};
</script>
</html>
```
同樣的，也只有這三類節點可以設置 nodeValue 屬性的值，其他類型的節點設置無效。
無效的例子
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<hello id="div1"></hello>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.nodeValue ↓↓↓↓↓↓");
console.log(oDiv.nodeValue); // null
oDiv.nodeValue = "hello";
console.log(oDiv.nodeValue);
};
</script>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="d1">hello world</div>
<script>
window.onload = function() {
var div = document.getElementById("d1");
div.nodeValue; // null
console.log("↓↓↓↓↓↓ div.nodeValue ↓↓↓↓↓↓");
console.log(div.nodeValue);
div.firstChild.nodeValue; // "hello world"
console.log("↓↓↓↓↓↓ div.firstChild.nodeValue ↓↓↓↓↓↓");
console.log(div.firstChild.nodeValue);
div.firstChild.nodeValue = "hello world!!!!!"; // "hello world"
console.log("↓↓↓↓↓↓ div.firstChild.nodeValue ↓↓↓↓↓↓");
console.log(div.firstChild.nodeValue);
div.nodeValue = "haha";
};
</script>
</body>
</html>
```
_上面代碼中，div 是元素節點，nodeValue 屬性返回 null。div.firstChild 是文本節點，所以可以返回文本值。_
### Node.prototype.textContent
> `textContent`屬性返回當前節點和它的所有后代節點的文本內容。
_換行也會捕捉到_
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1">
this is
<span>some</span>
text
</div>
</body>
<script>
window.onload = function() {
console.log(
'↓↓↓↓↓↓ document.getElementById("div1").textContent ↓↓↓↓↓↓'
);
console.log(document.getElementById("div1").textContent);
};
</script>
</html>
```
該屬性是可讀寫的，設置該屬性的值，會用一個新的文本節點，替換所有原來的子節點。
它還有一個好處，就是自動對 HTML 標簽轉義。這很適合用于用戶提供的內容。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1">
this is
<span>some</span>
text
</div>
</body>
<script>
window.onload = function() {
document.getElementById("div1").textContent = "hello world!";
document.getElementById("div1").textContent =
"<h1>hello world!</h1>";
};
</script>
</html>
```
對于文本節點（text）、注釋節點（comment）和屬性節點（attr），textContent 屬性的值與 nodeValue 屬性相同。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1">
this is
<span>some</span>
text
</div>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.firstChild.nodeValue ↓↓↓↓↓↓");
console.log(oDiv.firstChild.nodeValue);
console.log("↓↓↓↓↓↓ oDiv.firstChild.textContent ↓↓↓↓↓↓");
console.log(oDiv.firstChild.textContent);
};
</script>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1">
<!-- this is -->
<span>some</span>
text
</div>
</body>
<script>
// 看看注釋節點
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.firstChild.nodeValue ↓↓↓↓↓↓");
console.log(oDiv.firstChild.nodeValue);
console.log("↓↓↓↓↓↓ oDiv.firstChild.textContent ↓↓↓↓↓↓");
console.log(oDiv.firstChild.textContent);
};
</script>
</html>
```
屬性節點的例子
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1" class="div1">
this is
<span>some</span>
text
</div>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log(oDiv.getAttributeNode("class").nodeValue);
console.log(oDiv.getAttributeNode("class").textContent);
};
</script>
</html>
```
對于其他類型的節點，該屬性會將每個子節點（不包括注釋節點）的內容連接在一起返回。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1">
<!-- this is -->
<span>some</span>
text
</div>
</body>
<script>
// 不包括注釋
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.textContent ↓↓↓↓↓↓");
console.log(oDiv.textContent);
};
</script>
</html>
```
如果一個節點沒有子節點，則返回空字符串。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.textContent ↓↓↓↓↓↓");
console.log(oDiv.textContent);
console.log("↓↓↓↓↓↓ typeof(oDiv.textContent) ↓↓↓↓↓↓");
console.log(typeof oDiv.textContent);
};
</script>
</html>
```
文檔節點（document）和文檔類型節點（doctype）的 textContent 屬性為 null。
```
document.firstChild.textContent
null
document.textContent
null
```
如果要讀取整個文檔的內容，可以使用 document.documentElement.textContent。
### Node.prototype.baseURI
`baseURI`屬性返回一個字符串，表示當前網頁的絕對路徑。瀏覽器根據這個屬性，計算網頁上的相對路徑的 URL。
該屬性為只讀。
```
// 當前網頁的網址為
// http://www.example.com/index.html
document.baseURI
// "http://www.example.com/index.html"
```
如果無法讀到網頁的 URL，baseURI 屬性返回 null。
該屬性的值一般由當前網址的 URL（即 window.location 屬性）決定
但是可以使用 HTML 的<base>標簽，改變該屬性的值。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<base href="http://www.xujunhao.com" />
<base target="_blank" />
<title>Document</title>
</head>
<body></body>
<script>
window.onload = function() {
console.log(document.baseURI);
};
</script>
</html>
```
設置了以后，baseURI 屬性就返回<base>標簽設置的值。
### Node.prototype.ownerDocument
`Node.ownerDocument`屬性返回當前節點所在的頂層文檔對象，即 document 對象。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.ownerDocument ↓↓↓↓↓↓");
console.log(oDiv.ownerDocument);
};
</script>
</html>
```
document 對象本身的 `ownerDocument` 屬性，返回 null。
### Node.prototype.nextSibling
`Node.nextSibling` 屬性返回緊跟在當前節點后面的第一個同級節點。
如果當前節點后面沒有同級節點，則返回 null。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="d1">hello</div>
<div id="d2">world</div>
<script>
window.onload = function() {
var div1 = document.getElementById("d1");
var div2 = document.getElementById("d2");
console.log(div1.nextSibling === div2);
};
</script>
</body>
</html>
```
注意，該屬性還包括文本節點和注釋節點（<!-- comment -->）。
因此如果當前節點后面有空格，該屬性會返回一個文本節點，內容為空格。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="d1">hello</div>
<!-- hello world -->
<div id="d2">world</div>
<script>
window.onload = function() {
console.log(
'↓↓↓↓↓↓ document.getElementById("d1").nextSibling.nextSibling ↓↓↓↓↓↓'
);
console.log(
document.getElementById("d1").nextSibling.nextSibling
);
};
</script>
</body>
</html>
```
nextSibling 屬性可以用來遍歷所有子節點。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1">
hello
<!-- hello world -->
<div id="div2">world</div>
</div>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1").firstChild;
while (oDiv !== null) {
console.log(oDiv.nodeName);
oDiv = oDiv.nextSibling;
}
};
</script>
</body>
</html>
```
上面代碼遍歷 div1 節點的所有子節點
### Node.prototype.previousSibling
`previousSibling` 屬性返回當前節點前面的、距離最近的一個同級節點。
如果當前節點前面沒有同級節點，則返回 null。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="d1">hello</div>
<div id="d2">world</div>
<script>
window.onload = function() {
var div1 = document.getElementById("d1");
var div2 = document.getElementById("d2");
console.log(div2.previousSibling === div1);
};
</script>
</body>
</html>
```
上面代碼中，d2.previousSibling 就是 d2 前面的同級節點 d1。
注意，該屬性還包括文本節點和注釋節點。
因此如果當前節點前面有空格，該屬性會返回一個文本節點，內容為空格。
### Node.prototype.parentNode
`parentNode` 屬性返回當前節點的父節點。
對于一個節點來說，它的父節點只可能是三種類型：
1. 元素節點（element）
2. 文檔節點（document）
3. 文檔片段節點（documentfragment）。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="d1">hello</div>
<div id="d2">world</div>
<script>
window.onload = function() {
var div1 = document.getElementById("d1");
var div2 = document.getElementById("d2");
console.log(div1.parentNode.nodeType);
};
</script>
</body>
</html>
```
關于 documentfragment
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">
單擊按鈕更改列表項,使用createDocumentFragment方法,然后在列表的最后一個孩子添加列表項。
</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
var d = document.createDocumentFragment();
d.appendChild(document.getElementsByTagName("LI")[0]);
d.childNodes[0].childNodes[0].nodeValue = "Milk";
document.getElementsByTagName("UL")[0].appendChild(d);
}
</script>
</body>
</html>
```
文檔節點（document）和文檔片段節點（documentfragment）的父節點都是 null。
### Node.prototype.parentElement
`parentElement` 屬性返回當前節點的父元素節點。
如果當前節點沒有父節點，或者父節點類型不是元素節點，則返回 null。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1"><span id="span1"></span></div>
</body>
<script>
window.onload = function() {
oSpan = document.getElementById("span1");
console.log("↓↓↓↓↓↓ oSpan.parentNode ↓↓↓↓↓↓");
console.log(oSpan.parentNode);
console.log("↓↓↓↓↓↓ oSpan.parentNode.parentNode ↓↓↓↓↓↓");
console.log(oSpan.parentNode.parentNode);
console.log("↓↓↓↓↓↓ oSpan.parentNode.parentNode.parentNode ↓↓↓↓↓↓");
console.log(oSpan.parentNode.parentNode.parentNode);
console.log(
"↓↓↓↓↓↓ oSpan.parentNode.parentNode.parentNode.parentNode ↓↓↓↓↓↓"
);
console.log(oSpan.parentNode.parentNode.parentNode.parentNode);
console.log(
"↓↓↓↓↓↓ oSpan.parentNode.parentNode.parentNode.parentNode.parentNode ↓↓↓↓↓↓"
);
console.log(
oSpan.parentNode.parentNode.parentNode.parentNode.parentNode
);
/***********************************************************************************/
console.log("↓↓↓↓↓↓ oSpan.parentElement ↓↓↓↓↓↓");
console.log(oSpan.parentElement);
console.log("↓↓↓↓↓↓ oSpan.parentElement.parentElement ↓↓↓↓↓↓");
console.log(oSpan.parentElement.parentElement);
console.log(
"↓↓↓↓↓↓ oSpan.parentElement.parentElement.parentElement ↓↓↓↓↓↓"
);
console.log(oSpan.parentElement.parentElement.parentElement);
console.log(
"↓↓↓↓↓↓ oSpan.parentElement.parentElement.parentElement.parentElement ↓↓↓↓↓↓"
);
console.log(
oSpan.parentElement.parentElement.parentElement.parentElement
);
console.log(
"↓↓↓↓↓↓ oSpan.parentElement.parentElement.parentElement.parentElement.parentElement ↓↓↓↓↓↓"
);
console.log(
oSpan.parentElement.parentElement.parentElement.parentElement
.parentElement
);
};
</script>
</html>
```
由于父節點只可能是三種類型：
1. 元素節點
2. 文檔節點（document）
3. 文檔片段節點（documentfragment）。
_`parentElement` 屬性相當于把后兩種父節點都排除了。_
### Node.prototype.firstChild，Node.prototype.lastChild
`firstChild` 屬性返回當前節點的第一個子節點，如果當前節點沒有子節點，則返回 null。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.firstChild ↓↓↓↓↓↓");
console.log(oDiv.firstChild);
};
</script>
</html>
```
注意，firstChild 返回的除了元素節點，還可能是文本節點或注釋節點。
lastChild 屬性返回當前節點的最后一個子節點，如果當前節點沒有子節點，則返回 null。用法與 firstChild 屬性相同。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1"><span>span1</span></div>
</body>
<script>
window.onload = function() {
oDiv = document.getElementById("div1");
console.log("↓↓↓↓↓↓ oDiv.firstChild ↓↓↓↓↓↓");
console.log(oDiv.firstChild);
console.log("↓↓↓↓↓↓ oDiv.lastChild ↓↓↓↓↓↓");
console.log(oDiv.lastChild);
};
</script>
</html>
```
### Node.prototype.childNodes
`childNodes` 屬性返回一個類似數組的對象（NodeList 集合），成員包括當前節點的所有子節點。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
window.onload = function() {
var children = document.querySelector("ul").childNodes;
console.log("↓↓↓↓↓↓ children.length ↓↓↓↓↓↓");
console.log(children.length);
console.log("↓↓↓↓↓↓ children ↓↓↓↓↓↓");
console.log(children);
};
</script>
</html>
```
上面代碼中，children 就是 ul 元素的所有子節點。
使用該屬性，可以遍歷某個節點的所有子節點。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
window.onload = function() {
var children = document.querySelector("ul").childNodes;
console.log("↓↓↓↓↓↓ children.length ↓↓↓↓↓↓");
console.log(children.length);
console.log("↓↓↓↓↓↓ children ↓↓↓↓↓↓");
console.log(children);
for (var i = 0; i < children.length; i++) {
console.log("↓↓↓↓↓↓ children[i] ↓↓↓↓↓↓");
console.log(children[i]);
}
};
</script>
</html>
```
文檔節點（document）就有兩個子節點：文檔類型節點（docType）和 HTML 根元素節點。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
window.onload = function() {
var children = document.childNodes;
for (var i = 0; i < children.length; i++) {
console.log(children[i].nodeType);
}
};
</script>
</html>
```
上面代碼中，文檔節點的第一個子節點的類型是 10（即文檔類型節點），第二個子節點的類型是 1（即元素節點）。
注意，除了元素節點，childNodes 屬性的返回值還包括文本節點和注釋節點。
如果當前節點不包括任何子節點，則返回一個空的 NodeList 集合。
### Node.prototype.isConnected
`isConnected` 屬性返回一個布爾值，表示當前節點是否在文檔之中。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="div1"><span>span1</span></div>
</body>
<script>
window.onload = function() {
var test = document.createElement("p");
console.log("↓↓↓↓↓↓ test.isConnected ↓↓↓↓↓↓");
console.log(test.isConnected);
document.body.appendChild(test);
console.log("↓↓↓↓↓↓ test.isConnected ↓↓↓↓↓↓");
console.log(test.isConnected);
};
</script>
</html>
```
上面代碼中，test 節點是腳本生成的節點，沒有插入文檔之前，isConnected 屬性返回 false，插入之后返回 true。
- 每日單詞
- JavaScript 入門
- JavaScript 基礎
- JavaScript 基礎回顧
- JavaScript 函數
- 匿名函數,多維數組,數據類型轉換
- JavaScript 類型轉換, 變量作用域
- js 運算符(一)
- js 運算符(二)
- js 流程控制語句
- JavaScript 掃盲日
- JavaScript 牛刀小試(一)
- JavaScript 牛刀小試(二)
- JavaScript 再談函數
- JavaScript-BOM
- JavaScript-定時器(一)
- JavaScript-定時器(二)
- 番外-輪播圖源碼
- JavaScript 輪播圖和 DOM 簡介
- JavaScript-DOM 基礎-NODE 接口-屬性
- JavaScript-DOM 基礎-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 節點
- CSS 復習與擴展(一)
- CSS 復習與擴展(二)
- 走進 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高級
- jquery 備忘清單-1
- jquery 備忘清單-2
- 聊聊 json
- jquery 備忘清單-3