DOM文档对象模型（一）

一.概论

1.什么是dom

文档对象模型,W3C组织推荐的的处理可扩展标记语言的标准编程接口
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

文档：一个页面就是一个文档，DOM中使用document表示


元素：页面里所有的标签都是元素，DOM中使用element


节点：网页中所有的内容都是一个节点(标签，属性，文本，注释等),DOM中使用的node表示

文档页面从上往下加载,所以先有标签，js写在标签下面

2.dom能做什么

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
1.JavaScript 能改变页面中的所有 HTML 元素
3.JavaScript 能改变页面中的所有 HTML 属性
3.JavaScript 能改变页面中的所有 CSS 样式
4.JavaScript 能删除已有的 HTML 元素和属性
5.JavaScript 能添加新的 HTML 元素和属性
6.JavaScript 能对页面中所有已有的 HTML 事件作出反应
7.JavaScript 能在页面中创建新的 HTML 事件

3.dom树

HTML DOM 模型被结构化为对象树：

DOM可以把以上内容都看做对象。即文档是一个对象，根元素也是对象，元素也是对象，属性也是对象，文本也是对象

二.获取元素

1.根据ID获取

getElementById()方法，获取带有ID的元素对象

参数id是大小写敏感字符串
返回的是元素对象

    <div id="time">2019-9-9</div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer); // 返回的是对象
        console.dir(timer); // console.dir()打印返回的元素对象,更好的查看里面的属性和方法
    </script>

2.根据标签名获取

getElementsByTagName()方式返回带有指定标签名的对象集合

返回的是获取过来元素对象的集合,以伪数组的形式存储的
采取遍历的方式依次打印里面的元素对象
获取到的元素对象是动态的

element.getElementsByTagName() 可以得到这个元素里面的某些标签

<ul>
        <li>getElementsBytagName()获取1</li>
        <li>getElementsBytagName()获取2</li>
        <li>getElementsBytagName()获取3</li>
        <li>getElementsBytagName()获取4</li>
        <li>getElementsBytagName()获取5</li>
    </ul>
    <ul id="nav">
        <li>获取1</li>
        <li>获取2</li>
        <li>获取3</li>
        <li>获取4</li>
        <li>获取5</li>
    </ul>
    <script>
        // 1.返回的是获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(typeof lis);
        console.log(lis[0]);
        // 2.采取遍历的方式依次打印里面的元素对象
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3.获取到的元素对象是动态的
        // 4.element.getElementsByTagName() 可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 获取nav元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>

3.通过HTML5新增的方式获取

1.document.getElementsByClassName(‘类名’),根据类名返回元素对象集合

     var boxs = document.getElementsByClassName('box');

2.document.querySelector(‘选择器’)根据指定选择器返回第一个元素对象

 var firstBox = document.querySelector('.box');
var nav = document.querySelector('#nav');
var firstLi = document.querySelector('li');

3.document.querySelectorAll(‘选择器’) 根据指定选择器返回所有元素对象集合

  var allBox = document.querySelectorAll('.box');

返回的也是伪数组

4.特殊元素获取

1. document.body获取body元素，返回body元素对象

 var bodyEle = document.body;

2. document.documentElement返回html元素对象

 var htmlEle = document.documentElement;

三.事件

1.概论

可以被js侦测到的行为（触发–响应机制）
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。
事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

2.事件三要素

事件源：事件被触发对象
事件类型：如何触发的什么事件
事件处理程序：通过函数赋值的方式完成

    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮 弹出对话框
        // 事件三要素 事件源，事件类型，事件处理程序
        // 1.事件源，事件被触发对象 这里是按钮
        var btn = document.getElementById('btn');
        // 2.事件类型,如何触发什么事件
        btn.onclick = function() {
       // 3.事件处理程序
            alert('点秋香');
        }
    </script>

3.DOM事件流

事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个转播过程即是dom事件流

注意
js代码中只能执行捕获或者冒泡其中的一个阶段
实际开发中很少使用事件捕捉，一般更关注事件冒泡
有些事件没有冒泡，比如onblur,onfocus,onmouseenter,onmouseleave
onclick和attachEvent只能得到冒泡阶段

4.执行事件步骤

执行事件步骤
1.获取事件源
2.注册事件(绑定事件)常用鼠标事件
3.添加事件处理程序(采用函数赋值形式)

 <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div，控制台输出'我被选中了'
        // 1.获取事件
        var div = document.querySelector('div');
        // 2.绑定事件
        // div.onclick
        // 3.添加事件处理程序
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>