整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
OM 節點
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
整個文檔是一個文檔節點
每個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個 HTML 屬性是屬性節點
注釋是注釋節點
HTML DOM 節點樹
HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節點樹：
HTML DOM Tree 實例
通過 HTML DOM，樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素（節點）均可被修改，也可以創建或刪除節點。
節點父、子和同胞
節點樹中的節點彼此擁有層級關系。
父（parent）、子（child）和同胞（sibling）等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
在節點樹中，頂端節點被稱為根（root）
每個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點
下面的圖片展示了節點樹的一部分，以及節點之間的關系：
請看下面的 HTML 片段：
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一課</h1>
<p>Hello world!</p>
</body>
</html>
并且：
并且：
警告！
DOM 處理中的常見錯誤是希望元素節點包含文本。
在本例中：<title>DOM 教程</title>，元素節點 <title>，包含值為 "DOM 教程" 的文本節點。
可通過節點的 innerHTML 屬性來訪問文本節點的值。
義
樹是一種數據結構，由一組表示分層樹結構的鏈接節點組成。每個節點都通過父子關系鏈接到其他節點。樹中的第一個節點是根，而沒有任何子節點的節點是葉子。
JavaScript 樹可視化
樹數據結構中的每個節點都必須具有以下屬性：
key: 節點的鍵
value: 節點的值
parent: 節點的父節點（null如果沒有）
children: 指向節點子節點的指針數組
樹形數據結構的主要操作有：
insert: 插入一個節點作為給定父節點的子節點
remove: 從樹中刪除一個節點及其子節點
find: 檢索給定節點
preOrderTraversal: 通過遞歸遍歷每個節點及其子節點來遍歷樹
postOrderTraversal: 通過遞歸遍歷每個節點的子節點來遍歷樹
class TreeNode {
constructor(key, value = key, parent = null) {
this.key = key;
this.value = value;
this.parent = parent;
this.children = [];
}
get isLeaf() {
return this.children.length === 0;
}
get hasChildren() {
return !this.isLeaf;
}
}
class Tree {
constructor(key, value = key) {
this.root = new TreeNode(key, value);
}
*preOrderTraversal(node = this.root) {
yield node;
if (node.children.length) {
for (let child of node.children) {
yield* this.preOrderTraversal(child);
}
}
}
*postOrderTraversal(node = this.root) {
if (node.children.length) {
for (let child of node.children) {
yield* this.postOrderTraversal(child);
}
}
yield node;
}
insert(parentNodeKey, key, value = key) {
for (let node of this.preOrderTraversal()) {
if (node.key === parentNodeKey) {
node.children.push(new TreeNode(key, value, node));
return true;
}
}
return false;
}
remove(key) {
for (let node of this.preOrderTraversal()) {
const filtered = node.children.filter(c => c.key !== key);
if (filtered.length !== node.children.length) {
node.children = filtered;
return true;
}
}
return false;
}
find(key) {
for (let node of this.preOrderTraversal()) {
if (node.key === key) return node;
}
return undefined;
}
}
用class創建一個類TreeNode，使用構造函數初始化 key, value, parent 和 children。
定義一個isLeaf getter方法，用Array.prototype.length檢查children是否為空。
定義一個hasChildren getter方法，用來檢查是否有子節點。
用 class 創建一個Tree，使用構造函數初始化樹的根節點。
定義一個preOrderTraversal() 方法，按順序遍歷樹的生成器方法，使用 yield* 語法將遍歷委托給自身。
定義一個postOrderTraversal()方法，以后序遍歷樹的生成器方法，使用yield*語法將遍歷委托給自身。
定義一個insert()方法，使用preOrderTraversal()和Array.prototype.push()方法向樹中添加一個TreeNode 節點。
定義一個remove()方法，使用preOrderTraversal()和Array.prototype.filter()方法從樹刪除一個TreeNode節點。
定義一個find()方法，使用preOrderTraversal()方法檢索樹中的給定節點。
const tree = new Tree(1, 'AB');
tree.insert(1, 11, 'AC');
tree.insert(1, 12, 'BC');
tree.insert(12, 121, 'BG');
[...tree.preOrderTraversal()].map(x => x.value);
// ['AB', 'AC', 'BC', 'BCG']
tree.root.value; // 'AB'
tree.root.hasChildren; // true
tree.find(12).isLeaf; // false
tree.find(121).isLeaf; // true
tree.find(121).parent.value; // 'BC'
tree.remove(12);
[...tree.postOrderTraversal()].map(x => x.value);
// ['AC', 'AB']
過 HTML DOM，您能夠使用節點關系在節點樹中導航。
HTML DOM 節點列表
getElementsByTagName() 方法返回節點列表。節點列表是一個節點數組。
下面的代碼選取文檔中的所有 <p> 節點：
實例
varx=document.getElementsByTagName("p");
可以通過下標號訪問這些節點。如需訪問第二個 <p>，您可以這么寫：
y=x[1];
嘗試一下 ?
注意：
下標號從 0 開始。
HTML DOM 節點列表長度
length 屬性定義節點列表中節點的數量。
您可以使用 length 屬性來循環節點列表：
實例
x=document.getElementsByTagName("p");for(i=0;i<x.length;i++){document.write(x[i].innerHTML); document.write("<br>");}
實例解析：
獲取所有 <p> 元素節點
輸出每個 <p> 元素的文本節點的值
導航節點關系
您能夠使用三個節點屬性：parentNode、firstChild 以及 lastChild ，在文檔結構中進行導航。
請看下面的 HTML 片段：
<html><head><metacharset="utf-8"></head><body><p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實例演示了節點的關系。</p></div></body></html>
首個 <p> 元素是 <body> 元素的首個子元素（firstChild）
<div> 元素是 <body> 元素的最后一個子元素（lastChild）
<body> 元素是首個 <p> 元素和 <div> 元素的父節點（parentNode）
firstChild 屬性可用于訪問元素的文本：
實例
<pid="intro">Hello World!</p><script>x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script>
嘗試一下 ?
DOM 根節點
這里有兩個特殊的屬性，可以訪問全部文檔：
document.documentElement - 全部文檔
document.body - 文檔的主體
實例
<p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實例演示了 <b>document.body</b> 屬性。</p></div><script>alert(document.body.innerHTML);</script>
嘗試一下 ?
childNodes 和 nodeValue
除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內容。
下面的代碼獲取 id="intro" 的 <p> 元素的值：
實例
<pid="intro">Hello World!</p><script>txt=document.getElementById("intro").childNodes[0].nodeValue;document.write(txt);</script>
嘗試一下 ?
在上面的例子中，getElementById 是一個方法，而 childNodes 和 nodeValue 是屬性。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
