基本概念

• 每個載入瀏覽器的 HTML 文件都會成為 Document 物件。
• Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。
• Document 物件是 Window 物件的一部分
• 當瀏覽器開啟一個HTML文件時，瀏覽器解析HTML文件的標記，並建立表示這些標記的物件，這些物件就是HTML文件物件。
• 文件物件即Document 物件，指的是一回事。

DOM常用方法

獲取HTML文件物件的方法

• getElementById() 返回對擁有指定 id 的第一個物件的引用。
• getElementsByName() 返回帶有指定名稱的物件集合。
• getElementsByTagName() 返回帶有指定標籤名的物件集合。

其他方法

• write() 向文件寫 HTML 表示式 或 JavaScript 程式碼。
• 溫馨提示：文件載入之後使用docunment.write()會覆蓋原文件.

改變 HTML 元素的樣式

在 HTML DOM 中，Element 物件表示 HTML 元素。

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。

• 獲取元素的內容和標籤名稱
  • element.innerHTML 設定或返回元素的內容。
  • element.tagName 返回元素的標籤名。
• HTML屬性的獲取
  • element.id 設定或返回元素的 id。
  • element.className 設定或返回元素的 class 屬性。
  • element.title 設定或返回元素的 title 屬性。
  • ......

• 改變CSS樣式

  • 通過style屬性操作內聯式

    需要將下劃線去掉並將第二個單詞首字母大寫，比如：
    backgroundColor/backgroundImage/borderColormarginLeft......

  • 通過className

    先在樣式表裡class的樣式，然後通過JS修改元素class

• 操作HTML文件物件的屬性

  • element.getAttribute() 返回元素節點的指定屬性值。
  • element.setAttribute() 把指定屬性設定或更改為指定值。
  • element.removeAttribute() 從元素中移除指定屬性。

建立HTML文件物件

javascript中可以通過createElement()方法建立一個元素(節點)。

• createElement() 建立元素節點。
• element.appendChild() 向元素新增新的子節點，作為最後一個子節點。
• element.removeChild() 從元素中移除子節點。

節點

將文件結構相像成一棵樹，每一個部分（元素，屬性，內容）都可以看做一個節點。
根據一個節點可以通過關係找到其他節點

• 節點的屬性：(名稱、型別、值)

  1. element.nodeName 返回元素的名稱。與element.tagName作用相同
     文字節點的名稱為:#text;文件節點的名稱為:#document.
  2. element.nodeType 返回元素的節點型別。

     如果節點是元素節點，則 nodeType 屬性將返回 1。

     如果節點是屬性節點，則 nodeType 屬性將返回 2。

     如果節點是文字節點，則 nodeType 屬性將返回 3。

  3. element.nodeValue 設定或返回元素值。
     • 文字節點的nodeValue為文字內容
     • 屬性節點的nodeValue為屬性值
     • 元素節點無nodeValue

• 子元素相關(可以類別CSS中的虛擬類別選擇器)

  1. element.childNodes 返回元素子節點的 NodeList。類似CSS中的子選擇器
  2. element.children 返回元素的子元素,該屬性只返回元素節點。
  3. element.firstChild 返回元素的首個子元素。類似CSS中的：e:first-child
  4. element.lastChild 返回元素的最後一個子元素。類似CSS中的： e:last-child
  5. element.removeChild() 從元素中移除子節點。
  6. element.replaceChild() 替換元素中的子節點。
  7. element.parentNode 返回元素的父節點。

• 同級兄弟元素相關(可以類別CSS中的兄弟選擇器)

  1. element.previousSibling 返回位於相同節點樹層級的前一個元素。
  2. element.nextSibling 返回位於相同節點樹層級的下一個節點。類似CSS中的直接相鄰選擇器: h1+h2

• 屬性節點(瞭解即可)

  • element.attributes 返回元素屬性的 NamedNodeMap。
• element.insertBefore() 在指定的已有的子節點之前插入新節點。
• element.replaceChild() 替換元素中的子節點。