HTML DOM （文檔對象模型）

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

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

• JavaScript 能夠改變頁面中的所有 HTML 元素
• JavaScript 能夠改變頁面中的所有 HTML 屬性
• JavaScript 能夠改變頁面中的所有 CSS 樣式
• JavaScript 能夠對頁面中的所有事件做出反應

查找 HTML 元素

• 通過 id 找到 HTML 元素

  var x=document.getElementById("intro");

• 通過標簽名找到 HTML 元素

• var y=x.getElementsByTagName
   
  ("p");

• 通過類名找到 HTML 元素

提示：通過類名查找 HTML 元素在 IE 5,6,7,8 中無效。

改變 HTML 輸出流

document.write() 可用於直接向 HTML 輸出流寫內容。

提示：絕不要使用在文檔加載之後使用 document.write()。這會覆蓋該文檔。

document.write(Date());

改變 HTML 內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

如需改變 HTML 元素的內容，請使用這個語法：

document.getElementById(id).innerHTML=new HTML
 

改變 HTML 屬性

document.getElementById(id).attribute=new value

<img id="image" src="/i/eg_tulip.jpg" />
ex:document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";

改變 HTML 樣式

document.getElementById(id).style.property=new style

<p id="p2">Hello World!</p>
ex:document.getElementById("p2").style.color="blue";
   document.getElementById("p2").style.visibility="visible"
 

對事件做出反應

我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。

如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：

onclick=JavaScript

• 當用戶點擊鼠標時

<h1 onclick="this.innerHTML=‘thanks‘">請點擊文本</h1>

• 當網頁已加載時

onload 和 onunload 事件

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。

onload 和 onunload 事件可用於處理 cookie。

• 當圖像已加載時
• 當鼠標移動到元素上時

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。

• 當輸入字段被改變時

onchange 事件

onchange 事件常結合對輸入字段的驗證來使用

• 當提交 HTML 表單時
• 當用戶觸發按鍵時

創建新的 HTML 元素

<div id="div1">
<p id="p1">這是一個段落</p>
<p id="p2">這是另一個段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

刪除已有的 HTML 元素

如需刪除 HTML 元素，您必須首先獲得該元素的父元素：

實例

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>


常用的解決方案：找到希望刪除的子元素，然後使用其 parentNode 屬性來找到父元素

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

學習筆記-JavaScript HTML DOM