HTML DOM總結

HTML DOM總結

1：HTML DOM介紹

HTML DOM：HTML Document Object Model

定義了訪問和操做 HTML 文檔的標準方法。

• 核心DOM：針對任何結構的的標準文檔
• XML DOM：針對XML結構文檔的標準文檔，XML DOM 定義了全部 XML 元素的對象和屬性，以及訪問它們的方法。
• HTML DOM：針對HTML文檔的標準文檔，定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。

HTML DOM 是W3C制定的一套對關於如何獲取、修改、添加或刪除 HTML 元素的標準。

DOM 將 HTML 文檔表達爲樹結構。

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型

HTML DOM 模型被構造爲對象的樹。

2：DOM節點：

在HTML DOM中，全部事物都是節點，DOM是節點樹的HTML

• 整個文檔是一個文檔節點
• 每個html元素是元素節點
• html元素內的文本是文本節點
• html元素的屬性是屬性節點
• 註釋是註釋節點

節點樹中全部節點均可以經過js來訪問，能夠修改、刪除、添加以及建立節點

節點樹中的節點之間是層級關係，父(parent)、子(child)、同胞(sibling)。

• 節點樹中的頂端節點是根節點(root)
• 除了根節點以外的全部節點都有父節點
• 一個節點只有一個父節點，能夠有許多祖先節點，能夠有許多子節點以及後代節點
• 擁有相同父節點的節點是同胞節點

3：DOM屬性

全部html元素都是一個對象，有對象屬性和對象方法，屬性是可以獲取和設置的值，方法是對元素的CRUD；

屬性是可以獲取和設置的html元素的值

HTML DOM 屬性：

• innerHTML：元素節點的文本值
• parentNode：元素節點的父節點
• childNodes：元素節點的本身點
• attributes：元素節點的屬性節點
• firstChild:首個子元素
• lastChild：最後一個子元素
• nodeName:節點的名稱
  • nodeName是隻讀的
  • 元素節點的nodeName與標籤名同樣
  • 屬性節點的nodeName與屬性名同樣
  • 文本節點的nodeName是#text
  • 文檔節點的nodeName是#document
• nodeValue：節點的值
  • 元素節點的nodeValue：undefined || null
  • 文本節點的nodeValue：文本自己
  • 屬性節點的nodeValue：屬性值
• nodeType：節點的類型
  • 只讀
  • 元素：nodeType爲：1
  • 屬性：nodeType爲：2
  • 文本：nodeType爲：3
  • 註釋：nodeType爲：8
  • 文檔：nodeType爲：9

4：DOM方法

方法是在節點元素上進行的操做

HTML DOM 方法：

• document.getElementById("id")
• document.getElementsByTagName("TagName")
• document.getElementsByClassName("class")//ie5,6,7,8無效
• element.appendChild()：把新的節點添加到指定節點
• removeChild()：刪除子節點
• replaceChild()：替換子節點
• insertBefore()：在指定的子節點前面插入新的子節點
• document.createAttribute()：建立屬性節點
• document.createElement()：建立元素節點
• document.createTextNode()：建立文本節點
• getAttribute()：返回指定的屬性值
• setAttribute()：設置屬性的值

5：DOM修改

• js可以改變頁面中全部html元素--e.innerHTML="文本"
• js可以改變頁面中全部html屬性--e.src="a.jpg"
• js可以改變頁面中全部css樣式--e.style.color = "#0f0"
• js可以建立新的HTML元素
• js可以刪除已有的HTML元素
• js可以對頁面中的全部事件作出反應

建立元素：

parent.appendChild(child)
parent.insertBefore(newChild,targetChild)

刪除HTML元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

替換 HTML 元素:

parent.replaceChild(newCihld,oldChild)

6：DOM事件

onclick
onload
onunload
onchange
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove