《Javascript 高階程式設計(第三版)》筆記0xF 節點：Node、Document
目錄
DOM（文件物件模型）是針對 HTML 和 XML 文件的一個 API（應用程式程式設計介面）。DOM 描繪了一個層次化的節點樹，允許開發人員新增、移除和修改頁面的某一部分。 DOM 脫胎於Netscape 及微軟公司創始的 DHTML（動態 HTML）、但現在它已經成為表現和操作頁面標記的真正的跨平臺、語言中立的方式。
節點層次
Node型別
DOM1 級定義了一個 Node 介面，該介面將由 DOM 中的所有節點型別實現。這個 Node 介面在JavaScript 中是作為 Node 型別實現的；除了 IE 之外，在其他所有瀏覽器中都可以訪問到這個型別。JavaScript 中的所有節點型別都繼承自 Node 型別，因此所有節點型別都共享著相同的基本屬性和方法。
Node型別：
Node.ELEMENT_NODE(1)；
Node.ATTRIBUTE_NODE(2)；
Node.TEXT_NODE(3)；
Node.CDATA_SECTION_NODE(4)；
Node.ENTITY_REFERENCE_NODE(5)；
Node.ENTITY_NODE(6)；
Node.PROCESSING_INSTRUCTION_NODE(7)；
Node.COMMENT_NODE(8)；
Node.DOCUMENT_NODE(9)；
Node.DOCUMENT_TYPE_NODE(10)；
Node.DOCUMENT_FRAGMENT_NODE(11)；
Node.NOTATION_NODE(12)。
if (someNode.nodeType == Node.ELEMENT_NODE){ //在 IE 中無效
alert("Node is an element.");
}
if (someNode.nodeType == 1){ //適用於所有瀏覽器
alert("Node is an element.");
}nodeName 和 nodeValue 屬性
if (someNode.nodeType == 1){
value = someNode.nodeName; //nodeName 的值是元素的標籤名
}節點關係
//childNodes 屬性，
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;
//parentNode 屬性
if (someNode.nextSibling === null){
alert("Last node in the parent’s childNodes list.");
} else if (someNode.previousSibling === null){
alert("First node in the parent’s childNodes list.");
}
操作節點
var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastChild == newNode); //true
//someNode 有多個子節點
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true
//插入後成為最後一個子節點
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); //true
//插入到最後一個子節點前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true
//替換第一個子節點
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
//替換最後一個子節點
returnedNode = someNode.replaceChild(newNode, someNode.lastChild);
//移除第一個子節點
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除最後一個子節點
var formerLastChild = someNode.removeChild(someNode.lastChild);Document型別
JavaScript 通過 Document 型別表示文件。在瀏覽器中，document 物件是 HTMLDocument（繼承自 Document 型別）的一個例項，表示整個 HTML 頁面。而且， document 物件是 window 物件的一個屬性，因此可以將其作為全域性物件來訪問。
Document 節點具有下列特徵：
nodeType 的值為 9；
nodeName 的值為"#document"；
nodeValue 的值為 null；
parentNode 的值為 null；
ownerDocument 的值為 null；
其子節點可能是一個 DocumentType（最多一個）、 Element（最多一個）、 ProcessingInstruction或 Comment。
文件的子節點
/*
* <html>
* <body>
* </body>
* </html>
*/
var html = document.documentElement; //取得對<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
var body = document.body; //取得對<body>的引用
var doctype = document.doctype; //取得對<!DOCTYPE>的引用文件資訊
//取得文件標題
var originalTitle = document.title;
//設定文件標題
document.title = "New page title";
//取得完整的 URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得來源頁面的 URL
var referrer = document.referrer;查詢元素
getElementById()
//<div id="myDiv">Some text</div>
var div = document.getElementById("myDiv"); //取得<div>元素的引用getElementsByTagName()
//取得頁面中所有的<img>元素，並返回一個 HTMLCollection
var images = document.getElementsByTagName("img");
alert(images.length); //輸出影象的數量
alert(images[0].src); //輸出第一個影象元素的 src 特性
alert(images.item(0).src); //輸出第一個影象元素的 src 特性
var myImage = images.namedItem("myImage");//通過元素的 name特性取得集合中的項
var myImage = images["myImage"];getElementsByName()
var radios = document.getElementsByName("color");特殊集合
document.anchors，包含文件中所有帶 name 特性的<a>元素；
document.applets，包含文件中所有的<applet>元素，因為不再推薦使用<applet>元素，所以這個集合已經不建議使用了；
document.forms，包含文件中所有的<form>元素，與 document.getElementsByTagName("form")得到的結果相同；
document.images，包含文件中所有的<img>元素，與 document.getElementsByTagName("img")得到的結果相同； document.links，包含文件中所有帶 href 特性的<a>元素。
DOM 一致性檢測
var hasXmlDom = document.implementation.hasFeature("XML", "1.0");
文件寫入
<!--向頁面中動態地加入內容-->
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<p>The current date and time is:
<script type="text/javascript">
document.write("<strong>" + (new Date()).toString() + "</strong>");
</script>
</p>
</body>
</html>
<!--外部資源，注意轉義字元-->
<html>
<head>
<title>document.write() Example 3</title>
</head>
<body>
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\"file.js\">" +
"<\/script>");
</script>
</body>
</html>