DOM

DOM

DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。

DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

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

HTML DOM樹

DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：

• 文檔節點(document對象)：表明整個文檔
• 元素節點(element 對象)：表明一個元素（標籤）
• 文本節點(text對象)：表明元素（標籤）中的文本
• 屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
• 註釋是註釋節點(comment對象)　

JavaScript 能夠經過DOM建立動態的 HTML：

• JavaScript 可以改變頁面中的全部 HTML 元素
• JavaScript 可以改變頁面中的全部 HTML 屬性
• JavaScript 可以改變頁面中的全部 CSS 樣式
• JavaScript 可以對頁面中的全部事件作出反應

查找

直接查找

• document.getElementById
  • 根據id獲取標籤
• document.getElementByClassName
  • 根據class屬性獲取標籤列表
• document.getElementByTagName
  • 根據標籤名獲取標籤列表

間接查找

• 前提，已得到一個標籤，在此標籤的前提下
• parentElement 父節點標籤元素
• children 全部子標籤
• firstElementChild 第一個子標籤元素
• lastElementChild 最後一個子標籤元素
• nextElementSibling 下一個兄弟標籤元素
• previousElementSibling 上一個兄弟標籤元素

涉及到DOM操做的JS代碼應該放在文檔的哪一個位置。，否則可能找不到

節點操做

建立節點

• document.createElement(標籤名)

添加節點

• 節點.appendChild(新節點)
  • 追加一個子節點（做爲最後的子節點）
• 節點.insertBefore(新節點,某個節點);
  • 把增長的節點放到某個節點的前邊

刪除節點

• 得到要刪除的元素，經過父元素調用該方法刪除
• 父節點.removeChild(要刪除的節點)

替換節點

• 父節點.replaceChild(新節點,被替換的節點)

屬性節點

• 獲取文本節點的值
  • 節點.innerText
    • 單純的文字
  • 節點.innerHTML
    • 包括文字和html
• 設置文本節點的值
  • 節點.innerText="文本"
  • 節點.innerHtml="能夠寫HTML代碼和標籤"

attribute操做

• 節點.setAttribute("屬性","值")
  • 設置節點的屬性
• 節點.getAttribute("屬性")
  • 獲取節點的某屬性值
• 節點.removeAttridute("屬性")
  • 移除節點的某屬性值
• 節點.屬性
  • 獲取節點的某屬性值
• 節點.屬性=值
  • 設置節點的某屬性值

獲取值操做

elementNode.value

適用於如下標籤：

• .input
  
• .select
• .textarea

class的操做

className

• 獲取全部樣式類名(字符串)

classList.remove(cls)

• 刪除指定類

classList.add(cls)

• 添加類

classList.contains(cls)

• 存在返回true，不然返回false

classList.toggle(cls)

• 存在就刪除，不然添加

指定CSS操做

節點.style.css屬性=值

JS操做CSS屬性的規律

• 對於沒有中橫線（-）的CSS屬性通常直接使用style.屬性名便可
• 對含有中橫線（-）的CSS屬性，將中橫線後面的第一個字母換成大寫便可

事件

常見事件

• onclick 當用戶點擊某個對象時調用的事件句柄。
• ondblclick 當用戶雙擊某個對象時調用的事件句柄。
• onfocus 元素得到焦點。 // 練習：輸入框
• onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
• onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）
• onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
• onkeypress 某個鍵盤按鍵被按下並鬆開。
• onkeyup 某個鍵盤按鍵被鬆開。
• onload 一張頁面或一幅圖像完成加載。
• onmousedown 鼠標按鈕被按下。
• onmousemove 鼠標被移動。
• onmouseout 鼠標從某元素移開。
• onmouseover 鼠標移到某元素之上。
• onselect 在文本框中的文本被選中時發生。
• onsubmit 確認按鈕被點擊，使用的對象是form。

方式一

• this是實參，表示觸發事件的當前元素
• 函數定義過程當中的this爲形參

方式二

window.onload

當咱們給頁面上的元素綁定事件的時候，必須等到文檔加載完畢。由於咱們沒法給一個不存在的元素綁定事件。

window.onload事件在文件加載過程結束的時候觸發。此時，文檔中的全部對象都位於DOM中，而且全部圖像，腳本，連接和子框架都已完成加載。

注意：.onload()函數存在覆蓋現象。

XMind: ZEN - Trial Version