JavaScript——DOM

JavaScript · 發表 2018-09-21 03:49:50

摘要： DOM是什麼 DOM是針對HTML和XML文件的一個API。 DOM描繪了一個層次化的節點樹。 DOM允許開發人員：新增、移除、修改頁面的某一部分。現在DOM已經成為表現和操作頁面標記的真正跨平臺、語言中立的方式了。 DOM1級 DOM...

DOM是什麼

DOM是針對HTML和XML文件的一個API。

DOM描繪了一個層次化的節點樹。

DOM允許開發人員：新增、移除、修改頁面的某一部分。

現在DOM已經成為表現和操作頁面標記的真正跨平臺、語言中立的方式了。

DOM1級

DOM1提供了基本的文件結構及查詢的介面。

節點層次

DOM可以將任何的HTML或者XML文件描繪成一個由多層節點構成的結構。

節點分為幾種不同的型別。每種型別分別表示文件中不同的資訊及標記。每個節點都擁有各自的特點、資料和方法，以及和其他節點存在的某種關係。

每一段標記都可以通過樹中的一個節點來表示：HTML元素通過元素節點表示，特性（attribute）通過特性節點表示，文件型別通過文件型別節點表示，註釋通過註釋節點表示。

總共有12中節點型別，這些型別都繼承自一個基類：Node型別

Node型別

DOM1級定義了一個Node介面，這個介面將由DOM中的所有節點型別實現。

Node介面，在JavaScript中是作為Node型別實現的。（除了IE之外，其他瀏覽器都可以訪問到這個型別。）

所有節點型別都共享相同的基本屬性和方法：

nodeType屬性用於表明節點的型別。節點型別在Node中定義類12個常量

(1)Node.ELEMENT_NODE(1)

(2)Node.ATTRIBUTE_NODE(2)

(3)Node.TEXT_NODE(3)

(4)Node.CDATA_SECTION_NODE(4)

(5)Node.ENTITY_REFERENCE_NODE(5)

(6)Node.ENTITY_NODE(6)

(7)Node.PROCESSING_INSTRUCTION_NODE(7)

(8)Node.COMMENT_NODE(8)

(9)Node.DOCUMENT_NODE(9)

(10)Node.DOCUMENT_TYPE_NODE(10)

(11)Node.DOCUMENT_FRAGMENT_NODE(11)

(12)Node.NOTATION_NODE(12)

可以通過比較上面的常量，以確定節點的型別：

if (someNode.nodeType == Node.ELEMENT_NODE) {
alert("Node is an element");
}

// 由於在IE中無法訪問Node，故上述程式碼無效。
// 可用以下程式碼代替：

if (someNode.nodeType == 1) {
alert("Node is an element");
}

nodeName和nodeValue屬性

通過nodeName和nodeValue可以瞭解節點的具體資訊。

節點關係

文件中的所有節點之間都存在關係。

以HTML中為例：<body> 元素可以看成是<html> 元素的子元素，而<html> 就是<body> 的父元素。

而<head> 元素和<body> 元素是同胞元素，因為都是<html> 的直接子元素。

每個節點都有一個childNodes屬性，其中儲存著一個NodeList物件。NodeList是一種類陣列物件，用於儲存一組有序的節點，可以通過位置訪問這些節點。

NodeList物件是基於DOM結構動態執行查詢的結果，因此DOM結構的變化能夠自動反映在NodeList物件中。

var firstChild = someNode.childNodes[0];
var secondeChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

length屬性表示的是，訪問NodeList的那一刻，其中包含的節點數。

可以使用Array.prototype.slice()方法將NodeList轉換為陣列。

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);

但是，如果想要在IE中將NodeList轉換為陣列，必須手動列舉所有成員：

function convertToArray(nodes) {
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0);
} catch(ex) {
array = new Array();
for(var i = 0, len = nodes.lengthm i < len; i++) {
array.push(nodes[i]);
}
}
}

每個節點有一個parentNode屬性，用於指向父節點。而在同一個父元素下的每個子節點中有previousSibling和nextSibling屬性，用於訪問同一列表中的其他節點。

另外，父節點有firstChild何lastChild屬性來指向第一個和最後一個子節點。

最後，所有節點都有一個屬性：ownerDocument，用於訪問整個文件的文件節點。

操作節點

由於關係指標都是隻讀的，故DOM提供了一些操作節點的方法；

appendChild():用於向childNodes列表的末尾新增一個節點。新增節點後，childNodes的新增節點、父節點以之前的最後一個子節點的關係指標都會得到更新。

更新後，appendChild()返回新增的節點：

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode);
alert(someNode.lastChild == newNode);

如果傳入到appendChild()的節點已經是文件的一部分了。那麼這個節點將會從原來的位置移到新的位置。因為任何DOM節點都不能同時出現在文件中的多個位置上。

var returnedNode = someNode.appendChild(someNode.firstNode);
alert(returnedNode == someNode.firstChild); // false
alert(returnedNode == someNode.lastChild); // true

insertBefore()方法，能夠將把節點放在childNoes列表中的某個特定的位置上。需要傳入兩個引數：要插入的節點和作為參照的節點：插入節點後，被插入的節點會變成參照節點的前一個通報節點，同事被方法返回。

returnedNode = someNode.insertBefore(newNode, null); // 插入後成為最後一個子節點
alert(newNode == someNode.lastChild); // true

var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); // 插入後城後第一個子節點
alert(returnedNode == newNode); // true
alert(newNode == someNode.firstChild); // t

returnedNode = someNode.insertBefore(newNode, someNode.lastChild); // 插入到最後一個子節點前
alert(newNode == someNode.childNodes[someNode.childNodes.lenght - 2]);// true

replaceChild()能夠移除節點，接收兩個引數：要插入的節點和要替換的節點：要替換的節點，將會由這個方法返回，並且從文件樹中被移除。同時，由要插入的節點佔據其位置。

var returnedNode = someNode.replaceChild(newNode, someNode.firstChild); // 替換第一個子節點

returnedNode = someNode.replaceChild(newNode, someNode.lastChild); // 替換最後一個子節點

removeChild()方法可以移除一個節點，接收一個引數：要移除的節點

var formerFirstChild = someNode.removeChild(someNode.firstChild); // 移除第一個子節點

var formerLastChild = someNode.removeChild(someNode.lastChild); // 移除最後一個子節點

其他方法

cloneNode()方法用於建立呼叫這個方法的節點的一個完全相同的副本；其接收一個引數: 是否執行深拷貝在引數為true的時候，會複製節點及其整個子節點樹。在引數為false的時候，只賦值節點本身。

複製後返回的節點副本屬於文件所有，但沒有為它指定父節點。如果不使用節點操作方法將其新增到文件中，他會成為一個”孤兒“

var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length);

var shallowList = myList.cloneNode(false);
alert(shallow.childnodes.length);

normalize()方法，可以處理文件樹中的文字節點。

由於文字節點可能不包含文字，或者接連出現兩個文字節點的情況。這個方法能夠在呼叫該方法的節點的後代節點中查詢這兩種情況的節點，並刪除它們。

Document型別

js通過Document型別表示文件。

在瀏覽器中，document物件是HTMLDocument的一個例項。表示了整個HTML頁面。document物件是window物件的一個屬性。

Document節點具有下列特徵：

1.nodeType: 9

2.nodeName: "#document"

3.nodeValue: null

4.parentNode: null

5.ownerDocument: null

其子節點可能是一個DocumentType、Element、ProcessingInstruction或Comment；

Document型別表示HTML頁面或者其他基於XML的文件。

通過document物件，我們可以取得與頁面有關的資訊，並且能夠操作頁面的外觀及其底層結構。

文件的子節點

訪問子節點的方式：

1.通過documentElement訪問HTML頁面中的<html> 元素。

2.通過childNodes列表訪問文件元素。

3.通過body訪問<body> 元素。

4.通過doctype可以訪問<!DOCTYPE> 的資訊

var html = document.documentElement;

var body = document.body;

文件資訊

document物件提供了一些網頁的資訊；

1.title: 包含了<title> 元素中的文字。