DOM的介绍 - 爱码网

　　什么是DOM

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的

　　解析过程

　HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性.

　　DOM 数(一切都是节点)

DOM的介绍

上图可知，在HTML当中，一切都是节点：（非常重要）

元素节点：HMTL标签。
文本节点：标签中的文字（比如标签之间的空格、换行）
属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

　　DOM可以做什么

　　　 ● 找对象(元素节点)

　　　　● 设置元素的属性值

　　　　● 设置元素的样式

　　　　● 动态创建和删除元素

　　　　● 事件的触发响应: 事件源 , 事件 , 事件的驱动程序

　　DOM节点的获取

DOM节点的获取方式其实就是 获取事件源的方式.

操作元素节点,必须首先找到该节点,有三种方式获取DOM节点 :

    <div ></div>
    <script>
        //方法一 : 通过 id 获取单个标签
        var div1 = document.getElementById("box1");
        // 方法二 : 通过 标签名 获取标签数组 ,有 s
        var arr1 = document.getElementsByTagName("div");
        // 方法三 : 通过 类名 获取标签数组,所以有 s
        var arr2 = document.getElementsByClassName("box");
        
    </script>

因为方法二 / 方法三获取的是标签数组,那么要先遍历之后再使用.

　　特殊情况 : 数组中的值只有1个 , 即使如此,这个值也是包在数组里的,所以这个值获取方法 :

<div ></div>


// 获取数组中的第一个元素
var arr1 = document.getElementsByTagName("div")[0];

//获取数组中的第一个元素
var arr2 = document.getElementsByClassName("box")[0];

<div >

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div >i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

</script>

局部查找