【JavaScript】17 - DOM

17、DOM

需要思考以下问题：

1. 什么是DOM
2. 如何获取页面元素
3. 如何给元素注册事件
4. 如何操作DOM元素的属性
5. 如何创建元素
6. 如何操作DOM节点

1、DOM简介

1.1 - 什么是DOM

文档对象模型（Document Object Model，简称DOM）， 是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C已经定义了一系列的 DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.2 - DOM树

• 文档：一个页面就是一个文档，DOM中使用document表示。
• 元素：页面中的所有标签都是元素，DOM中使用element示。
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）， DOM中使用node表示。

DOM把以上内容都看做是对象。

2、获取元素

2.1 - 如何获取页面元素

DOM在我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素呢？

获取页面中的元素可以使用以下几种方式：

• 根据ID获取；
• 根据标签名获取；
• 通过HTML 5新增的方法获取；
• 特殊元素获取。

2.2 - 根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象。

    <div id="time">2019-9-9</div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer); // <div id="time">2019-9-9</div>
        console.log(typeof timer); //object
        console.dir(timer); //div#time
    </script>

1. 因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面 ；

2. get获得；element元素；by通过；驼峰命名法。

3. 参数id是大小写敏感的字符串；

4. console.dir(timer)返回的是一个元素对象。

2.3 - 根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

        document.getElementsByTagName('li');

注意：

1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。

2. 得到元素对象是动态的。

还可以获取某个元素（父元素）内部所有指定标签名的子元素。

        element.getElementsByTagName('标签名');

注意：

元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。

    <ol>
        <li>豆沙1号</li>
        <li>豆沙2号</li>
        <li>豆沙3号</li>
        <li>豆沙4号</li>
        <li>豆沙5号</li>
    </ol>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis); //[li, li, li, li, li]
        console.log(lis[0]);
        /*遍历伪数组*/
        for (var i = 0; i < lis.length; i++) {
     
            console.log(lis[i]);
        }
        // element.getElementsByTagName('标签名' );父元素必须是指定的单个元素
        /*第1种方法*/
        var ol = document.getElementsByTagName('ol'); // [ol]
        console.log(ol[0].getElementsByTagName( 'li' )); //[li, li, li, li, li]
        /*第2种方法*/
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));//[li, li, li, li, li]
    </script>

• 返回的是获取过来元素对象的集合以伪数组的形式存储的；
• 我们想要依次打印里面的元素对象我们可以采取遍历的方式；
• 如果页面中只有一个li返回的还是伪数组的形式；
• 如果页面中没有这个元素返回的空的伪数组的形式；

2.4 - 通过HTML5新增的方法获取

1. 通过类名返回元素对象集合：

        document.getElementsByClassName('类名'); //根据类名返回元素对象集合

2. 返回指定选择器返回第一个元素对象：

        document.querySelector('选择器'); //根据指定选择器返回第一个元素对象

3. 返回指定选择器的所有对象：

        document.querySelectorAll( '选择器');//根据指定选择器返回所有元素对象集合

示例：

    <div class="box">菠萝</div>
    <div class="box">盒菠萝</div>
    <div id="nav">
        <ul>
            <li>豆沙</li>
            <li>豆沙</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);//[div.box, div.box]
        // 2. querySelector 返回指定选择器的第一个元素对象;切记里面的选择器需要加符号.box #nav
        var firstBox = document.querySelector('.box ');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll( )返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox); //[div.box, div.box]
        var lis = document.querySelectorAll('li');
        console.log(lis); //[li, li]
    </script>

2.5 - 获取特殊元素( body , html )

1. 获取body元素

        doucumnet.body //返回body元素对象

2. 获取html元素

        document.documentElement //返回htm1元素对象

示例：

        // 1. 获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);

3、事件基础

3.1 - 事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

简单理解：触发响应机制。

网页中的每个元素都可以产生某些可以触发JavaScript的事件；例如：我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件是有三部分组成：

• 事件源；
• 事件类型；
• 事件处理程序。

点击一个按钮，弹出对话框

    <button id="btn">豆沙</button>
    <script>
        //(1) 事件源事件被触发的对象：按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型：如何触发：鼠标点击(onclick)
        //(3) 事件处理程序：通过一个函数赋值的方式完成
        btn.onclick = function() {
     
            alert('啃菠萝');
        }
    </script>

3.2 - 执行事件的步骤

1. 获取事件源；
2. 注册事件（绑定事件）；
3. 添加事件处理程序（采取函数赋值形式）。

点击div；控制台输出我被选中了。

    <div>豆沙</div>
    <script>
        // 1.获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件注册事件：div.onclick
        // 3.添加事件处理程序
        div.onclick = function() {
     
            console.log('我被选中了');
        }
    </script>

3.3 - 常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

3.4 - 分析事件三要素

下拉菜单三要素；

关闭广告三要素。

4、操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元索来改变元素里面的内容、属性等。注意以下都是属性。

4.1 - 改变元素内容

        element.innerText

从起始位置到终止位置的内容，但它去除html标签， 同时空格和换行也会去掉。

        element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。

当我们点击了按钮，div里 面的文字会发生变化：

    <button>点击获取豆沙</button>
    <div>？？？？</div>
    <script>
        /* 获取元素 */
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        /* 注册事件 */
        btn.onclick = function() {
            div.innerText = '豆沙'
        }

也可以不需要事件；直接修改元素内容：

    <p>某个时间</p>
    <script>
        var p = document.querySelector('p');
        p.innerText = getDate();

        function getDate() {
     
            var date1 = new Date;
            var year = date1.getFullYear(),
                month = date1.getMonth() + 1,
                dates = date1.getDate(),
                arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
            day = date1.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>

4.1.1 - innerText和innerHTML 的区别

1. innerText不识别html标签；去除空格和换行。
2. innerHTML能识别并解析html标签；W3C标准；保留空格和换行。

这两个属性是可读写的可以获取元素里面的内容。

4.2 - 常用元素的属性操作

1. innerText、 innerHTML 改变元素内容；

2. src、href

3. id、alt、title

点击按钮；切换图片：

    <button id="yaya">鸭鸭</button>
    <button id="yaya2">不鸭</button><br>
    <img src="./img/yaya.webp" alt="鸭鸭">
    <script>
        /* 获取元素 */
        var yaya = document.getElementById("yaya"),
            yaya2 = document.getElementById("yaya2"),
            img = document.querySelector("img");
        /* 注册事件 */
        yaya2.onclick = function() {
     
            img.src = './img/yaya2.webp';
            img.title = '不鸭';
        }
        yaya.onclick = function() {
     
            img.src = './img/yaya.webp';
            img.title = '鸭鸭';
        }
    </script>

案例：分时显示不同图片，显示不同问候语

• 根据不同时间，页面显示不同图片，同时显示不同的问候语。
• 如果上午时间打开页面，显示上午好，显示上午的图片。
• 如果下午时间打开页面，显示下午好，显示下午的图片。
• 如果晚上时间打开页面,显示晚上好，显示晚上的图片。

案例分析：

1. 根据系统不同时间来判断，所以需要用到日期内置对象；
2. 利用多分支语句来设置不同的图片；
3. 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性；
4. 需要一个div元素，显示不同问候语，修改元素内容即可。

    <img src="./img/goodmorning.gif">
    <div></div>
    <script>
        /* 获取元素 */
        var div = document.querySelector('div'),
            img = document.querySelector("img");
        /* 获取当前的小时 */
        var date = new Date(),
            h = date.getHours();
        /* 条件判断 */
        if (h < 12) {
     
            img.src = "./img/goodmorning.gif";
            div.innerText = '早上好';
        } else if (h < 18) {
     
            img.src = "./img/goodafternoon.gif";
            div.innerText = '下午好';
        } else {
     
            img.src = "./img/goodnight.gif";
            div.innerText = '晚上好';
        }
    </script>

4.3 - 表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

    <button>按钮</button>
    <input type="text" value="请输入内容">