DOM树(下) -- 第八课

文章目录

前言
一、DOM属性操作
- 1. 获取属性值
- 2. 设置属性值
- 3. 移除属性值
二、节点
- 1.什么是节点?
- 2. 节点层级
- - 1. 获取父级节点
  - 2. 获取兄弟节点
  - 3. 获取子节点
- 3. 节点操作
- - 1. 创建节点
  - 2. 添加和删除节点
三、事件进阶
- 1. 注册事件
- - 1. 传统方式
  - 2. 监听方式
- 2. 删除事件
- 3. 事件流
四、事件对象
- 1. 什么是事件对象?
- 2. 事件对象的使用
- 3. 事件对象的常见属性和方法
- - 1. 对比e.target和this的区别
  - 2. 阻止默认行为
  - 3. 阻止事件冒泡
  - 4. 事件委托
- 4. 鼠标事件
- - 1. 鼠标事件对象
  - 2. 禁止鼠标右键
  - 3. 禁止选中
总结

前言

紧接上一节DOM的讲解,让我们继续来深究DOM的奥秘

一、DOM属性操作

1. 获取属性值

在DOM对象中可以使用“element.属性”的方式来获取内置的属性值，但是DOM对象并不能直接使用点语法获取到自定义属性的值，那么如何获取自定义属性值呢？

在DOM中，可以使用getAttribute（‘属性’'）方法来返回指定元素的属性值。接下来通过案例来演示如何获取属性值。

2. 设置属性值

在DOM对象中可以使用"element.属性-，值，"的方式来设置内置的属性值，并且针对于自定义属性，提供了"element.setAttribute（“属性”，"值）"的方式进行获取。

值得一提的是，设置了自定义属性的标签，在浏览器中的HTML结构中可以看到该属性。接下来通过案例来演示如何设置属性值。

3. 移除属性值

DOM对象可以使用removeAttribute()方法来移除属性值。该方法接受一个参数，即要移除的属性名。例如，下面的代码将从DOM对象中移除id属性的值：

let element = document.querySelector('div');

// 方法一
element.removeAttribute('id');

// 方法二
element .className = ' '

// 方法三
element .setAttribute('id',' ')

二、节点

1.什么是节点?

HTML文档可以看作是一个节点树，网页中的所有内容都是节点，一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性。下面列举常见的节点类型：

元素节点，nodeType为1
属性节点，nodeType为2
文本节点，nodeType为3，文本节点包含文字、空格、换行等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div class="box1" id="nav" a="1"></div>
    <script>
        // 使用getAttribute获取属性
        var box = document.querySelector('.box1');
        console.log(box.getAttribute('class'));

        // 直接获取id属性
        console.log(box.id);
        console.log(box.className);

        // 修改class的值
        box.className = 'box2'
        box.setAttribute('class','box2');

        // 自定义属性的操作,
        // console.log(box.a) // 自定义属性值不能直接通过上面的第二种方式来获取
        console.log(box.getAttribute('a'));
        console.log(box.setAttribute('a','11'));

        // 默认属性值可以通过两种方式进行获取
    </script>
</body>
</html>

2. 节点层级

1. 获取父级节点

在JavaScript中，可以使用parentNode属性来获得离当前元素的最近的一个父节I点，如果找不到父节点就返回为 null，语法格式为：obj.parentNode，obj是一个DOM对象

2. 获取兄弟节点

可以使用nextElementSibling返回当前元素的下一个兄弟元素节点，previo usElementSibling属性返回当前元素的上一个兄弟元素节点，如果找不到则返回null。

3. 获取子节点

在JavaScript中，可以使用childNodes属性或者children属性两种方式来获得当前元素的所有子节点的集合，接下来我们就分别介绍这两种方式的用法。

方式1：childNodes属性获得的是当前元素的所有子节点的集合，该集合为即时更新的集合。下面通过案例的形式演示如何获取当前元素子节点。

方式2：children属性获得的是当前元素的所有子节点的集合，不会获取到文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="1" ></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="box">
        <div class="demo">
            <a href="#" class="" id=""></a>
            <div>
                <img src="" alt="">
            </div>
        </div>
    </div>
    <script>
        var ul = document.querySelector('ul');
        var li = document.querySelector('li');
        var demo = document.querySelector('.demo');

        console.log(ul.innerHTML);
        
        var a = document.querySelector('a');
        // 获取父节点
        console.log(a.parentElement);
        console.log(a.parentNode);

        // 兄弟节点
        console.log(a.previousElementSibling);
        console.log(a.nextElementSibling);

        // 子节点
        // childNodes -- 可以获取到标签下面的所有东西,包括文本的标签,包括换行
        console.log(demo.childNodes);

        // 获取子标签,不包括换行
        console.log(demo.children);

    </script>
</body>
</html>

3. 节点操作

1. 创建节点

在DOM中，使用document.createElement（‘tagName’）方法创建由tagName指定I的HTML元素，也称为动态创建元素节点。

2. 添加和删除节点

DOM中，提供了node.appendChild()和node.insertBefore()方法用于添加节点，node.removeChild（child）用于删除节点。下面讲解这3种方法的使用。

appendChild()方法，将一个节点添加到指定父节点的子节点列表末尾
insertBefore（child，指定元素）方法，将一个节点添加到父节点的指定子节点前面
removeChild（child）用于删除节点，该方法从DOM中删除一个子节点，返回删除的节点

三、事件进阶

1. 注册事件

在JavaScript中，注册事件（绑定事件）有两种方式，即传统方式注册事件和事件监听方式注册事件。下面分别针对这两种方式进行讲解。

1. 传统方式

元素对象.事件 = 事件的处理程序；
//示例
oBtn.onclick = function（）{}

注意：该方式注册事件的特点在于注册事件的唯一性，即同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

2. 监听方式

使用addEventListener创建并添加新节点到DOM树中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        function fn(){
            console.log(1);
            btn.removeEventListener('click',fn);
        }
        btn.addEventListener('click',fn);
    </script>
</body>
</html>

2. 删除事件

DOM对象.onclick = null；传统方式删除事件
DOM对象.removeEventListener（type，callback）；//标准浏览器

3. 事件流

事件流是指当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流。

网景（Netscape）公司团队的事件流采用事件捕获方式，而微软（Microsoft）公司的事件流采用事件冒泡方式，W3C对网景公司和微软公
司提出的方案进行了中和处理，规定了事件发生后，首先实现事件捕获，但不会对事件进行处理；然后进行到目标阶段，执行当前元素对象的事件处理程序，但它会被看成是冒泡阶段的一部分；最后实现事件的冒泡，逐级对事件进行处理。

W3C规定的事件流的具体过程对比如下图所示：
请添加图片描述

四、事件对象

1. 什么是事件对象?

当一个事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是event。只有有了事件event才会存在，它是系统自动创建的，不需要传递参数。

2. 事件对象的使用

在IE11的开发人员工具中，在Chrome浏览器中的效果如右图所示：
请添加图片描述

3. 事件对象的常见属性和方法

在事件发生后，事件对象event中会包含一些所有事件都有的属性和方法。所有事件基本上都包括的常用的属性和方法如下表所示。
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var li = document.querySelector('li');
        var body = document.querySelector('body');
        ul.addEventListener('click',function(){console.log(ul);});
        li.addEventListener('click',function(){console.log(li);});
        body.addEventListener('click',function(){console.log(body);});

        // 事件流的三个阶段
        // 1.js代码中只能执行捕获或冒泡其中的一个阶段
        // 2.onclick只能捕获到冒泡阶段
        // 3.addEventListener可以得到捕获阶段,第三个参数协程true
        ul.addEventListener('click',function(){console.log(ul);},true);
        li.addEventListener('click',function(){console.log(li);},true);
        body.addEventListener('click',function(){console.log(body);},true);

    </script>
</body>
</html>

1. 对比e.target和this的区别

在事件处理函数中，e.target返回的是触发事件的对象，而this返回的是绑定事件的对象。

div.onclick = function(e) {
	var target = e. target; 
    console. log(target);
}

2. 阻止默认行为

在实际开发中，为了使程序更加严谨，想要确定含有默认行为的标签符合要求后，才能执行默认行为时，可利用事件对象的preventDefault（）方法，禁止所有浏览器执行元素的默认行为。需要注意的是，只有事件对象的cancelable属性设置为true，才可以使用preventDefault（）方法取消其默认行为。

3. 阻止事件冒泡

可以利用事件对象调用stopPropagation（），实现禁止所有浏览器的事件冒泡行为。

e.stopPropagation();

4. 事件委托

事件委托的原理是，不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每个子节点。

简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。

这样做的的优点在于，只操作了一次DOM，提高了程序的性能。

4. 鼠标事件

鼠标是计算机的一种输入设备，也是计算机显示系统纵横坐标定位的指示器，所以鼠标事件是Web开发中最常用的一类事件。常见的鼠标事件如下表所示：
请添加图片描述

1. 鼠标事件对象

鼠标事件对象MouseEvent，是跟鼠标事件相关的一系列信息的集合，可以用来获取当前鼠标的位置信息，鼠标事件位置属性如下表所示。请添加图片描述
鼠标移动案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <img src="./images/angel.gif" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            var x = e.pageX;
            var y = e.pageY;
            console.log(x,y);

            img.style.left = x - 30 +'px';
            img.style.top = y - 40 + 'px';
        })
    </script>
</body>
</html>

2. 禁止鼠标右键

contextmenu主要控制应该何时显示上下文菜单，主要应用于程序员取消默认的上下文菜单，示例代码如下。

document.addEventListener(' contextmenu', function (e) {
	e. preventDefault();
})

3. 禁止选中

selectstart事件是鼠标开始选择文字时就会触发，如果禁止鼠标选中，需要禁止该事件的默认行为，示例代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    禁止选中
    <script>
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })
    </script>
</body>
</html>