1. 程式人生 > >dom 的基本操作介紹——節點層次——Node型別!

dom 的基本操作介紹——節點層次——Node型別!

1.NODE 型別
NODE.ELEMENT_NODE其結果就等於1
舉例:

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

在以程式碼在IE下面不相容,所以要把Node.ELEMENT_NODE改成1才能生效。
2.nodeName 和 nodeValue屬性

if(someNode.nodeType == 1)
value = someNode.nodeName;

以上語句說明,如果的節點型別為元素型別時,nodeName 為元素標籤值,nodeValue 值為null。
3.節點關係,啥也不說了,直接看例子:

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1)'
var cout = someNode.childnodes.length;

前兩項都描述了的怎樣讀取子節點的值。
4.將子節點轉化成陣列的函式:convertToArray()
function converToArray()
{
var array = null;
try{
array = Array.prototype.slice.call(nodes,0);
}catch (ex){
array = new Array();
for(var i=0,len=nodes.length;i<len;i++)
{
array.push(nodes[i]);
}
}
return array;
}
\
這個函式徹底改變IE不相容Array.prototype.slice.call()這個函式的問題了!
5.節點之間的關係有多種:
父節點 parentNode
子節點 childNodes
首節點 firstchild
尾節點 lastchild
下節點 nextSibling
上節點 previousSibling
6.節點的操作
因為關係指標都是隻讀的,所以這裡涉及到了的節點的操作方法。
appendChild舉兩例

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

第二例:

var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnNode == someNode.firstChild);
alert(returnNode == someNode.lastChild);

insertBefore舉例

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

//插入後成為第一個子節點
var returnNode = someNode.insertBefore(newNode, someNode.firstChild0);
alert(returnNode == newNode);
alert(newNode == someNode.firstChild);//true

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


替換子節點

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

移除節點

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

7.其它操作:cloneNode,引數true時表示複製節點本身及節點下級所有節點,false時表示只複製本身節點。

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

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

這裡說明一點:複製後返回的節點副本本屬於文件所有,但並沒有為它指定父節點。因此,這個節點副本就成為了一個“孤兒”(挺生動吧),除非通過appendChild(),insertBefore(),replaceChild()將它新增到文件中。
好了將完了~~~~個人覺得的這樣的基礎挺重要的,所以寫下來吧!