DOM 節點層次

2022-05-02 17:42:07 字數 1163 閱讀 8090

一、dom1級定義了乙個node介面,這個介面是由dom中的所有節點型別實現的。node介面共有12種節點型別,常見的是元素節點、文字節點和文件節點。

node.element_node(1);——元素節點

node.text_node(3);——文字節點

node.document_node(9);——文件節點

二、ie瀏覽器沒有node型別的建構函式,保證相容,可以做以下比較:檢查節點型別 是否是元素

if (somenode.nodetype == 1) }

對於 元素節點  nodename始終是標籤名 nodevalue始終是null

三、每個節點都有childnodes屬性,儲存著乙個nodelist物件。nodelist是類陣列物件,但並不是array的例項,是物件,並且是實時更新。

somenode.childnodes[0] || somenode.childnodes.item(0)

nodelist轉換為陣列:

function

covertoarray(nodes) catch

(ex)

}return

array;

}

注:haschildnodes() 返回布林值 查詢是否存在子節點 效率高於查詢childnodes列表

所有節點都有ownerdocument 指向整個文件的文件節點(document).

四、節點操作

insertbefre(新節點,參照節點) 插入到特定位置

replacechild(新節點,老節點) 替換節點 老節點還在文件 但是沒有位置

removechild(節點) 刪除節點 節點還在文件 但是沒有位置

clonenode(布林值) true:深複製

mylist = document.getelementbyid("list");

var deeplist = mylist.clonenode(true

);alert(deeplist.childnodes.length)

//3(ie <9) 或者 7 (其他瀏覽器)

ie8— 不為空白符建立節點 因此為3

clonenode()不會複製事件 但是ie會複製事件 所以複製之前需要先移除事件。

DOM 節點層次 Element型別

一 element型別 nodetype 1 nodename 元素名 nodevalue null parentvalue document 或者 element var odiv document.getelementbyid example alert odiv.tagname div ale...

DOM 節點層次 Document型別

一 document型別 nodetype 9 nodename document nodevalue null parentvalue null ownerdocumet null.其他瀏覽器 除ie 可以訪問document的建構函式與原型 所有瀏覽器 包括ie8 訪問 htmldocument...

JavaScript中DOM的層次節點(二)

text型別為文字節點,包含的是可照字面解釋的純文字內容,可以包含轉義後的html字元,但不能包含html 型別值 nodetype 3nodename text nodevalue 節點所包含的文字 parentnode element 沒有節點 可以通過nodevalue和data屬性訪問tex...