js學習--DOM操做詳解大全 前奏（認識DOM）

一 . 節點屬性

DOM 是樹型結構，相應的，能夠經過一些節點屬性來遍歷節點樹：

方法	說明
nodeName	節點名稱，至關於tagName.屬性節點返回屬性名，文本節點返回#text。nodeName，是隻讀的。
nodeType	節點的類型，返回值：1，元素節點；2，屬性節點；3，文本節點。nodeType 是隻讀的。
nodeValue	節點的值，返回一個字符串，指示這個節點的值。元素節點返回 null，屬性節點返回屬性值，文本節點返回文本。nodeValue 可讀可寫，這是對元素節點不能寫。通常只用於設置文本節點的值。
childNodes	返回子節點數組。文本和屬性節點的 childNodes 永遠是 null。能夠用 hasChildNodes 來判斷是否有子節點。只讀屬性。
firstChild	返回第一個子節點。文本和屬性節點沒有子節點，會返回一個空數組。對於元素節點，如果沒有子節點會返回 null。有一個等價式：firstChild = childNodes[0]。
lastChild	返回最後一個子節點。返回值同 firstChild，,三方待遇參考上面。有一個等價式：lastChide = childNodes[childNodes.length - 1]。
nextSibling	返回節點的下一個兄弟節點。若是沒有下一個兄弟節點的話，返回 null。只讀屬性。
previousSibling	返回節點的上一個兄弟節點。同上。
parentNode	返回節點的父節點。document.parentNode 返回 null，其餘的狀況下都將返回一個元素節點，由於只有元素節點擁有子節點，出了 document 外任何節點都擁有父節點。只讀屬性。

 

二. 節點方法

還記得下面這些咱們用過的方法麼，他們都是 DOM 的方法：

方法	說明
write()	寫入內容到文檔
getElementById()	返回帶有指定 ID 的元素
getElementsByTagName()	返回帶有指定標籤名的全部元素
getElementsByClassName()	返回包含指定類名的全部元素的一個列表
get/setAttribute('key', 'value')	返回或設置屬性節點。

這些方法的前面要加上 document 對象的哦~

還有一些其它的 DOM 操做控制的方法：

方法	說明
createElement('tagName')	建立節點。
createTextNode('text');	建立文本節點。
appendChild(o)	在父節點末尾附加子節點 ，其中 o 爲節點對象。
createDocumentFragment()	建立文檔片段。
removeChild(oP)	刪除節點。
replaceChild(newOp, targetOp)	替換節點。
insertBefore(newOp, targetOp)	已有的子節點前插入一個新的子節點。
insertAfter(newOp, targetOp)	已有的子節點以後插入一個新的子節點。
get/setAttribute('key', 'value')	設置或獲得屬性節點。
cloneNode(true/false)	複製節點。

這些方法的使用主體不僅是 document，更多的是各個節點元素。

在文檔對象模型（DOM）中，每一個節點都是一個對象。DOM 節點有三個重要的屬性 ：

屬性	說明
nodeName	節點名稱，至關於 tagName 屬性節點返回屬性名，文本節點返回 #text。nodeName，是隻讀的。
nodeType	節點的類型，返回值：1，元素節點；2，屬性節點；3，文本節點。nodeType 是隻讀的。
nodeValue	節點的值，返回一個字符串，指示這個節點的值。元素節點返回 null，屬性節點返回屬性值，文本節點返回文本。nodeValue 可讀可寫，這是對元素節點不能寫。通常只用於設置文本節點的值。

 

節點屬性介紹：

1、nodeName 屬性：節點的名稱，是隻讀的。

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

2. 屬性節點的 nodeName 是屬性的名稱

3. 文本節點的 nodeName 永遠是#text

4. 文檔節點的 nodeName 永遠是#document

2、nodeValue 屬性：節點的值

1. 元素節點的 nodeValue 是 undefined 或 null

2. 文本節點的 nodeValue 是文本自身

3. 屬性節點的 nodeValue 是屬性的值

3、nodeType 屬性：節點的類型，是隻讀的。如下經常使用的幾種結點類型:

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

咱們有兩種方法替換元素的內容，一個是 innerHTML，另外一個是 innerText。

innerHTML 屬性用於獲取或替換元素的內容，好比 <div> 標籤內的全部元素。

<div><a>文本內容</a></div>

innerText 屬性用於獲取或替換元素的文本內容，只有文本內容，沒有其它 HTML 標籤。

<div><a>文本內容</a></div>

使用語法：

 

 

 

 

 

1

Object.innerHTML

2

​

3

Object.innerText

參數說明： Object 是獲取的元素對象，如經過document.getElementById("ID")獲取的元素。

 

style 的使用語法：

Object.style.property = new style;

參數說明：

1. Object 是獲取的元素對象，如經過document.getElementById("id")獲取的元素。

2. property 爲 css 樣式屬性，好比 color，width 等等，不作過多說明。

className 屬性能夠設置或返回元素的 class 屬性。

使用語法：

 

 

Object.className = classname;

 

 

參數說明：

1. Object 是獲取的元素對象，如經過document.getElementById("id")獲取的元素。

2. className 爲 元素的 class 屬性。