前端-javascript-DOM(重点)文档对象模型

1、DOM概念-文档对象模型

// 什么是DOM ?
        /*
        Document Object Model  文档对象模型

        面向对象： 三个特性 封装 继承 多态
         一个对象：  属性和方法

         说 万事万物皆对象 在js没对象 new一个
            document对象
             html标签对象

         head                  body

    link style title          div  p ul li form等

------------------------------------------------------

概念
所谓DOM,全称 Docuemnt Object Model 文档对象模型，毫无疑问，此时要操作对象，什么对象？文档对象

在文档中一切皆对象，比如html,body,div,p等等都看做对象，那么我们如何来点击某个盒子让它变色呢？

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

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

DOM树（一切皆是节点）

前端-javascript-DOM(重点)文档对象模型

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

元素节点：HMTL标签。
文本节点：标签中的文字（比如标签之间的空格、换行）
属性节点：：标签的属性
整个html文档就是一个文档节点。所有的节点都是Object。

2、DOM可以做什么

找对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序

-----------------------------------------

<!-- DOM可以做什么   比如 让div 颜色切换

    （1）找对象（元素节点）（获取DOM）
    （2）设置标签的属性值  （对于标签属性的操作）
    （3）设置标签的样式 （对于样式属性的操作）
     (4) 设置标签值的操作
    （5）动态的创建元素和删除元素  （对于DOM的建增删改）
    （6）事件的触发响应： 事件源 、事件、事件的驱动程序（js事件,ECMAScript相关知识点对DOM进行操作）

    -->

    <!-- 开灯
        1、先要找到开关 （先要找到事件对象 事件源）
        2、摁一下（事件）
        3、灯亮了 （业务逻辑  事件驱动）
     -->

3、DOM的结构

获取文档对象：document
获取html：document.documentElement
获取body: document.body

-----------------------------------------

<body>
    <div id="box" class="box"></div>
    <div id="box2" class="box"></div>
    <script type="text/javascript">
        // 1获取文档对象
        console.log(document);
        // 2.获取html
        console.log(document.documentElement);
        console.dir(document.documentElement);
        // 3获取body
        console.log(document.body);
        // 4.获取body中元素节点对象的三种方式
        // 4.1通过ID获取
        var oDiv = document.getElementById('box');
        console.log(oDiv);

        // 4.2 通过类名获取
        var oDiv1 = document.getElementsByClassName('box')[0];
        console.log(oDiv1);

        // 4.3 通过标签名获取
        var oDiv2 = document.getElementsByTagName('div')[1];
        console.log(oDiv2);


        // HTMLCollection(2) [div#box.box, div#box2.box, box: div#box.box, box2: div#box2.box]  获取的伪数组，不能使用数组的方法

    </script>

</body>

View Code