js學習總結：DOM節點二（dom基本操作）
一、DOM繼承樹
DOM——Document Object Model
DOM定義了表示修改文件所需要的方法。DOM物件即為宿主物件，由瀏覽器廠商定義，用來操作html和xml的一類廠商定義，也有人稱DOM是對HTML以及xml的標準程式設計介面。
繼承樹模型圖：
1.document繼承於HTMLDocument,而HTMLDocument繼承於Document;
2.文字節點物件Text與註釋節點物件Comment繼承於CharacterData
3.在Element節點下其實存在兩個子節點，除了HTMLElement節點以外還有一個XMLElement節點。
二、DOM的基本操作
1.getElementById方法定義在Document.prototype上，也就是說Element節點上不能呼叫這個方法。
2.getElementsByName方法定義在HTMLDocument.prototype上，即非HTML標籤不能使用。
3.getElementsByTagName方法定義在Document.prototype和Element.prototype上。
<div>
<span>a</span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
上面示例的程式碼中獲取元素的方法看名稱好像是同一個，其實不然，獲取div的getElementsByTagName是由document物件向父級的父級Document原型獲取的。而獲取span的getElementsByTagName是Element物件（準確說應該是HTMLElement物件）div從父級的父級Element原型上獲取的。
4.HTMLDocument.prototype上定義了一些常用的屬性，body、head分別指向html文件中的<body>、<head>標籤。也就是說在需要獲取<body>、<head>標籤時不再需要呼叫獲取元素節點的方法，而是可以直接的通過document上的body和head的屬性就可以了。
var body = document.body; var head = document.head;
如果這兩行程式碼在全域性作用域上，這兩行程式碼都是多此一舉，因為全域性作用域就是就是document。可以直接使用這兩個屬性。
5.Document.prototype上定義了documentElement屬性，指代文件的根元素，在HTML文件中，他總是指代<html>元素。
6.getElementsByClassName、querySelectorAll、querySelector在Document.prototype和Element.prototype中均有定義。
三、關於DOM節點操作的一些習題
1.遍歷元素節點樹
var fChildNode = function(node){ var child = node.childNodes, childText = "", len = child.length; for(var i = 0; i < len; i++){ if(child[i].nodeType == 1){ childText += child[i].nodeName + " "; if(child[i].childElementCount > 0){ fChildNode(child[i]); } } } console.log(childText); } //這裡需要注意不要使用內建的children來直接獲取子元素節點，IE9以下不相容 //chidElementCount在很多手冊上都找不到，這個屬性是用來獲取元素的子元素個數的View Code
2.封裝函式，返回元素e的第n層祖先元素節點
var retParent = function(elem,n){ while(elem && n){ elem = elem.parentNode; if(elem.nodeType == 1){ n --; } } return elem; } //這裡注意不要使用parentElement這個屬性，IE9以下不相容View Code
3.封裝函式，返回元素e的第n個兄弟元素節點，n為正，返回後面的兄弟元素節點，n為負，返回前面的，n為0，返回自己