JavaScript DOM基礎

 DOM(Document Object Model)即文檔對象模型,針對HTML和XML文檔的API(應用程序接口);

DOM描繪了一個層次化的節點樹,運行開發人員可以添加/移除和修改頁面的某一部分;

一 DOM介紹

D(文檔):可以理解為整個Web加載的網頁文檔;
O(對象):可以理解為類似window對象之類的東西,可以調用屬性和方法,這裡說的是document對象;
M(模型):可以理解為網頁文檔的樹形結構;

1.節點

加載HTML頁面時,Web浏覽器生成一個樹形結構,用來表示頁面內部結構;
DOM將這種節點結構理解為由節點組成;
html元素為根節點;head元素是html的子節點;meta元素和title元素之間是兄弟關系;

2.節點種類:元素節點/文本節點/屬性節點
<div title="元素屬性">測試Div</div>
元素節點 => div;
屬性節點 => title="元素屬性"
文本節點 => 測試Div二 查找元素
W3C提供了比較方便簡單的定位節點的方法和屬性,以便我們快速的對節點進行操作;
DOM(Document Object Model)即文檔對象模型,針對HTML和XML文檔的API(應用程序接口);

DOM描繪了一個層次化的節點樹,運行開發人員可以添加/移除和修改頁面的某一部分;

元素節點查找方法
方法 說明
getElementById() 獲取特定ID元素的節點;
getElementsByTagName() 獲取相同元素的節點列表;
getElementsByName() 獲取相同名稱的節點列表;
getAttribute() 獲取特定元素節點屬性的值;
setAttribute() 設置特定元素節點屬性的值;
removeAttribute() 移除特定元素節點屬性;

1.getElementById()

// 方法接收一個參數:獲取元素的ID;
// 如果找到相應的元素則返回該元素的HTMLDivElement對象;如果不存在,則返回null;
document.getElementById('box'); // [object HTMLDivElement];
// 當我們通過getElementById()獲取到特定元素節點時,這個節點對象就被我們獲取到了;
// 而通過這個節點對象,我們可以訪問它的一系列屬性;
(1).訪問元素節點的屬性
屬性 說明
tagName 獲取元素節點的標簽名;
innerHTML 獲取元素節點裡的內容,非W3C DOM規范;
document.getElementById('box').tagName; // =>DIV;
document.getElementById('box').innerHTML; // =>測試Div;

(2).訪問HTML通用屬性
屬性 說明
id 元素節點的id名稱;
title 元素節點的title屬性值;
style CSS內聯樣式屬性值;
className CSS元素的類;

document.getElementById('box').id; // =>id;
document.getElementById('box').title; // 獲取title;

document.getElementById('box').style; // 獲取CSSStyleDeclaration對象;
document.getElementById('box').style.color; // 獲取style對象中的color的值;也就是設置在元素行內的樣式值;
document.getElementById('box').style.color='red'; // 設置style對象中的color的值;

document.getElementById('box').className; // 獲取class;
document.getElementById('box').className='pox'; // 設置class;

document.getElementById('box').bbb; // 獲取自定義屬性的值,非IE不支持;

2.getElementsByTagName()
// 方法返回一個對象數組HTMLCollection(NodeList)數組,這個數組保存著所有相同元素名的節點列表;
document.getElementsByTagName('*'); // 利用通配符獲取所有元素;
// PS:IE在使用通配符時,會把文檔最開始的html的規范聲明當作第一個元素節點;

document.getElementsByTagName('li'); // =>[object HTMLCollection];獲取所有li元素;
document.getElementsByTagName('li').[0]; // 獲取第一個li元素;

3.getElementsByName()

獲取相同名稱(name)設置的元素,返回一個對象數組HTMLCollection(NodeList);
document.getElementsByName('add'); // 獲取具有name='add'的input元素集合;
// PS:對於並不是HTML合法的屬性,那麼在JS獲取的兼容性上也會存在差異;
// IE支持合法的name屬性,但對於自定義的屬性會出現不兼容問題;

4.getAttribute()
方法將獲取元素中某個屬性值;
但它和直接使用".attr"獲取屬性值的方法有一定區別;
document.getElementById('box').getAttribute('mydiv'); // 獲取自定義屬性值;
document.getElementById('box').mydiv; // 獲取自定義屬性值,僅IE支持;

5.setAttribute()
方法將設置元素中某個屬性和值;接收兩個參數:屬性名和值;
如果屬性本身已存在,那麼就會覆蓋;
document.getElementById('box').setAttribute('align','center'); // 設置屬性和值;
// PS:在IE7及以下,使用setAttribute()方法設置class和style屬性沒有效果;

6.removeAttribute()
方法可以移除HTML屬性;
document.getElementById('box').removeAttribute('style'); // 移除style樣式屬性;

三 DOM節點

1.node節點屬性

// 節點可以分為:元素節點/屬性節點和文本節點;
// 這些節點都有三個屬性:nodeName/nodeType和nodeValue;

信息節點屬性
節點類型 nodeName nodeType nodeValue
元素 元素名稱 1 null
屬性 屬性名稱 2 屬性值
文本 #text 3 文本內容
document.getElementById('box').nodeType; // =>1; 元素節點;

2.層次節點屬性
// 層次節點可以劃分為:父節點與子節點/兄弟節點;

// 當我們獲取其中一個元素節點的時候,就可以使用層次節點屬性來獲取它相關層次的節點;

節點關系示意圖

層次節點屬性
屬性 說明
childNodes 讀取當前元素節點的所有子節點;
firstChild 讀取當前元素節點的第一個子節點;
lastChild 獲取當前元素節點的最後一個子節點;
ownerDocument 獲取該節點的文檔根節點,相當於document;
parentNode 獲取當前節點的父節點;
previousSibling 獲取當前節點的前一個同級節點;
nextSibling 獲取當前節點的後一個同級節點;
attributes 獲取當前元素節點的所有屬性節點集合;

(1).childNodes屬性

屬性獲取某一個元素節點的所有子節點,這些子節點包含元素節點和文本節點;
PS:使用childNodes[n]返回子節點對象的時候,有可能返回的是元素子節點,比如:HTMLElement;
也可能返回的是文本子節點,比如:Text;
元素子節點可以使用nodeName或者tagName獲取標簽名稱;而文本子節點可以使用nodeValue獲取;
var box = document.getElementById('box');
for(var i=0; i<box.childNodes.length; i++){
判斷是元素節點,輸出元素標簽名;
if(box.childNodes[i].nodeType === 1){
console.log('元素節點:'+box.childNodes[i].nodeName);
判斷是文本節點,輸出文本內容;
}else if(box.childNodes[i].nodeType ===3){
console.log('文本節點:'+box.childNodes[i].nodeValue);
}
}
PS1:在獲取到文本節點(重點在於已經不是元素節點)的時候,是無法使用innerHTML這個屬性輸出文本內容的;
這個非標准的屬性必須在獲取元素節點的時候,才能輸出裡面包含的文本;
alert(box.innerHTML); innerHTML和nodeValue第一個區別;

PS2:innerHTML和nodeValue在賦值的時候,nodeValue會把包含在文本裡的HTML轉義成特殊的字符,從而達到形成純文本的效果;
而innerHTML會解析文本裡的特殊字符;
box.childNodes[0].nodeValue = '<strong>abc</strong>'; =><strong>abc</strong>;
box.innerHTML = '<strong>abc</strong>'; =>abc(樣式加粗);

(2).firstChild和lastChild屬性
firstChild = childNodes[0];獲取當前元素的第一個子節點;
lastChild = childNodes[box.childNodes.length-1];獲取當前元素最後一個子節點;

(3).ownerDocument屬性
返回該節點的文檔對象根節點,返回的對象相當於document;
alert(box.ownerDocument === document); // =>true;根節點;

(4).parentNode/prev