JavaScript中關於DOM的操作詳解

一、什麼是DOM

　　JavaScript由ECMAScript、DOM和BOM三部分組成，其中DOM代表描述網頁內容的方法和接口，即文檔物件模型(Document Object Model)。在網頁上，組織頁面（或文件）的物件被組織在一個樹狀結構中，用來表示文件中物件的標準模型就稱為DOM，而樹狀結構就是我們常說的DOM樹。

　　維基百科中介紹DOM更為準確：DOM是一種跨平台和語言非依賴性的應用程式編程接口，即處理現在的HTML,XHTML或XML文檔作為樹結構，其中每個節點是一個對象，每個節點表示該文件的一部分。

二、DOM節點

#1.節點的型別

　　DOM樹是由許多不同類型的節點組成的，而這些節點類型都有一個nodeType值，我們可以透過nodeType值來判斷我們所獲得的或想要的是不是對應類型的節點。

節點類型	元素節點(標籤節點)	屬性節點	文字節點(空格、換行、文字)	註解節點	document節點
nodeType值	1	2	3	8	9

　　除了透過nodeType值判斷型別以外我們也可以透過nodeName來檢視元素節點和屬性節點的節點名稱，還有使用nadeValue來檢視屬性節點的屬性值。

 

2.取得元素節點

document.getElementById(id);
document.getElementByTagName(tagname);
document.getElementByClassName(classname);

　　通常想要在JavaScript中更改或使用HML中的元素節點時，都要先獲取才可以調用，那麼我們就是透過設定元素的Id屬性或Class屬性來獲取，或是使用標籤名獲取。但要注意的是getElementById()方法不能工作在XML中，在XML文件中，必須透過擁有id屬性來進行搜索，而此類型必須在 XML DTD 中進行聲明。

　　取得完我們想要的節點後，我們還可以透過節點的關係來操作其他節點,這裡我們以p元素為初設元素節點來舉例。

　　2.1 子節點

p.children();
p.childNodes();

 

#　　取得p下面的子節點，而p.children()只能取得到是元素節點的子節點，而p.childNodes()會取得所有類型的子節點，也就是說會解析空白文字節點。

　　2.2 父節點

p.parentNode();
p.offsetParent();

 

　　取得p的父節點，p.offsetParent()取得的是具有定位屬性的祖先節點，即從父節點開始尋找，如果父節點沒有定位屬性，那麼再找父節點的父節點，直到找到有定位屬性的節點。

　　2.3 兄弟節點

#

//下一个兄弟节点 p.nextElementSibling();
p.nextSibling();//上一个兄弟节点 p.previousElementSibling();
p.previousSibling();

 　　這裡有沒有Element很關鍵，跟取得子節點一樣，p.nextSibling()和p.previousSibling()會解析空白節點，會取得到p下面的空格或回車。

　　2.4 首尾子節點

##

//获取p的第一个子节点p.firstElementChild();
p.firstChild();//获取p的最后一个子节点p.lastElementChild();
p.lastElementChild();

 

　　區別同上。

 

3.節點運算

　　我們除了可以在HTML中新增、刪除個修改節點，也可以在JavaScript中對節點進行操作。

　　

3.1 建立節點

#

//创建节点/创建文本节点createElement();
createTextNode()；

 

　　創建文本節點一般用來在元素節點中添加內容，它創建的是靜態文本，不能像innerHTML一樣帶有HTML格式，所以creatTextNode()更安全，而innerText又有瀏覽器相容問題。

　　3.2 新增節點　　我們建立的節點不會自動加入到HTML裡，需要我們對建立的節點進行操作。

//向尾部添加子节点 appendChild(); 
//向目标节点之前添加insertBefore(newElement,targetElement);

　　insertBefore()第二個參數是可選參數，如果不寫第二個參數那麼就預設向尾部添加，即等同於appendChild();

###　　######3.3 替換##################

//将旧节点换为新节点replaceChild(newElement,oldElement);

######　　###p.replaceChild(newElement,oldElement) ，這裡無論是新節點或舊節點，都必須是p的子節點。 ######　　######3.4 刪除###################

removeChild();

###　　注意刪除的是子節點。 ######　　######3.5 複製/複製##################

//深复制或浅复制cloneNode(boolean);

###　　當參數的布林值為true時為深複製，即會複製節點本身以及它以下的所有子節點。 ######　　當參數的布林值為false時為淺複製，只會複製節點本身。 ######　　######3.6 判斷##################

hasChildNode();

###　　判斷是否有子節點,傳回布林值。 ############　　######3.7 屬性########################

//获取节点属性getAttribute();//设置节点属性setAttribute();//删除节点属性removeAttribute();

 　要注意的一点就是class属性不能通过setAttribute(); 设置。

三、DOM的优缺点

　　DOM的优点主要表现在：易用性强，并且遍历简单，支持XPath，增强了易用性。

　　DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高。

以上是JavaScript中關於DOM的操作詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！