公司內部的一篇關於dom方法的分享

第一部分 dom

                              node類型

nodeType 屬性

 

nodeType 屬性返回節點的類型。nodeType 是隻讀的。

 

比較重要的節點類型有：

 

元素類型	NodeType
元素	1
屬性	2
文本	3
註釋	8
文檔	9

 

 

if  (someNode.nodeType == 1)  { //適用於全部瀏覽器

     ...

}

 

nodeName 屬性

 

nodeName 屬性規定節點的名稱。

- nodeName 是隻讀的

- 元素節點的 nodeName 與標籤名相同

- 屬性節點的 nodeName 與屬性名相同

- 文本節點的 nodeName 始終是 #text

- 文檔節點的 nodeName 始終是 #document

 

註釋：nodeName 始終包含 HTML 元素的大寫字母標籤名。

 

if  (someNode.nodeType == 1)  {

   value = someNode.nodeName   //nodeName的值是元素的標籤名

}

 

nodeValue 屬性

 

nodeValue 屬性規定節點的值。

- 元素節點的 nodeValue 是 undefined 或 null

- 文本節點的 nodeValue 是文本自己

- 屬性節點的 nodeValue 是屬性值

 

每一個節點都有一個childNodes屬性，其中保存着一個NodeList對象。（NodeList是一個類數組對象，不是Array的實例）

 

someNode.firstChild =someNode.childNodes[0] = someNode.childNodes.item(0)

 

someNode.lastChild = someNode.childNodes[someNode.childNodes.length-1]

 

hasChildNodes() //檢測有沒有子節點

 

var returnNode = someNode.appendChild(someNode.firstChild) //在第一個子節點後append

 

insertBefore(newNode, null) //和append()方法一致

 

insertBefore(newNode, someNode.firstChild) //在特定位置添加節點

 

replaceChild(newNode, someNode.firstChild) //替換節點

 

removeChild(someNode.firstChild)  //移除節點

 

replaceChild(newNode, someNode.childNodes[someNode.length-2])  //刪除倒數第二個元素

 

cloneNode()  //接收一個參數，true（爲深複製，複製節點以及子節點樹），false（只複製節點自己)

 

<ul>

     <li>item1</li>

     <li>item2</li>

     <li>item3</li>

</ul>

 

var deepList =mylist.cloneNode(true)

 

console.log(deepList.childNodes.length)   //3(ie<9) 或7（其餘瀏覽器）

[text, li, text, li, text, li, text]

 

console.log(deepList.children.length)  //3

[li, li, li]

console.log(deepList.childNodes.length) //

 

var shallowList =mylist.cloneNode(false)

console.log(shallowList .childNodes.length)   //0

 

IE9以前的版本不會爲空白符建立節點,cloneNode()方法不會複製dom節點的javascript屬性,例如事件處理，但ie有bug，建議複製前移除事件

 

Document類型

 

var allElements = document.getElementByTagName("*") //全部元素

 

document.forms document.images

document.links   //帶有href特性的<a>元素

 

Element類型

 

1.HTML元素

var div= document.getElementById("myDiv")

 

console.log(div.id)

console.log(div.className)

console.log(div.title)

console.log(div.dir)

 

2.取得特性

     getAttribute()  setAttribute()  removeAttribute()

     <div id="myDiv" align="left" my_special_attribute="hello!"

 

     console.log(div.my_special_attribute) //undefined (ie除外)

 

     div.mycolor = "red"

     console.log(div.getAttribute("mycolor")) //null （ie除外）

 

                                                                     DOM擴展

 

  選擇符

 

     querySelector() querySelectorAll()   //ie8+

 

        matchesSelector() //接受參數，css選擇符，若是調用元素與該選擇符匹配，返回true，不然，返回false   p288頁

 

    與類相關的擴充

 

        getElementsByClassName() //ie9+ 在document對象上調用始終會返回與類匹配的全部元素，在元素上調用改方法只會返回後代元素中匹配的元素

 

         //刪除"disabled"類

        div.classList.remove("disabled")

 

         //添加"current"類

         div.classList.add("current")

          //切換"user"類

         div.classList.toggle("current")

 

          //肯定元素中是否包含既定類名

          if (div.classList.contains("bd"))

          Firefox 3.6+和Chrome

 

location修改URL的方法

 

初始url爲http://www.baidu.com/wechart/

 

將url修改成 http://www.baidu.com/#section1

location.hash = "#section1";

 

將url修改成 http://www.baidu.com/wechart/?q=javascript

location.search= "?q=javascript";

 

將url修改成 http://www.yahoo.com/wechart/

location.hostname= "www.yahoo.com";

 

將url修改成 http://www.yahoo.com/mydir/

location.pathname= "mydir";

 

將url修改成 http://www.yahoo.com:8080//wechart

location.port = 8080;