HTML DOM 定義了訪問和操作 HTML 文檔的標(biāo)準(zhǔn)方法。
DOM 是 Document Object Model（文檔對象模型）。定義了訪問 HTML 和 XML 文檔的標(biāo)準(zhǔn)。

W3C DOM 標(biāo)準(zhǔn)被分為 3 個不同的部分：

• 核心 DOM - 針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
• XML DOM - 針對 XML 文檔的標(biāo)準(zhǔn)模型。XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法。
• HTML DOM - 針對 HTML 文檔的標(biāo)準(zhǔn)模型。HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。

在 HTML DOM 中，所有事物都是節(jié)點。DOM 是被視為節(jié)點樹的 HTML。通過 HTML DOM，樹中的所有節(jié)點均可通過 JavaScript 進(jìn)行訪問。所有 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" />