HTML文檔結構：

ct_htmltree.gif

在 HTML DOM （文檔對象模型）中，每個部分都是節(jié)點：

文檔本身是 文檔節(jié)點
所有 HTML 元素是 元素節(jié)點
所有 HTML 屬性是 屬性節(jié)點
HTML 元素內的文本是 文本節(jié)點
注釋是 注釋節(jié)點

1557212834997.jpg

常用方法:

1.獲取節(jié)點：

document.getElementById(idName) //通過id號來獲取元素，返回一個元素對象
document.getElementsByName(name) //通過name屬性獲取id號，返回元素對象數組
document.getElementsByClassName(className) //通過class來獲取元素，返回元素對象數組（ie8以上才有）
document.getElementsByTagName(tagName) //通過標簽名獲取元素，返回元素對象數組

2.獲取/設置元素的屬性值：

element.getAttribute(attributeName) //括號傳入屬性名，返回對應屬性的屬性值
element.setAttribute(attributeName,attributeValue) //傳入屬性名及設置的值

3.創(chuàng)建節(jié)點Node：

document.createElement("h3") //創(chuàng)建一個html元素，這里以創(chuàng)建h3元素為例
document.createTextNode(String); //創(chuàng)建一個文本節(jié)點；
document.createAttribute("class"); //創(chuàng)建一個屬性節(jié)點，這里以創(chuàng)建class屬性為例

4.增添節(jié)點：

element.appendChild(Node); //往element內部最后面添加一個節(jié)點，參數是節(jié)點類型
elelment.insertBefore(newNode,existingNode); //在element內部的中在existingNode前面插入newNode

5.修改節(jié)點：

parent.replaceChild(newNode,oldNode) // 新節(jié)點替換舊節(jié)點

6.刪除節(jié)點：

element.removeChild(Node) //刪除當前節(jié)點下指定的子節(jié)點，刪除成功返回該被刪除的節(jié)點，否則返回null

常用屬性：

1.獲取當前元素的父節(jié)點 ：

element.parentNode //返回當前元素的父節(jié)點對象

2.獲取當前元素的子節(jié)點：

element.chlidren //返回當前元素所有子元素節(jié)點對象，只返回HTML節(jié)點
element.chilidNodes //返回當前元素多有子節(jié)點，包括文本，HTML，屬性節(jié)點。（回車也會當做一個節(jié)點）
element.firstChild //返回當前元素的第一個子節(jié)點對象
element.lastChild //返回當前元素的最后一個子節(jié)點對象

3.獲取當前元素的同級元素：

element.nextSibling //返回當前元素的下一個同級元素 沒有就返回null
element.previousSibling //返回當前元素上一個同級元素 沒有就返回null

4.獲取當前元素的文本：

element.innerHTML //返回元素的所有文本，包括html代碼
element.innerText //返回當前元素的自身及子代所有文本值，只是文本內容，不包括html代碼

5.獲取當前節(jié)點的節(jié)點類型：

node.nodeType //返回節(jié)點的類型,數字形式（1-12）
常見幾個1：元素節(jié)點，2：屬性節(jié)點，3：文本節(jié)點。

6.設置樣式：

element.style.color=“#eea”; //設置元素的樣式時使用style，這里以設置文字顏色為例

DOM常用操作
JavaScript淺談DOM操作
jQuery之DOM操作