JavaScript进阶内容——DOM详解

当我们已经熟练掌握JavaScript的语法之后，我们就该进入更深层次的学习了

首先我们思考一下：JavaScript是用来做什么的？

JavaScript诞生就是为了能够让它在浏览器中运行

那么DOM就是我们学习中不可或缺的一个环节，下面让我们深入了解DOM

DOM简介

DOM定义：

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

DOM作用：

用来修改网页内容，结构和样式

DOM树：

我们用一个图片来表示（来自B站黑马程序员Pink老师）

获得元素

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

那么如果要操作元素，最基本的就是要先获得元素：

ID获得元素：

代码：

//注意这里返回的是元素对象

document.getElementById('ID');

案例展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="div1"></div>

<script>

    //1.我们常常把script放在body的内部下方

    //2.get 获得 Element 元素 by 通过 Id

    //3.注意ID是大小写敏感

    //4.返回的是一个元素对象

    var div1 = document.getElementById('div1');

    //这里正常输出

    console.log(div1);

    //这里dir表示更好的输出（展示其整体内容）

    console.dir(div1);

</script>

</body>

</html>

标签名获取元素：

代码：

//注意这里返回的是元素对象集合

document.getElementsByTagName('TagName')；

//可以获得某个父元素中的全部元素对象集合

element.getElementsByTagName('TagName')；

案例展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <ol id="ol">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ol>

    <script>

        //这里是整个body中的li，返回的是元素对象集合

        var lis = document.getElementsByTagName('li');

        console.log(lis);

        //通过遍历获得集合中各个元素对象

        for (const iterator of lis) {

            console.log(iterator);

        }

        //当li为空，仍旧返回数组，但为空数组（伪数组）

        //我们可以单独获得ol中的li

        var ol = document.getElementById('ol');

        var ollis = ol.getElementsByTagName('li');

        //通过遍历获得集合中各个元素对象

        for (const iterator of ollis) {

            console.log(iterator);

        }

    </script>

</body>

</html>

类名获取元素(HTML5)：

代码：

document.getElementByClassName('类名');

案例展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="nav"></div>

    <div class="box"></div>

    <div class="box">

        <ul>

            <li></li>

            <li></li>

        </ul>

    </div>

    <script>

        //1.通过类名获得对象

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

        console.log(box);

        //2.document.querySelector('.box')我们可以获得选择器中的第一个

        var fristBox = document.querySelector('.box');

        //3。上方的获取方法同样适用于id选择，注意需要用‘’包括

        var nav = document.querySelector('#nav');

        //4.同样使用于标签选择

        var fristLi = document.querySelector('li');

        //5.document.querySelectorAll()获取所有的类型的集合

        var allLi = document.querySelectorAll('li');

    </script>

</body>

</html>

获得特殊标签body和html元素

代码：

//body元素

document.body

//html元素

document.documentElement

案例展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        //1.获得body元素

        var bodyEle = document.body;

        console.log(bodyEle);

        console.dir(bodyEle);

        //2.获得html元素

        var htmlEle = document.documentElement;

        console.log(htmlEle);

    </script>

</body>

</html>

事件基础

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

页面中的每个元素都可以产生某些触发JavaScript的事件，简单来说就是产生：触发——响应机制

事件三要素

我们把事件分为三部分：

事件源
- 事件被触发的对象
事件类型
- 如何触发，例如点击onclick
事件处理程序
- 通过一个函数赋值的方法完成

我们下面给出基本格式：

name.methodName = function() {

    ~~~

    ~~~

}

我们给出一个基础案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button id="but">按钮</button>

    <script>

        //我们下面做出的：点击按钮就会弹出“你好”的对话框

        //1.获得事件源

        var button = document.getElementById('but');

        //2.针对事件源，给出事件类型和事件处理程序（这里指点击事件）

        button.onclick = function() {

            alert("你好");

        }

    </script>

</body>

</html>

事件类型概括

我们下面给出所有可用到的事件类型：

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

操作元素

我们学习事件的目的就是为了对元素进行修改

下面我们依次介绍一些操作元素的方法：

元素内容修改

元素内容修改有两种方法：

//element.innerText不识别HTML标签，会去除空格和换行

element.innerText = '';

//element.innerHTML识别HTML标签，不会去除空格和换行(推荐)

element.innerHTML = '';

//注意：我们可以通过上述方法来获得该元素的内容

除内容修改外，元素属性同样也可以进行修改：

//我们需要把下述图片修改放于某元素的事件中就可以进行修改

img.src = '';

案例展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button id="but">按钮</button>

    <div class="box">时间~~~~</div>

    <script>

        //当我们点击按钮，将box内容更改为当前时间

        //获得元素

        var button = document.getElementById('but');

        var timer = document.querySelector(".box");

        //做出事件

        button.onclick = function() {

            //注意这里采用innerHTML，strong会以HTML的形式用来加粗内容而不会展示出来

            timer.innerHTML = "<strong>2022.7.20</strong>";

        }

    </script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button id="ldh">刘德华</button>

    <button id="zxy">张学友</button>

    <img src="data:images/ldh.jpg" alt="">

    <script>

        //首先我们获得按钮元素对象

        var ldh = document.getElementById('ldh');

        var zxy = document.getElementById('zxy');

        var img = document.querySelector('img');

        //然后设置事件：在点击该对象时更换到对应图片

        ldh.onclick = function(){

            img.src = "images/ldh.jpg";

            img.title = "刘德华";

        }

        zxy.onclick = function(){

            img.src = "images/zxy.jpg";

            img.title = "张学友";

        }

    </script>

</body>

</html>

表单元素修改

value内容修改：
```
input.value = '';
```

disabled禁用属性：

name.disabled = true;

this.disable = true;

下面我们给出一个案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button>按钮</button>

    <input type="text" value="请输入内容">

    <script>

        //首先我们需要获取元素

        var btn = document.querySelector('button');

        var input = document.querySelector('input');

        //在我们点击按钮后，input内容变为已提交且button本身不能二次提交

        btn.onclick = function() {

            //首先对input进行更换value

            input.value = "已提交";

            //再对btn进行禁止操作(可以采用this表示本身)

            this.disabled = true;

        }

    </script>

</body>

</html>

样式属性操作：

//单个修改属性，适用于修改内容不多

this.style.属性内容 = ~~~;

样式整体属性操作：

//CSS重新创建类属性，在元素中加入对应类，进行属性修改，适用于大幅度修改属性

this.className = '';

下面我们给出一个案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .divv {

            height: 400px;

            width: 400px;

            background-color: red;

        }

        .change {

            height: 200px;

            width: 200px;

            background-color: aqua;

            font-size: 20px;

        }

    </style>

</head>

<body>

    <div id="div1" class="divv"></div>

    <div id="div2" class="divv"></div>

    <div id="div3" class="divv">123</div>

    <script>

        //我们希望点击上方盒子，然后盒子样式发生变化

        //获得元素

        var div1 = document.getElementById('div1');

        var div2 = document.getElementById('div2');

        var div3 = document.getElementById('div3');

        //针对第一个盒子，当我们点击它，它变为紫色

        div1.onclick = function() {

            this.style.backgroundColor = 'purple';

        }

        //针对第二个盒子，当我们点击它，它消失

        div2.onclick = function(){

            this.style.display = 'none';

        }

        //针对第三个盒子，修改内容过多，我们采用className方法

        div3.onclick = function(){

            //注意：如果之前class的部分样式未修改，需要把之前样式也加上，形成多class对象

            this.className = "divv change";

        }

    </script>

</body>

</html>

自定义属性

首先我们了解一下自定义属性：

并非HTML自带的，但是可以在标签中写入的属性，被称为自定义属性
自定义属性没有规范，可以随意任命
但H5给了我们自定义属性规范：以data-开头，后面加上其他内容

然后我们讲一下获得属性值的方法：

//获得属性值（只能获得内置属性，即自身携带属性）

element.属性;

//获得属性值（可以获得所有属性，包括自定义属性）

element.getAttribute('属性');

然后我们讲一下设置属性值的方法：

//注意：下面两种方法中针对class的设置不同

//设置属性值（内置属性）

对象.属性名 = '属性值';

name.className = 'class1';

//设置属性值（所有属性）

对象.setAttribute('属性名','属性值');

name.setAttribute('class','class1');

最后我们讲一下删除属性值的方法：

//注意：大部分删除自定义属性

name.removeAttribute('属性名');

下面我们通过一个案例来解释：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 这里的index就是自定义属性 -->

    <div class="class1" data-index=1></div>

    <script>

        var div = document.querySelector('div');

        //首先是获得属性的方法

        // 1.element.属性;

        console.log(div.className);

        // 2.element.getAttribute('属性');

        console.log(div.getAttribute('data-index'));

        // 然后讲解修改方法：

        // 1.对象.属性名 = '属性值';

        div.className = '';

        // 2.对象.setAttribute('属性名','属性值');

        div.setAttribute('data-index',2);

        // 最后删除方法：

        // name.removeAttribute('属性名');

        div.removeAttribute('data-index');

    </script>

</body>

</html>

排他思想（算法）

当我们有同一组元素，我们希望某个元素实现某种样式，就需要用到循环的排他思想：

将所有元素全部清除样式
给当前元素设置样式

我们给出一个案例来解释排他思想：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        button {

            height: 20px;

            width: 40px;

        }

    </style>

</head>

<body>

    <ul>

        <button></button><button></button><button></button><button></button><button></button>

    </ul>

    <script>

        //我们希望点击某个按钮时，只有当前按钮发生变化（变红色），其他按钮保持原有状态

        //首先我们获得所有元素

        var btns = document.getElementsByTagName('button');

        //依次设计点击状态

        for(var i=0;i<btns.length;i++){

            btns[i].onclick = function(){

                //首先全部设置为最初状态

                for(var j=0;j<btns.length;j++){

                    btns[j].style.backgroundColor = '';

                }

                //然后针对当前元素进行修改

                this.style.backgroundColor = 'red';

            }

        }

    </script>

</body>

</html>

节点操作

节点操作的具体作用：

用来获得元素，且具有逻辑性地获得元素

节点概述：

节点操作的主要操作时元素节点操作
页面内所有内容都是节点，在DOM中，节点使用node表示
HTML DOM中所有节点均可以通过JavaScript进行访问，所有HTML元素节点均可以被修改，也可以创建或删除

节点基本属性：

节点类型nodeType
节点名称nodeName
节点值nodeValue

节点分类：

元素节点nodeType = 1
属性节点nodeType = 2
文本节点nodeType = 3

节点层级

我们在使用节点时，通常利用DOM树把节点划分为不同的层级关系

父级节点

对象.parentNode

得到的是元素最近的父节点
如果找不到父节点，返回为null

案例展示:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 父节点案例 -->

    <div class="father">

        <div class="son"></div>

    </div>

    <script>

        //1.通过子节点找到父节点

        //首先获得子节点

        var son_1 = document.querySelector('.son');

        //通过子节点获得父节点

        console.log(son_1.parentNode);

    </script>

</body>

</html>

子节点

对象.children

常用，因为我们基本上只对元素进行修改
获得的元素是集合，需要采用[]获得单个元素
这里获得的是全部子元素节点

拓展：

对象.childrens

获得的元素是集合，需要采用[]获得单个元素
这里获得的是全部子节点，包括元素节点，文本节点

案例展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!-- 子节点案例 -->

    <ul>

        <li>我是li</li>

        <li></li>

        <li></li>

        <li></li>

        <li>我是li</li>

    </ul>

    <script>

        // 这里我们只介绍children

        // 首先我们获得父节点

        var ul = document.querySelector('ul');

        // 然后根据父节点获得子节点：

        console.log(ul.children);

    </script>

</body>

</html>

第一个子元素和最后一个子元素

对象.firstChild

对象.lastChild

可以获得第一个和最后一个子节点
可以获得所有节点：元素节点和文本节点

对象.firstElementChild

对象.lastElementChild

可以获得第一个和最后一个子元素节点
只能获得元素节点

对象.children[0]

对象.children[对象.children.length - 1]

实际案例常用方法
因为第一个包含文本节点，第二个具有兼容性问题，所以当前常用该方法进行选择

兄弟节点

对象.nextSibling

对象.previousSibling

获得下一个和上一下兄弟节点
包括所有节点：元素节点和文本节点

对象.nextElementSibling

对象.previousElementSibling

获得下一个和上一下兄弟元素节点
只包括元素节点

节点操作

创建节点

document.createElement('tagName')

创建由tagName指定的HTML元素
因为元素原先不存在，是根据我们的需求动态生成的，所以称为动态创建元素节点

添加节点

node.appendChild(child)

将一个节点添加到指定父节点的末尾

添加节点到指定位置

node.insertBefore(child,指定元素)

将一个节点放到指定元素前面

案例展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <ul>

        <li>123</li>

    </ul>

    <script>

        // 创建节点

        var li = document.createElement('li');

        // 添加节点

        var ul = document.querySelector('ul');

        ul.appendChild(li);

        // 添加到指定元素

        var li2 = document.createElement('li');

        ul.insertBefore(li2,ul.children[0]);

    </script>

</body>

</html>

删除节点

node.removeChild(child)

删除指定节点

复制节点

node.cloneNode()

复制某一结点
括号里面为true，表示深拷贝，复制内容
括号里面为空或者false，表示浅拷贝，不复制内容
节点并未出现在页面，如果希望出现该节点，需要插入该节点

事件高级内容

我们在前面已经掌握了事件的基本方法，接下来我们来学习进阶内容：

注册事件概述

给元素添加事件，被称为注册事件或者绑定事件

注册事件有两种方法：

传统注册方法：
- 注册事件具有唯一性
- 同一元素同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数
事件监听方法：
- 注册事件可以有多个处理函数，依次执行
- eventTarget.addEventListener(type,listener[,useCapture])
- 该方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数
- type：事件类型字符串，比如click，mouseover，注意：这里不需要带on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，一个布尔值，默认false；这里暂时不做讲解

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button>传统方法</button>

    <button>监听方法</button>

    <script>

        var btns = document.querySelectorAll('button');

        // 1.传统方法

        // 传统方法只能有一个函数调用，后面覆盖前面

        btns[0].onclick = function(){

            alert('1');

        }

        btns[0].onclick = function(){

            alert('2');

        }

        // 2.监听方法（IE9之前不能用）

        // 监听方法会依次调用所有函数

        // 注意：事件类型加''，是字符串，不能带on

        btns[1].addEventListener('click',function(){

            alert('1');

        })

        btns[1].addEventListener('click',function(){

            alert('2');

        })

    </script>

</body>

</html>

删除事件概述

给元素删除事件，被称为删除事件或者解绑事件

删除事件有两种方法：

传统解绑方法：
- eventTarget.onclick = null;
监听解绑方法：
- eventTarget.removeEventListener('click',fn);
- eventTarget是监听对象
- 'click'是监听对象的操作
- fn是监听对象所使用的方法

代码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            height: 400px;

            width: 400px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div>1</div>

    <div>2</div>

    <script>

        var divs = document.querySelectorAll('div');

        // 1.传统删除方法

        divs[0].onclick = function(){

            alert('1');

            // 在点击一次后删除其效果

            divs[0].onclick = null;

        }

        // 2.removeEventListener删除事件

        // 首先我们div对象所使用的函数必须采用有名称的函数

        var fn = function (){

            alert('1');

            // 在所使用的函数中使用删除事件方法

            divs[1].removeEventListener('click',fn);

        }

        divs[1].addEventListener('click',fn);

    </script>

</body>

</html>

DOM事件流

事件流描述的是从页面接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

DOM事件流分为3个阶段：

捕获阶段
当前目标阶段
冒泡阶段

事件冒泡：IE最早提出，事件开始时由具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐层向下传播到最具体的元素接收过程

我们通过一些代码来解释：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .father {

            height: 400px;

            width: 400px;

            background-color: pink;

        }

        .son {

            height: 200px;

            width: 200px;

            background-color: purple;

            margin: auto;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">son</div>

    </div>

    <script>

        var son = document.querySelector('.son');

        // 注意:下述代码具有互斥性,测试时请先注释掉其中一部分

        // 注意:JS代码中只能执行捕获或者冒泡的其中一个阶段

        // 注意:onclick只能得到冒泡阶段,要研究捕获阶段,需要采用addEventListener,且第三个参数为true时,属于捕获阶段

        // 捕获阶段: document-> html -> body -> father -> son

        // 冒泡阶段: son -> father -> body -> html -> document

        // 首先先来解释捕获

        // 当我们对他们均设置function方法,当执行一个底部对象的函数,我们需要按照顺序先执行上方的函数

        // 例如:下面的代码,当我们点击son,会先输出father的2,再输出son的1

        son.addEventListener('click',function(){

            alert('1');

        },true);

        son.parentNode.addEventListener('click',function(){

            alert('2');

        },true);

        // 对于冒泡也是同理

        // 我们执行底层对象的函数时,需要按照顺序先从下面的函数执行,然后逐渐执行上面的函数

        son.addEventListener('click',function(){

            alert('1');

        });

        son.parentNode.addEventListener('click',function(){

            alert('2');

        });

    </script>

</body>

</html>

事件对象

首先我们先来介绍一下事件对象：

事件对象是指事件函数的参数
它通常用e，evt，event来命名
事件对象不需要传递，是系统自动生成的
事件对象包含了跟事件有关的一系列信息数据，它是一个集合，包含许多属性和方法

案例展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            height: 400px;

            width: 400px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <script>

        var divs = document.querySelectorAll('div');

        // function中的参数event就是事件对象

        // 不需要传递参数，是系统自动形成，可以任意命名

        divs[0].onclick = function (event) {

            // 我们可以查看event所包含的内容

            console.log(event);

        }

        // 使用addEventListener方法 以及 其他操作也是可以的

        // 鼠标就会展示鼠标相关信息，键盘就会展示键盘相关信息

        divs[1].addEventListener('mouseover',function(event){

            console.log(event);

        })

    </script>

</body>

</html>

下面我们介绍一下常见事件对象的属性和方法：

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6~ie8使用
e.type	返回事件的类型，比如click，mouseover
e.cancelBubble	该属性阻止冒泡非标准 ie6~ie8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6~ie8使用比如不让链接跳转
e.preventDefault()	该属性阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation()	阻止冒泡标准

下面我们用代码形式分开介绍一些属性和方法：

e.target和this的区别：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            height: 300px;

            width: 300px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div>111</div>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <script>

        var div = document.querySelector('div');

        // 首先我们介绍一下target

        div.onclick = function(e) {

            // target是指触发该事件的对象，即你点击哪里就是哪个对象触发

            console.log(e.target);

        }

        // 然后我们稍微区别一下this

        // this永远只是指调用对象本体

        var ul = document.querySelector('ul');

        ul.addEventListener('click',function(e){

            // 这里this指向的永远是ul

            console.log(this);

            // 这里target，当你点击的是li时，返回的对象是li

            console.log(e.target);

        })

    </script>

</body>

</html>

阻止默认行为：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div>123</div>

    <a href="https://www.baidu.com/">百度</a>

    <form action="https://www.baidu.com/">

        <input type="submit" value="提交" name="sub">

    </form>

    <script>

        var div = document.querySelector('div');

        var a = document.querySelector('a');

        var input = document.querySelector('input');

        // 我们在这里稍微介绍一下type属性

        // 首先我们设置一个函数

        fn = function(e) {

            console.log(e.type);

        }

        // 然后我们把这个函数应用到某些对象的某些操作中

        div.addEventListener('click',fn);

        div.addEventListener('mouseover',fn);

        div.addEventListener('mouseout',fn);

        // 接下来我们介绍阻止默认行为：e.preventDefault（）方法

        // 正常情况下我们点击连接会进行跳转，我们点击提交按钮会进行信息提交

        // 但是当我们采用了阻止默认行为,我们的这些行为就会被组织

        // 采用e的方法来阻止默认行为

        a.addEventListener('click',function(e){

            // 注意是方法,需要带()

            e.preventDefault();

        })

        // 我们也可以采用return false来阻止默认行为

        input.onclick = function(e){

            // 注意return方法只能在传统方法中使用,在addEventListener中无法使用

            return false;

        }

    </script>

</body>

</html>

阻止事件冒泡：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .father {

            height: 400px;

            width: 400px;

            background-color: pink;

        }

        .son {

            height: 200px;

            width: 200px;

            background-color: purple;

            margin: auto;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son">son</div>

    </div>

    <script>

        var son = document.querySelector('.son');

        // 当我们采用stopPropagation时,冒泡不再进行

        son.addEventListener('click',function(e){

            alert('1');

            // 我们对son进行冒泡禁止处理,当点击son时仅对son的函数输出

            e.stopPropagation();

        });

        son.parentNode.addEventListener('click',function(){

            alert('2');

            // 我们未对father进行冒泡禁止处理,所以点击father时,document的函数alert('3')仍会输出

        });

        son.parentNode.parentNode.addEventListener('click',function(){

            alert('3');

        });

    </script>

</body>

</html>

事件委托

事件委托解释：

事件委托被称为时间代理，在jQuery中被称为事件委派

事件委托原理：

不在每个子节点单独设置事件监听器，而是将事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

事件委托的作用：

我们仅需要操作一次DOM，提高了程序的性能

案例解释：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <ul>

        <li>点击我弹出弹框</li>

        <li>点击我弹出弹框</li>

        <li>点击我弹出弹框</li>

        <li>点击我弹出弹框</li>

        <li>点击我弹出弹框</li>

    </ul>

    <script>

        // 将事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

        var ul = document.querySelector('ul');

        ul.addEventListener('click',function(e){

            // 当点击时,弹出弹框

            alert('弹框');

            // 我们也可以针对点击的对象来进行一些操作

            e.target.style.backgroundColor = 'black';

        })

    </script>

</body>

</html>

鼠标事件拓展

我们在前面给出了一些鼠标操作：

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

下面我们再介绍一些另类的鼠标事件：

禁止右键选中：

document.addEventListener('contextmenu',function(e){

    //禁止contextmenu右键鼠标操作

	e.preventDefault();

})

禁止选中文字：

document.addEventListener('selectstart',function(e){

    //禁止selectstart选中文字

	e.preventDefault();

})

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合

我们首先来学习鼠标事件对象：

鼠标属性	说明
e.clientX	当前可视页面的x
e.clientY	当前可视页面的y
e.pageX	当前页面的x（不具有兼容性）
e.pageY	当前页面的y（不具有兼容性）

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <title>Document</title>

    <style>

        body {

            height: 3000px;

        }

    </style>

</head>

<body>

    <script>

        // 接下里都是鼠标对象的属性

        // 这里表示在页面内点击时

        // 注意只能用addEventListener,传统方法不能使用

        document.addEventListener('click',function(e){

            // 这里获得的是针对当前可视页面的x,y

            console.log(e.clientX);

            console.log(e.clientY);

            // 分割线

            console.log('------------------')

            // 这里获得的是针对当前页面的x,y(针对IE9以上版本)

            console.log(e.pageX);

            console.log(e.pageY);

        })

    </script>

</body>

</html>

键盘事件和键盘事件对象

我们先来学习键盘事件：

键盘事件	说明
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发（不能识别功能键，如ctrl，shift，左右箭头）

注意：

三个时间的执行顺序：keydown -> keypress -> keyup

然后我们来了解一下键盘事件对象：

键盘事件对象属性	说明
e.key	返回相应键（不具备兼容性，不推荐）
e.keyCode	返回相应键的ASCII值（具有兼容性，推荐）

注意：

keyup和keydown事件中不区分大小写，均为大写输出
keypress事件区分大小写，A：65，a：97

案例展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        // 下述都是针对页面操作:

        document.addEventListener('keyup',function(){

            console.log('弹起')

        })

        document.addEventListener('keydown',function(){

            console.log('按下down')

        })

        document.addEventListener('keypress',function(){

            console.log('按下press')

        })

        // 接下来我们讲解一下keyCode:

        // 注意:keydown不区分大小写,keypress区分大小写

        document.addEventListener('keydown',function(e){

            console.log('down:' + e.keyCode);

        })

        document.addEventListener('keypress',function(e){

            console.log('press:' + e.keyCode);

        })

    </script>

</body>

</html>

结束语

好的，那么关于DOM的全部知识点总结完毕！

下一节我会对BOM做出详解，并且在JavaScript的内容结束后，会对DOM的各种实际网页应用做出各种案例模板，请多多关照！