和我一起学习DOM(第一篇)-原创手记-慕课网

DOM第一篇
我们知道JavaScript由3个部分组成，ECMAScript、Dom 和 Bom，ECMAScript是对js进行了一系列的规范，有兴趣的学友可以去网上搜搜。今天来讲讲Dom的学习。
一、DOM概念知识
1.1、什么是DOM？

DOM（Document  Object Model）文档对象模型、也叫作文档树模型，是用来操作HTML和XML的一套API。

1.2、什么是文档树对象模型？

DOM将html文档看成了一个对象，html文档中的所有内容都封装成了一个一个的对象。

    1.2.1：所有的内容：标签、属性、文本、注释、这些都被封装成了对象。

    1.2.2：节点：这些被封装成的对象也叫作节点。分别有属性节点、注释节点、文本节点、标签节点。

    1.2.3：元素：我们最常用的是标签节点，也叫作元素。

1.3、什么是文档树模型？

由于html文档是具有层次结构的，所以看似树的模型，因此成为文档树模型。
我们可以通过属性结构很清楚的找到与某一个节点有关系的节点，比如：父节点（parent）、兄弟节点（sibling）、子节点（child）。

图片描述

1.4、XML

XML（Extensible Markup Language）可扩展性标记语言，通常用于配置文件，或者和json一样用于数据交互。
    //形式例如：
    <student>
            <name>小明</name>     
            <age>20</age>
            <gender>男</gender>
    </student>

1.5、API

API（Application Programming Interface）应用程序编程接口，其实就是一大堆的方法，我们可以把API想象成是工具，而我们做不同的事情需要不同的工具。

DOM：就是用来操作页面元素的一套工具；

BOM：就是用来操作浏览器一些行为的一套工具。

1.6、体验DOM

        var img = document.getElementById（"img"）
        cosnole.log(img);
        console.dir(img);

    --根据id去获取页面中的元素，然后在控制台输出

    console.log这种输出，显示的结果是标签的形式；

    console.dir这种输出，显示的结果是对象的形式；

（小提示：在DOM中，script标签写到</body>的上面，不要写到title的下面，会报错。）

1.7、事件的介绍

JavaScript和html之间的交互过程是通过事件来实现的，所谓的事件就是文档或者浏览器窗口发生的一些特定的交互瞬间，而JavaScript是一门事件驱动的脚本语言。

事件三要素：

    1：事件源：触发事件的元素；

    2：事件名称：触发事件的名称；

    3：事件处理函数：触发事件时调用的函数。

注册事件的两种方式：

    one：行内式注册事件：

            <img src="images/1.jpg" id="img" onclick="changePic()">
              这种方式不推荐使用，不好维护，结构，样式，行为分离

    two：内嵌式注册事件：

            var img = document.getElementById("img");
                img.onclick=function(){
                  alert("你好");
                }
               推荐使用这种，可以很好的维护代码
    （在内嵌事件中，
                事件源就是 img这个元素，
                事件名称就是 click 事件，
                事件处理函数就是 function（）{ alert（“你好”）}
       ）

八、根据标签获取多个元素的方法

    例如：给多个div标签注册事件
        var divs = document.getElementsByTagName（“div”）;
            console.log(divs);
(注意：获取多个标签使用 document.getElementsByTagName； 而获取某个标签是使用：document.getElementById )

    这样根据标签名获取的元素，返回的是一个伪数组；

    伪数组：是可以跟数组一样进行遍历，但是不能使用数组的方法。

和我一起学习DOM(第一篇)原创