HTML DOM

HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 是 Document Object Model（文档对象模型）。定义了访问 HTML 和 XML 文档的标准。

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型。XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
• HTML DOM - 针对 HTML 文档的标准模型。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

HTML DOM方法

一些常用的 HTML DOM 方法：

Paste_Image.png

一些常用的 HTML DOM 属性：

• innerHTML - 获取或替换 HTML 元素的内容
• parentNode - 获取节点（元素）的父节点
• childNodes - 获取节点（元素）的子节点
• attributes - 获取节点（元素）的属性节点

//创建 HTML 内容
    document.getElementById("p1").innerHTML="New text!";   

//改变 CSS 样式
    document.getElementById("p2").style.color="blue";

//改变 HTML 属性

//创建新的 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" />