HTML DOM的总结

浏览数：24 / 时间：2015年06月09日

DOM 是 Document Object Model（文档对象模型）的缩写,是 W3C（万维网联盟）的标准

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

1、核心 DOM - 针对任何结构化文档的标准模型

2、XML DOM - 针对 XML 文档的标准模型

3、HTML DOM - 针对 HTML 文档的标准模型

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

DOM技术使用户页面可以动态的变化，从而大大使页面的交互性增强。但是DOM必须通过JavaScript等脚本语言来进行操作。

简单说就是DOM规定了HTML，XML等的一些规范，使JavaScript可以根据这些规范来进行各种操作。而这些规范我们可以用树来形象的表示：

技术分享

通过这样的树，我们就可以很快找到我们想要操作的节点，进而进行各种属性，方法，事件等的操作。

使用前先来了解一下元素节点的意思吧。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。看这个图：

技术分享

再来看一下html DOM的常用属性吧,如图

技术分享

接下来就说一下具体的JavaScript对HTML网页内容进行的操作，常用的方法如下：

技术分享

DOM中常用的事件如下：

技术分享

下面根据以上来实现几个小例子：

1，添加新的节点：

    <span style="font-size:18px;">  <!DOCTYPE html>  
        <html>  
        <body>  
          
        <div id="div1">  
        <p id="p1">这是一个段落。</p>  
        <p id="p2">这是另一个段落。</p>  
        </div>  
          
        <script>  
        var para=document.createElement("p");//创建一个标签p节点名为para  
        var node=document.createTextNode("这是新段落。");//定义节点元素的内容  
        para.appendChild(node);//将元素和内容联系起来  
          
        var element=document.getElementById("div1");//找到节点为div1的节点  
        element.appendChild(para);//向节点div1中添加新节点para  
        </script>  
          
        </body>  
        </html>  
    </span>

2,删除某个节点元素：

    <span style="font-size:18px;">  <!DOCTYPE html>  
        <html>  
        <body>  
          
        <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);//删除父节点中的子节点child  
        </script>  
          
        </body>  
        </html>  
    </span>

3，获得焦点时改变颜色，这个是经常用的：

    <span style="font-size:18px;">  <!DOCTYPE html>  
        <html>  
        <head>  
        <script>  
        function myFunction(x)  
        {  
        x.style.background="yellow";  
        }  
        </script>  
        </head>  
        <body>  
          
        请输入英文字符：<input type="text" onfocus="myFunction(this)">  
          
        <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>  
          
        </body>  
        </html>  
    </span>

4，鼠标移动上元素和移开元素：

    <span style="font-size:18px;">  <!DOCTYPE html>  
        <html>  
        <body>  
          
        <div   
        onmouseover="mOver(this)"   
        onmouseout="mOut(this)"   
        style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">  
        Mouse Over Me  
        </div>  
          
        <script>  
        function mOver(obj)  
        {  
        obj.innerHTML="谢谢你"  
        }  
          
        function mOut(obj)  
        {  
        obj.innerHTML="把鼠标指针移动到上面"  
        }  
        </script>  
          
        </body>  
        </html>  
    </span>