js中DOM總結

DOM概念

當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。  
DOM是“Document Object Model”（文件物件模型）的首字母縮寫。

dom節點型別

元素型別	節點型別
元素element	1
屬性attr	2
文字text	3
註釋comments	8
文件document	9

節點屬性

1.nodeName
定義和用法:nodeName 屬性指定節點的節點名稱。
如果節點是元素節點，則 nodeName 屬性返回標籤名。
如果節點是屬性節點，則 nodeName 屬性返回屬性的名稱。
文字節點的nodeName 永遠  #text
對於其他節點型別，nodeName 屬性返回不同節點型別的不同名稱。

2.nodeValue
定義和用法：nodeValue 屬性設定或返回指定節點的節點值。
註釋：如果您希望返回元素的文字，請記住文字始終位於文字節點中，並且您必須返回文字節點的值（element.childNodes[0].nodeValue）。

3.nodeType
定義和用法：nodeType 屬性返回以數字值返回指定節點的節點型別。
如果節點是元素節點，則 nodeType 屬性將返回 1。
如果節點是屬性節點，則 nodeType 屬性將返回 2。
如果節點是文字節點，則 nodeType 屬性將返回 3。
如果節點是註釋節點，則 nodeType 屬性將返回 8。

查詢元素

1.getElementById() 方法可返回對擁有指定 ID 的第一個物件的引用。
2.getElementsByName() 方法可返回帶有指定名稱的物件的集合。
3.getElementsByTagName() 方法可返回帶有指定標籤名的物件的集合。（陣列）
4.getElementsByClassName() 返回文件中所有指定類名的元素集合

元素屬性

1.innerHTML 屬性設定或返回標籤的開始和結束標籤之間的 HTML。
2.outerHTML.當前元素的開始標記和結束標記之間的所有文字和HTML標籤。
3.innerText 設定或獲取位於物件起始和結束標籤內的文字 
4.outerText 設定(包括標籤)或獲取(不包括標籤)物件的文字 
5.setAttribute() 方法新增指定的屬性，併為其賦指定的值。如果這個指定的屬性已存在，則僅設定/更改值。
6.tagName 屬性返回被選元素的標籤名。語法：elementNode.tagName
7.document.write()     向文件寫 HTML 表示式 或 JavaScript 程式碼。

四者的區別

文件結構和遍歷

  1、firstElementChild        第一個子元素節點
  2、lastElementChild        最後一個子元素節點
  3、nextElementSibling        下一個兄弟元素節點
  4、previousElementSibling     前一個兄弟元素節點
  5、childElementCount        子元素節點個數量
  6、children       獲取所有的子元素節點，是一個只讀屬性，並且它在子節點變化時會實時更新。
  7、parentElement    獲取父元素節點
注意：  這裡的屬性得到的都是元素節點 

節點操作

1.childNodes   獲取當前元素物件的所有孩子節點
2.children    獲取當前元素物件的所有子元素節點
3.createElement() createTextNode()  建立新的節點
4.appendChild()方法向節點的子節點列表的末尾新增新的子節點
5.插入節點   insertBefore(newchild,exichild) 
6.removeChild(exichild) 方法用於移除節點
7.replaceChild(newChild,exiChild) 方法 ，用於替換節點
8.cloneNode() 方法建立指定節點的精確拷貝。
9.createAttribute() 建立新的 Attr 節點。

DOM高階