HTML DOM 定義了訪問和操作 HTML 文檔的標(biāo)準方法。
DOM 是 Document Object Model(文檔對象模型)。定義了訪問 HTML 和 XML 文檔的標(biāo)準蛙卤。
W3C DOM 標(biāo)準被分為 3 個不同的部分:
- 核心 DOM - 針對任何結(jié)構(gòu)化文檔的標(biāo)準模型
- XML DOM - 針對 XML 文檔的標(biāo)準模型衅澈。XML DOM 定義了所有 XML 元素的對象和屬性,以及訪問它們的方法展哭。
- HTML DOM - 針對 HTML 文檔的標(biāo)準模型匪蟀。HTML DOM 定義了所有 HTML 元素的對象和屬性椎麦,以及訪問它們的方法宰僧。
在 HTML DOM 中材彪,所有事物都是節(jié)點。DOM 是被視為節(jié)點樹的 HTML琴儿。通過 HTML DOM段化,樹中的所有節(jié)點均可通過 JavaScript 進行訪問。所有 HTML 元素(節(jié)點)均可被修改造成,也可以創(chuàng)建或刪除節(jié)點显熏。
HTML DOM方法
一些常用的 HTML DOM 方法:
Paste_Image.png
一些常用的 HTML DOM 屬性:
- innerHTML - 獲取或替換 HTML 元素的內(nèi)容
- parentNode - 獲取節(jié)點(元素)的父節(jié)點
- childNodes - 獲取節(jié)點(元素)的子節(jié)點
- attributes - 獲取節(jié)點(元素)的屬性節(jié)點
//創(chuàng)建 HTML 內(nèi)容
document.getElementById("p1").innerHTML="New text!";
//改變 CSS 樣式
document.getElementById("p2").style.color="blue";
//改變 HTML 屬性
//創(chuàng)建新的 HTML 元素
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
//刪除已有的 HTML 元素
<div id="div1">
<p id="p1">This is a paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
或者
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
//改變事件(處理程序)
<script>
function ChangeBackground(){
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />