文档对象模型（Document Object Model）

最新推荐文章于 2024-04-09 17:00:00 发布

原创最新推荐文章于 2024-04-09 17:00:00 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#DOM

javascript 专栏收录该内容

6 篇文章

订阅专栏

DOM是一种用于处理XML、HTML数据的标准，它将文档表示为树形结构，允许通过脚本访问和操作文档结构。本文详细介绍了DOM中的节点访问方法，如getElementById、getElementsByTagName和getElementsByClassName，以及节点间的访问关系，如父节点、子节点和兄弟节点。此外，还讲解了DOM节点的操作，包括创建、插入、移除和克隆节点，以及如何设置和删除节点属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM(Document Object Model,文档对象模型) 最早于1998年由万维网联盟（W3C）标准化，只是表现和处理XML、XHTML和HTML数据的一种方法。简而言之，DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM将数据表示为一棵树，从单一的主干（称为根）开始。在HTML页面中，起始点是HTML标记。根之上是树枝，每根树枝是HTML页面的另一个元素，这样，每个HTML元素及其属性和值都可以由DOM表示。

DOM树：
元素在DOM中表现为节点(Node)。节点有自己的分支，这些分支也是节点。这种结构通常以家族的方式描述：双亲(Parents)节点有子(Child)节点,节点还有兄弟(Sibling)节点，等等。网页中的根节点document没有双亲节点，只有一个子节点:html。DOM中的每个节点代表一个对象。这些对象有特殊的属性，反应每个节点与其直接家族成员的关系。

（一）访问节点的方法

(1).getElementById() 通过 id 访问节点，可以找到特定的元素。

function $(id){return document.getElementById(id);}

(2).getElementsByTagName() 通过标签（元素）访问节点，可以找到特定类型的所有元素。该方法返回选中元素的一个类数组列表(注意，方法名称中的复数形式Elements). getElementsByTagName() 可以在任何元素上调用，所以你可以使用特定的起始点，限制搜索范围。

var header = document.getElementById(‘header’);
var hLinks = header.getElementsByTagName(‘a’);

(3).getElementsByClassName() 通过类名访问节点，但是此方法有兼容性问题（IE6、IE7、IE8），此方法在IE9之前的版本中不存在。解决方法，可以封装自己的class类。

<script type="text/javascript">
    window.onload = function(){
    //封装自己的class类名
     function getClass(classname){
    //如果浏览器支持，则直接返回
    if(document.getElementsByClassName){
    return document.getElementsByClassName(classname);
    }
    // 不支持的浏览器
    var arr=[]; //用于存放满足的数组
 var dom = document.getElementsByTagName("*");
//alert(dom.length);
for (var i = 0; i<dom.length;i++) {
   if (dom[i].className == classname) {
        arr.push(dom[i]);
    } 
}
return arr;
}
getClass("demo");

var dom = document.getElementsByClassName("demo");
alert(dom.length);
}
</script>
    <body>
        <div></div>
        <div class="demo"></div>
        <div></div>
        <div class="demo"></div>
        <div></div>
        <div class="demo"></div>
    </body>

(二)节点间的访问关系

这里写图片描述
parentNode父节点：

<script type="text/javascript">
    window.onload = function(){
        var x = document.getElementById("x");
        x.onclick = function(){
        this.parentNode.style.display ="none";
        }
    }
</script>

兄弟节点：显而易见存在兼容性问题(IE678)支持nextSibling,previousSibling
其他主流的浏览器支持nextElementSibling,previousElementSibing
要想兼容，我们不妨合写用||

<script>
    window.onload = function(){
        var one = document.getElementById("one");
        //one.nextSibling.style.backgroundColor = "red"; 这个之后IE 678支持
        // 注意：必须先写 正常浏览器支持的 再写IE678支持的
        var div = one.nextElementSibling || one.nextSibling;
        div.style.backgroundColor ="red";   
        var divp = document.getElementById("parent");
        var fir = div.firstElementChild || div.firstChild;
        fir.style.backgroundColor = "purple";       
        }
</script>

注意：必须先写正常浏览器后写 ie678
同理子节点。
孩子节点：
(1).childNodes选出所有的孩子，它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。火狐谷歌等高版本会把换行也看做子节点：

解决方法：利用 nodeType == 1 时才是元素节点来获取元素节点（标签元素）

<script>
    var ul = document.getElementById("ul");
    var childrens = ul.childNodes;
    //alert(childrens.length);//  9 这个换行也算
    //解决方法
    for (var i = 0;i<childrens.length;i++) {
        if (childrens[i].nodeType== 1) {
                         childrens[i].style.backgroundColor="pink";
        }
    }
</script>

(2).children 选取所有的孩子（只有元素节点）
注意：ie 678 包含注释节点这个要避免开。
这里写图片描述

(三)DOM节点的操作

(1)创建节点
var div = document.creatElement(“div”);
创建一个新的div标签
(2)插入节点
1. appendChild(); 添加孩子放到盒子的 最后面。
2. insertBefore(插入的节点，参照节点) 子节点添加孩子写满两个参数

var demo = document.getElementById("demo");
var childrens = demo.children;
var firstDiv = document.createElement("div");       
//插入节点 添加孩子 放到盒子的最后面
demo.appendChild(firstDiv);
var test = document.createElement("div");
demo.insertBefore(test,childrens[0]);
// 如果第二个参数为null，则默认这个新生成的盒子放到最后面
demo.insertBefore(test,null);

(3)移出节点

var xd = document.getElementById("xiongda");
demo.removeChild(xd);

(4)克隆节点
cloneNode();复制节点
括号里面可以跟参数，如果里面是 true 深层复制，除了复制本盒子，还复制子节点
如果为 false 浅层复制只复制本节点不复制子节点。

var last = childrens[0].cloneNode();
demo.appendChild(last);

（四）设置节点属性

获取属性 getAttribute(属性)
通过这个方法，可以得到某些元素的某些属性。
设置节点属性 setAttribute(“属性”,”值”);
比如说，我们想要把一个类名改为 demo
div.setAttribute(“class”,”demo”);
删除某个属性 removeAttribute(“属性”);
demo.removeAttribute(“title”)
这个盒子就没有title 属性给删掉了。

先总结到这里，也希望各位大神也能给予一些指点