首頁 > 開發者 > JavaScript
基礎知識回顧：
DOM 即（Document Object Model），文件物件模型，DOM實際是把HTML當作XML檔案來進行處理，用對象的眼光來打量HTML，可以說DOM是繼HTML後Web的最有用的發明。
Some review of XML 網頁教學網
SGML（基於標籤的語言的普遍規範），在SGML被用於定義HTML的DTD時，發現HTML本身是很不規範的。主要表現在某些標籤可以省略/沒 有/不允許結束標籤（</xxx>）,標籤互相嵌入而很不不規範，屬性值的定義方法也不統一等等。所以XML出現了，HTML中不規範的地方 都被明確定義，注意的是XML定義的是一種語言的文法和規範，是一系列滿足這種規範的語言的統稱，具體不同的場合會有不同的具體實現定義不同的標籤及屬性 來來解決不同的問題，如RDF，RSS，SOAP，XSLT，XSL等等，當然HTML的XML實現為XHTML。XML的實質含義是使用結構化的純文字 來表達資料。
XML幾個文法要點：
首行為XML prolog，一般為<?xml version=”1.0”?>，該行告訴xml praser/瀏覽器，該XML如何被prase。 網頁教學網
然後是文件類型聲明（DTD），例如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
網頁教學網
然後是document element，它必須把所有其他標籤都括入其中。就是該XML的最外層標籤。也就是Root Element，注意這個要與DTD中聲明的root element type相一致，如上面的html。
不想被Praser解析的東西用<![CDATA[ ]]>括起來。
在document element中間的用<? … ?>括起來的語句被稱為PI（processing instruction），作用是給praser一些更特定的資訊。
XML的API：
Webjx.Com
SAX（Sample API for XML）：第一個，Java語言實現，event-based，praser從上到下的解析XML文檔，當遇到每個標籤/屬性/值…時就會激發事件，而具體在該事件做什麼由程式員定義。
優點，lightweight，fast，缺點，任何時候，你想停下，回退，或專門指定解析該文檔的某特定部分時，都得從頭從文檔的第一行開始解析。
Webjx.Com
DOM：基於樹結構，並且當解析完後，你想訪問或修改添加文檔對象都不需要重新解析。DOM是不針對於語言的，瀏覽器負責對DOM實現進行Javascript的支援。 Webjx.Com
————————————————————————————————————————— Webjx.Com
DOM的核心： Node
由於DOM是樹形結構，所以一個節點被抽象為對象Node，這是DOM的核心對象： 網頁教學網
Node的種類一共有12種，通過Node.nodeType的取值來確定（為1-12），分為：
❑ Node.ELEMENT_NODE (1)
❑ Node.ATTRIBUTE_NODE (2)
❑ Node.TEXT_NODE (3) ：<![CDATA[ ]]>中括著的純文字，他沒有子節點
❑ Node.CDATA_SECTION_NODE (4) ：子節點一定為TextNode
網頁教學網
❑ Node.ENTITY_REFERENCE_NODE (5) ：
❑ Node.ENTITY_NODE (6) ：DTD中的實體定義<!ENTITY foo “foo”>，無子節點
❑ Node.PROCESSING_INSTRUCTION_NODE (7) ：PI，無子節點
Webjx.Com
❑ Node.COMMENT_NODE (8)
❑ Node.DOCUMENT_NODE (9) ：最外層的Root element,包括所有其它節點
Webjx.Com
❑ Node.DOCUMENT_TYPE_NODE (10) :DTD，<!DOCTYPE………..>
❑ Node.DOCUMENT_FRAGMENT_NODE (11)
網頁教學網
❑ Node.NOTATION_NODE (12) ：DTD中的Nation定義
網頁教學網
Node的屬性和方法 網頁教學網
nodeName 返回String. The name of ths node;this is defined depending on theype of node.
nodeValue 返回String. The value of the node'this is defined depending on the type of node.
nodeType 返回Number. One of the node type constant values.
ownerDocument 返回Document. Pointer to the document that this node belongs to.
firstChild 返回Node. Pointer to the first node in the childNodes list.
lastChild 返回Node. Pointer to the last node in the childNodes list.
childNodes 返回NodeList. A list of all child nodes.
previousSibling 返回Node. Pointer to the previous sibling;null if this is the first sibling.
nextSibling 返回Node. Pointer to the next sibling;null if this is the last sibling.
attributes 返回NamedNodeMap. Contains Attr objects respresenting an element's attributes;only used for Element nodes.
appendChild(node) 返回Node. Adds node to the end of childNodes.
hasChildNodes() 返回Boolean. Returns true when childNodes contains one or more nodes.
removeChild(node) 返回Node. Removes node from childNodes.
Webjx.Com
replaceChild(newnode, oldnode) 返回Node. Replace oldnode in childNodes with newnode.
insertBefore(newnode, refnode) 返回Node. Inserts newnode before refnode in childNodes.
—————————————————————————————————————————
DOM的使用
DOM是分層級的，不同瀏覽器對DOM支援的層級不同。DOM level1 （core，用來解析XML-base的文檔，和DOM HTML，用來針對HTML，因為DOM並非只針對HTML的），DOM Level2（event，以前都是通過DHTML支援，style，與CSS溝通，等等。。）DOM level3（DOM Load and Save；DOM Validation；對XML1.0的支援，包括：XML Infoset, XPath,XML Base）
Netscape Navigator 1.0-4.x DOM相容性（-）
Netscape 6.0+(Mozilla 0.6.0+) DOM相容性（Level 1, Level 2, Level 3 (partial)）
Internet Explorer 2.0-4.x DOM相容性（-）
Internet Explorer 5.0 DOM相容性（Level 1 (minimal)）
Internet Explorer 5.5+ DOM相容性（Level 1 (almost all)）
Opera 1.0-6.0 DOM相容性（-）
Opera 7.0+ DOM相容性（Level 1 (almost all), Level 2 (partial)）
Safari 1.0+ / Konqueror~2.0+ DOM相容性（Level 1） Webjx.Com
獲得Node：
/* 通過document對象 */
var oHtml = document.documentElement; 網頁教學網
/* 得到<head />和<body /> */
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
網頁教學網
/* 可以用這種方式 */
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
/* 也可以使用方法擷取數組的索引值 */
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
/* 使用document.body來得到<body /> */
var oBody = document.body;
使用Attributes值：Node介面的attributes()方法返回一個NamedNodeMap，從它可以得到具體的Attribute並加以操作。或者是有Node介面本身的getAttribute()方法來直接得到Attribute。
Webjx.Com
/* 使用Node的attribute的getNamedItem()方法 */
var sId = oP.attributes.getNamedItem("id").nodeValue;
/* 或者使用item()方法 */
var sId = oP.attributes.item(1).nodeValue;
/* 或者直接使用Node的getAttribute()擷取Id */
var sId = oP.getAttribute("id");
得到指定的Node：使用getElementsByTagName()
Webjx.Com
/* 得到<img />Elements */
var oImgs = document.getElementsByTagName("img");
/* 得到第一段裡所有的<img /> */
var oPs = document.getElementsByTagName("p");
var oImgsInP = oPs[0].getElementsByTagName("img");
還有getElementsByName()，getElementsById();
/* 得到id為"div1"的<div> */
var oDivs = document.getElementsByTagName("div");
var oDiv1 = null;
for(var i=0; i<oDivs.length; i++){
if(oDivs[i].getAttribute("id") == "div1"){
oDiv1 = oDivs[i];break;
}
}
網頁教學網
/* 使用document.getElementById() */
var oDiv1 = document.getElementById("div1");
產生與操作Node
createAttribute(name) ：建立一個名為name的屬性節點。IE,Mozilla,opera支援，Safari不支援。
createCDATASection(text) ：建立一個子節點為text的CDATA區。Mozilla支援，IE,Opera,Safari不支援。
createComment(text) ：建立一個注釋內容為text的注釋節點。各瀏覽器均支援。
createDocumentFragment() ：建立一個文檔片斷（fragment）節點。各瀏覽器均支援。
createElement(tagName) ：建立一個名為tagName的元素節點。各瀏覽器均支援。
createEntityReference(name) ：Creates an entity reference node with the given name。Mozilla 支援。IE,Opera,Safari不支援。
createProcessingInstruction(target, data) ：Creates a PI node with the given target and data。 Mozilla 支援。IE,Opera,Safari不支援。
createTextNode(text) ：建立一個包含text的文本節點。各瀏覽器均支援。 Webjx.Com
觀察可知最普遍的，最重要的方法是createElement(),createDocumentFragment(), create TextNode()。
/*使用createElement(),createTextNode(),appendChild()動態添加節點*/
function createMessage(){
var op = document.createElement("p");
var oText = document.createTextNode("hello world!");
op.appendChild(oText);
document.body.appendChild(op);
}
使用removeChild(), replaceChild(), and insertBefore() 網頁教學網
/* remove 節點 */
function removeMessage(){
var op = document.body.getElementsByTagName('p')[0];
op.parentNode.removeChild(op);
} 網頁教學網
/* replace 節點 */
function insertMessage(){
var oNewP = document.createElement('p');
var oText = document.createTextNode('hello csser!');
oNewP.appendChild(oText);
var oOldP = document.getElementsByTagName('p')[0];
document.body.insertBefore(oNewP, oOldP);
}
網頁教學網
使用createDocumentFragment()
Webjx.Com
/* 通常做法 */
var arrText = ['first', 'second', 'third'];
for(var i=0; i<arrText.length; i++){
var op = document.createElement('p');
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
document.body.appendChild(op);
}
網頁教學網
/* 使用documentFragment */
var arrText = ['first', 'second', 'third'];
var oFragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++){
var op = document.createElement('p');
var oText = document.createTextNode(arrText[i]);
op.appendChild(oText);
oFragment.appendChild(op);
}
document.body.appendChild(oFragment);
Webjx.Com
CSSER註：上面的比較能看出，通過DocumentFragment的方式能提高效率。 網頁教學網
—————————————————————————————————————————
HTML DOM：
網頁教學網
使用DOM的核心方法是針對所有XML的，針對HTML DOM有特殊的方法，如
使用DOM core：oImg.setAttribute(“src”, “mypicture2.jpg”);
使用HTML DOM：oImg.src = “mypicture2.jpg”; 網頁教學網
—————————————————————————————————————————
網頁教學網
DOM 遍曆和parentNode(),firstChild(),lastChild(),nextSibling(),previousSibling()(兄弟)
http://www.csser.com/html/csser/webstandards/200703/04/1034.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
