DOM节点层次之Node类型
- DOM1級定義了一個Node接口,該接口有DOM中的所有節點類型實現。
- 這個Node接口在javascript中是作為Node類型實現的
- javascript中,所有節點類型都繼承自Node類型,因此所有節點逗共享著相同的基本屬性和方法。
注:除了ie之外,其他瀏覽器都可以訪問到Node類型
一、屬性
1.nodeType屬性(表明節點類型)
Node類型中定義的12個數值常量,表示節點類型,任何節點必居其一:
- 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)?
2.nodeName和nodeValue屬性
元素節點
(1)nodeName中保存的始終都是元素的標簽名
(2)nodeValue的值始終都是null
文本節點
?
3.childNodes屬性(Node類型的屬性,個人感覺確切說是document對象的屬性)
每個節點都有一個childNodes屬性,其中保存著一個NodeList對象(動態,類數組)。既可以通過方括號[],也可以用item()方法。
看看例子:
html代碼
<div id="wyc"><div id="w">wyc要加油</div><div>wyc要努力</div><div>wyc嘿嘿嘿</div> </div>js代碼
var wycTarget = document.getElementById("wyc").childNodes;var count = wycTarget.length;for(var i = 0;i < count;i++){console.log(wycTarget[i]);}console.log(count);看看輸出:
chrome和ie9及以上:括號內是ie9的,和chrome不同的地方
#text(ie:EmptyTextNode) <div id=?"w">?wyc要加油?</div>? #text(ie:EmptyTextNode) <div>?wyc要努力?</div>?#text(ie:EmptyTextNode) <div>?wyc嘿嘿嘿?</div>? #text(ie:EmptyTextNode) 7ie8及以下:
[object Object][object Object][object Object]3區別?
(1)ie9及以上和chrome返回了7項,他們統一把\n(換行符)當成文本節點,如果把html代碼變成一行,也會輸出3項,沒有文本節點
(2)ie8會打印出對象,這是因為ie8及更早版本將NodeList實現為一個COM對象,這回造成影響,無法通過Array.prototype.slice()方法將其轉換為數組(而在ie9和chrome中可以)。
(3)下面我們用一種觀察者模式,實現一個將NodeList轉化為數組的接口。
function convertToArray(nodes){var array = null;try{array = Array.prototype.slice.call(nodes, 0);//ie9以上及其他}catch(ex){array = new Array();for(var i = 0,len = nodes.length;i < len;i++){array.push(nodes[i]);}}return array;}4.parentNode屬性
該屬性指向文檔樹中的父節點。包含在childNodes列表中的所有節點都具有相同的父節點
5.previousSibling和nextSibling屬性
包含在childNodes列表中的每個節點相互之間是同胞節點。previousSiblings返回前一個,nextSibling返回后一個,(注意,是一個),而且如果有空文本節點,會返回#text。
6.firstChild和lastNode
父節點的第一個子節點和最后一個子節點。
注意:如果有空文本節點,會返回#text
二、操作節點(方法)
1.appendChild()
父節點調用,并在childNodes列表末尾添加一個節點。并返回新增的節點。
如果傳入到appendChild()中的節點已經是文檔中的一部分了,那結果就是將該節點從原來的位置轉移到新位置。
var returnNode = someNode.appendChild(someNode.firstChild); alert(returnNode == someNode.firstChild);//false alert(returnNode == aome.lastChild); //true2.insertBefore()
insertBefore可以把節點插在某個你想插入的位置。兩個參數(要插入的節點,參照節點)。
//插入后成為最后一個節點 var returnNode = someNode.insertBefore(newNode,null); alert(newNode == someNode.lastChild); //插入后成為第一個節點 var returnNode = someNode.insertNode(newNode,someNode.firstChild); alert(returnNode == newNode); //true alert(newNode == someNode.firstNode);//true3.removeChild()
替換節點。兩個參數(頂替的節點,被替換的節點)。該節點的所有關系指針都會從被它替換的節點復制過來。返回被替換的節點。
//替換第一個節點 var returnNode = someNode.replaceChild(newNode,someNode.firstChild);4.removeChild()
移除,而非替換節點。返回被移除的節點。
var removeNode = someNode.removeChild(someNode.firstChild);5.cloneNode(),normalize()所有類型的節點都有的
- cloneNode():創建調用這個方法的節點的一個完全相同的副本。
????????參數:布爾值。true:深復制,復制節點及整個節點樹。false:淺復制,只復制節點本身。
- normalize():處理文檔樹中的文本節點。
????????由于解析器的實現或者DOM操作原因,可能會出現文本節點不包含文本,或者接連出現兩個文本節點(只有在人為插入時才會)的情況。
? ? ????當在某個節點上調用這個方法時。就會在該節點的后代中查找上述兩種情況。并處理,刪除或合并。? ??
轉載于:https://my.oschina.net/wyc1219/blog/826037
總結
以上是生活随笔為你收集整理的DOM节点层次之Node类型的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Unity3D:maya素材导入unit
- 下一篇: “多变量分析”——数据挖掘、数据分析