DOM文檔對象模型
DOM文檔對象模型
一、DOM對象分爲：
a、Document對象；
b、Element對象；
c、Node對象；
二、DOM發展級別：
DOM有4個級別，分別爲：
a、DOM 0 級：定義Document對象的一些屬性和方法；
b、DOM 1 級；
c、DOM 2 級；
d、DOM 3 級；
注：第 0 級和第 3 級不是W3C的官方標準；
三、DOM組成：
a、Core DOM:也稱核心DOM編程，定義標準針對任何結構文檔的對象；
b、XML DOM:定義一套標準的針對 XML 文檔的對象；
c、HTML DOM:定義一套標準的針對 XML 文檔的對象；
四、DOM節點：
a、文檔節點：至關於document對象；
b、元素節點：HTML標籤；
c、文本節點：文本內容；
d、屬性節點：標籤屬性；
注意：代碼註釋也是一種註釋節點，但通常狀況不作考慮。
五、判斷節點類型：
a、文檔節點-----nodeType值爲「9」；
b、元素節點-----nodeType值爲「1」；
c、屬性節點-----nodeType值爲「2」；
d、文本節點-----nodeType值爲「3」；
1、Document對象：
一、DOM 查詢 （獲取元素節點）
A、經過標籤的 id 屬性值獲取：
語法：let num = document.getElementById(id屬性)；
輸出：console.log(num);
B、經過標籤的 class 屬性值獲取：
語法：let num = document.getElementsByClassName(class屬性)；
輸出：console.log(num[xx]);
class獲取的元素結果是一個數組形式，因此具體到某一位須要經過數組的下標[xx]去獲取。
C、經過標籤名獲取：
語法：let num = document.getElementByTagName(標籤名)；
輸出：console.log(num[xx]);
標籤名獲取的元素結果是一個數組形式，因此具體到某一位須要經過數組的下標[xx]去獲取。
D、經過標籤的 name 屬性值獲取：
語法：let num = document.getElementsByName(name屬性值);
輸出：console.log(num[0]);
name屬性值獲取的元素結果是一個數組形式，因此具體到某一位須要經過數組的下標[xx]去獲取。
E、經過 CSS 選擇器方式獲取：
返回第一個選擇器匹配的 HTML 頁面元素；
語法：let num = document.querySelector(選擇屬性)；
輸出：console.log(num);
F、經過 CSS 選擇器方式獲取：
返回所有選擇器匹配的 HTML 頁面元素；
語法：let num = document.querSelectorAll(選擇屬性)；
輸出：console.log(num);
二、DOM查詢方法大體可分爲如下兩類：
a、傳統型：
getElementById-------------ID屬性；
getElementsByClassName-----class屬性；
getElementByTagName--------標籤名；
getElementsByName----------name屬性；
b、HTML5新增：
querySelector------------- CSS 選擇器；
querSelectorAll----------- CSS 選擇器；
三、建立節點：
a、建立元素節點：
I、經過 document 對象建立一個新的元素節點 （標籤）；
語法：document.createElement(標籤名)；
b、建立文本節點：
II、經過 document 對象建立一個新的文本節點（文本內容）；
語法：document.createTextNode(文本內容)；
c、建立屬性節點：
III、經過 document 對象建立一個新的屬性節點；
語法：document.createAttribute(屬性名);
2、Node對象
一、遍歷節點：
a、獲取父節點：(parentNode)
經過 HTML 頁面的指定標籤查找其父節點。
語法：子節點.parentNode
例：
<div id="father">
<div id="son"></div>
</div>
let num = document.getElementById("son");
let sum = num.parentNode;
console.log(sum);
b、獲取子節點：(firstChild)
經過 HTML 頁面的指定標籤查找其子節點。
語法：父節點.firstChild
注意：獲取指定標籤的第一子節點；
例：
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
<div id="son3"></div>
</div>
var num = document.getElementById("father");
var sum = num.firstChild;
console.log( sum );
語法：父節點.lastChild;
注意：獲取指定標籤的最後一個子節點；
例：
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
<div id="son3"></div>
</div>
var num = document.getElementById("father");
var sum = num.lastChild;
console.log( sum );
語法：父節點.childNodes;
注意：獲取指定標籤的全部子節點；
例：
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
<div id="son3"></div>
</div>
var num = document.getElementById("father");
var sum = num.childNodes;
console.log( sum );
c、獲取兄弟節點：
經過 HTML 頁面的指定標籤查找兄弟節點：
語法：兄弟節點.previousSibling;
注意：previousSibling----獲取指定節點的前一個兄弟節點。
例：
<div id="brother1"></div>
<div id="brother2"></div>
<div id="brother3"></div>
var num = document.getElementById("brother2");
var sum = num.previousSibling;
console.log( sum );
console.log( sum.previousSibling );
注意：nextSibling----獲取指定節點的最後一個兄弟節點。
例：
<div id="brother1"></div>
<div id="brother2"></div>
<div id="brother3"></div>
var num = document.getElementById("brother2");
var sum = num.nextSibling;
console.log( sum );
console.log( sum.nextSibling );
d、插入節點：
I、appendChild():將一個節點做爲最後一個子元素添加到指定父節點。
語法：父節點.appendChild(子節點)；
例：
let num = document.createElement("div");
document.body.appendChild( num );
II、insertBefore() ：在父節點的某個已有的子節點以前再插⼊入一個子節點。
語法：父節點.insertBefore(新子節點，舊子節點)；
例：
let num = document.createElement("div"); // 建立 div
document.body.appendChild( num ); // 將其插⼊入到 body 的末尾
let sum = document.createElement("a"); // 建立 a
document.body.insertBefore( sum, num ); // 將其插⼊入到 div 以前
e、刪除節點：
removeChild()
語法：父節點.removeChild（子節點）；
例：
<div id="father">
<div id="son"></div>
</div>
var father = document.getElementById("father"); // 獲取⽗父節點
var son = document.getElementById("son"); // 獲取⼦子節點
father.removeChild( son ); // 刪除子節點
f、替換節點：
replaceChild()；
語法：父節點.replaceChild(新子節點，舊子節點)；
例：
<div id="father">
<div id="son"></div>
</div>
var father = document.getElementById("father"); // 獲取⽗父節點
var son = document.getElementById("son"); // 獲取已有⼦子節點
var newChild = document.createElement("p"); // 建立新節點
father.replaceChild( newChild, son ); // 新節點替換已有舊⼦子節點
g、複製節點：
cloneNode();
語法：選中節點.cloneNode(布爾值true/false)；
注意：若是爲true則該節點後面全部子節點也會被複制；若是爲false則只複製該節點自己。
例：
<div id="father">
<div id="son"></div>
</div>
var father = document.getElementById("father"); // 獲取節點
var newFather = father.cloneNode( true ); // 複製已獲取節點
document.body.appendChild( newFather ); // 將複製好的新節點添加到 body
3、Element對象
一、Element與Node
A、經過節點訪問或操做HTML頁面內容：
元素節點：表示HTML頁面中的標籤。
屬性節點：表示HTML頁面中的屬性。
文本節點：表示HTML頁面中標籤的文本內容。
B、經過元素訪問或操做HTML頁面內容：
元素：表示HTML頁面中的標籤。
I、遍歷元素
一、獲取父元素：
parentElement;
語法：子元素.parentElement
例、
<div id="father">
<div id="son"></div>
</div>
let sonEle = document.getElementById("son");
let fatherEle = son.parentElement;
console.log( fatherEle );
注意：
「Node 對象」的 parentNode 和「Element 對象」的 parentElement 兩個⽅方法均可以⽤用來獲取⽗級，可是有區別：
parentNode 表示獲取指定元素的⽗節點。這個⽗節點多是元素節點，也多是⽂文檔節點。
parentElement 表示獲取指定元素的⽗元素節點。該元素沒有⽗節點，或者它的⽗父節點不是⼀個元素節點，則返回 null 。
二、獲取子元素：
// 獲取子元素的第一個元素
let fatherEle = document.getElementById("father");
let aa = fatherEle.firstElementChild; /*獲取子元素的第一個元素*/
let ab = fatherEle.lastElementChild; /*獲取子元素的最後一個元素*/
let ac = fatherEle.children; /*獲取子元素中的全部元素*/
console.log(aa);
console.log(ab);
console.log(ac);
三、獲取兄弟元素：
// 獲取兄弟元素
let ad = document.getElementById("son2");
let ae = ad.previousElementSibling; /*獲取兄弟元素的前一個元素*/
let af = ad.nextElementSibling; /*獲取兄弟元素的後一個元素*/
console.log(ae);
console.log(af);node
- 1. 文檔對象模型DOM
- 2. DOM文檔對象模型
- 3. 文檔對象模型（dom）
- 4. 文檔對象模型 (DOM)
- 5. DOM（文檔對象模型）
- 6. DOM(文檔對象模型)
- 7. Dom 文檔對象模型
- 8. DOM-文檔對象模型
- 9. 文檔對象模型（DOM）
- 10. DOM 文檔對象模型
- 更多相關文章...
- • WSDL 文檔 - WSDL 教程
- • XSL-FO 文檔 - XSL-FO 教程
- • 委託模式
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 文檔對象模型DOM
- 2. DOM文檔對象模型
- 3. 文檔對象模型（dom）
- 4. 文檔對象模型 (DOM)
- 5. DOM（文檔對象模型）
- 6. DOM(文檔對象模型)
- 7. Dom 文檔對象模型
- 8. DOM-文檔對象模型
- 9. 文檔對象模型（DOM）
- 10. DOM 文檔對象模型