3.HTML DOM

介紹

DOM（Document Object Model）文檔對象模型，定義了訪問 HTML 和 XML 文檔的標準，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。

那顯然，HTML DOM 定義了全部 HTML 元素的對象和屬性，以及訪問它們的方法。換言之，HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標準。

HTML DOM 節點

根據 W3C 的 HTML DOM 標準，HTML 文檔中的全部內容都是節點：

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

節點樹中的節點彼此擁有層級關係。

父（parent）、子（child）和同胞（sibling）等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。

• 在節點樹中，頂端節點被稱爲根（root）
• 每一個節點都有父節點、除了根（它沒有父節點）
• 一個節點可擁有任意數量的子節點
• 同胞是擁有相同父節點的節點

DOM 查找

您能夠以不一樣的方式來訪問 HTML 元素，如：

• 經過使用 getElementById() 方法
• 經過使用 getElementsByTagName() 方法
• 經過使用 getElementsByClassName() 方法

document.getElementById("id");

document.getElementsByTagName("p");

document.getElementsByClassName("class");

或是直接經過上下節點來查找元素：

parentNode          // 父節點
childNodes          // 全部子節點
firstChild          // 第一個子節點
lastChild           // 最後一個子節點
nextSibling         // 下一個兄弟節點
previousSibling     // 上一個兄弟節點
  
parentElement           // 父節點標籤元素
children                // 全部子標籤
firstElementChild       // 第一個子標籤元素
lastElementChild        // 最後一個子標籤元素
nextElementtSibling     // 下一個兄弟標籤元素
previousElementSibling  // 上一個兄弟標籤元素


tag.parentElement.nextElementSibling //獲取父親的下一級兄弟標籤

tag.children //獲取全部子標籤

DOM修改

先選擇元素在進行修改，通常有以下方法：

//屬性
innerText   //文本
innerHTML   //HTML內容(包括元素、註釋和文本節點)
value       //獲取input/select/textarea裏面輸入的內容

//方法
appendChild()             //把新的子節點添加到指定節點。
removeChild()             //刪除子節點。
replaceChild()             //替換子節點。
insertBefore()            //在指定的子節點前面插入新的子節點。
createAttribute()    //建立屬性節點。
createElement()           // 建立元素節點。
createTextNode()     //建立文本節點。
getAttribute()         //返回指定的屬性值。
setAttribute()        //把指定屬性設置或修改成指定的值

以下爲部分操做實例：

//修改HTML內容
<script>
document.getElementById("p1").innerHTML="New text!";
</script>


//修改元素樣式
<script>
document.getElementById("p2").style.color="blue";
</script>


//建立p標籤並增長文本節點
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
</script>


//查找元素，後追加新元素
<script>
var element=document.getElementById("div1");
element.appendChild(para);
</script>

DOM事件

onclick // 當元素被點擊後觸發onclick事件

onload //當用戶進入頁面時，會觸發onload 事件

onunload  //當用戶進入頁面時，會觸發onunload 事件

// onload 和 onunload 事件可用於處理 cookies

onchange  //當用戶改變輸入字段的內容時

onmouseover //鼠標指針移動到元素時觸發函數

onmouseout  //鼠標指針離開元素時觸發函數

onmousedown  //當某個鼠標按鈕被點擊時，觸發 onmousedown 事件

onmouseup //當鼠標按鈕被鬆開時，會觸發 onmouseup 事件