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.获取元素

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

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

2.1 如何获取页面元素

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

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

2. 获取元素

2.2 根据 ID 获取

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

document.getElementById('id');

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

<body>
    <div id="time">2021-5-26</div>
    <script>
        // 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们把script标签写在下面
        // 2.get 获得 element 元素 by 通过 驼峰命名法
        // 3.参数 id 是大小写敏感的字符串
        // 4.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);     //<div id="time">2021-5-26</div>
        console.log(typeof timer);  //object
        // 5.console.dir    打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);     // div#time
    </script>
</body>

2.3 根据标签名获取

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

document.getElementsByTagName('标签名');

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的
如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

<body>
    <ul>
        <li>知否知否，应是1234</li>
        <li>知否知否，应是1234</li>
        <li>知否知否，应是1234</li>
        <li>知否知否，应是1234</li>
        <li>知否知否，应是1234</li>
    </ul>
    <ul id="nav">
        <li>skr~</li>
        <li>skr~</li>
        <li>skr~</li>
        <li>skr~</li>
        <li>skr~</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式储存的
        var lis = document.getElementById('li');
        console.log(lis);
        console.log(lis[0]);
        // 2.我们想要一次打印里面的元素对象 我们可以采取遍历的方式
        for(var i = 0; i < lis.length; i++){
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName() 可以得到这个元素里面的某种标签
        var nav = document.getElementById('nav'); //获得nav元素
        var navLis = nav.getElementsByTagName('li');
        console.log('navLis');
    </script>
</body>

2.4 通过 HTML5 新增的方法获取

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

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

document.querySelectorAll('选择器');// 根据指定选择器返回

注意：

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

2.5 获取特殊元素（body，html）

获取body元素

doucumnet.body // 返回body元素对象获取html元素

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

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

3. 事件基础

3.1 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发--- 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

3.2 事件三要素

事件源（谁）
事件类型（什么事件）
事件处理程序（做啥）

案例：点击按钮弹出警示框页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框。

案例分析

① 获取事件源（按钮）

② 注册事件（绑定事件），使用 onclick

③ 编写事件处理程序，写一个函数弹出 alert 警示框

实现代码

var btn = document.getElementById('btn'); btn.onclick = function() { alert('你好吗'); };

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

3.3 执行事件的步骤

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

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

3.3 常见的鼠标事件

3.4 分析事件三要素

下拉菜单三要素

关闭广告三要素

4. 操作元素

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

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>1123</p>
    <script>
        // 当我们点击了按钮，  div里面的文字会发生变化
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
            // div.innerText = '2019-6-6';
            div.innerHTML = getDate();
        }

        function getDate() {
            var date = new Date();
            // 我们写一个 2019年 5月 1日 星期三
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }
        // 我们元素可以不用添加事件
        var p = document.querySelector('p');
        p.innerHTML = getDate();
    </script>
</body>

4.1 改变元素内容

element.innerText 从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签 非标准  去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);  
        console.log(p.innerHTML);
    </script>
</body>

4.2 常用元素的属性操作

innerText、innerHTML 改变元素内容
src、href
id、alt、title

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

案例分析

① 根据系统不同时间来判断，所以需要用到日期内置对象

② 利用多分支语句来设置不同的图片

③ 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性

④ 需要一个div元素，显示不同问候语，修改元素内容即可

<style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="images/s.gif" alt="">
    <div>上午好</div>
    <script>
        // 根据系统不同时间来判断，所以需要用到日期内置对象
        // 利用多分支语句来设置不同的图片
        // 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
        // 需要一个div元素，显示不同问候语，修改元素内容即可
        // 1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2. 得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        // 3. 判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '亲，上午好，好好写代码';
        } else if (h < 18) {
            img.src = 'images/x.gif';
            div.innerHTML = '亲，下午好，好好写代码';
        } else {
            img.src = 'images/w.gif';
            div.innerHTML = '亲，晚上好，好好写代码';

        }
    </script>
    </body>

4.3 表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性： type、value、checked、selected、disabled

案例：仿京东显示密码点击按钮将密码框切换为文本框，并可以查看密码明文。

案例分析

① 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码

② 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框

③ 算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1

    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        // 1. 获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. 注册事件 处理程序
        var flag = 0;
        eye.onclick = function() {
            // 点击一次之后， flag 一定要变化
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; // 赋值操作
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }

        }
    </script>
</body>

4.4 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

element.style 行内样式操作
element.className 类名样式操作

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

注意：

1.JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor

2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

阶段三 Web APIs -day 1

1. DOM 简介

1.1 什么是 DOM

1.2 DOM 树

2.获取元素

2.1 如何获取页面元素

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

2. 获取元素

2.2 根据 ID 获取

2.3 根据标签名获取

2.4 通过 HTML5 新增的方法获取

2.5 获取特殊元素（body，html）

3. 事件基础

3.1 事件概述

3.2 事件三要素

3.3 执行事件的步骤

3.3 常见的鼠标事件

3.4 分析事件三要素

4. 操作元素

4.1 改变元素内容

4.2 常用元素的属性操作

4.3 表单元素的属性操作

4.4 样式属性操作