JavaScript进阶内容——DOM详解

前言

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

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

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

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

DOM简介

DOM定义：

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

DOM作用：

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

DOM树：

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

获得元素

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

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

ID获得元素：

代码：

//注意这里返回的是元素对象
document.getElementById('ID');

案例展示：




    
    
    
    Document

标签名获取元素：

代码：

//注意这里返回的是元素对象集合
document.getElementsByTagName('TagName')；
//可以获得某个父元素中的全部元素对象集合
element.getElementsByTagName('TagName')；

案例展示：

类名获取元素(HTML5)：

代码：

document.getElementByClassName('类名');

案例展示：




    
    
    
    Document

获得特殊标签body和html元素

代码：

//body元素
document.body
//html元素
document.documentElement

案例展示：




    
    
    
    Document

事件基础

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

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

事件三要素

我们把事件分为三部分：

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

我们下面给出基本格式：

name.methodName = function() {
    ~~~
    ~~~
}

我们给出一个基础案例：




    
    
    
    Document

事件类型概括

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

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

操作元素

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

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

元素内容修改

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

//element.innerText不识别HTML标签，会去除空格和换行
element.innerText = '';
//element.innerHTML识别HTML标签，不会去除空格和换行(推荐)
element.innerHTML = '';
//注意：我们可以通过上述方法来获得该元素的内容

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

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

案例展示：




    
    
    
    Document


    
    时间~~~~




    
    
    
    Document

表单元素修改

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

disabled禁用属性：

name.disabled = true;
this.disable = true;

下面我们给出一个案例：




    
    
    
    Document

样式属性操作：

//单个修改属性，适用于修改内容不多
this.style.属性内容 = ~~~;

样式整体属性操作：

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

下面我们给出一个案例：

自定义属性

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

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

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

//获得属性值（只能获得内置属性，即自身携带属性）
element.属性;
//获得属性值（可以获得所有属性，包括自定义属性）
element.getAttribute('属性');

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

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

//设置属性值（内置属性）
对象.属性名 = '属性值';
name.className = 'class1';
//设置属性值（所有属性）
对象.setAttribute('属性名','属性值');
name.setAttribute('class','class1');

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

//注意：大部分删除自定义属性
name.removeAttribute('属性名');

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




    
    
    
    Document

排他思想（算法）

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

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

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




    
    
    
    Document

节点操作

节点操作的具体作用：

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

节点概述：

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

节点基本属性：

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

节点分类：

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

节点层级

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

父级节点

对象.parentNode

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

案例展示:




    
    
    
    Document

子节点

对象.children

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

拓展：

对象.childrens

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

案例展示：

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

对象.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,指定元素)

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

案例展示：

删除节点

node.removeChild(child)

删除指定节点

复制节点

node.cloneNode()

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

事件高级内容

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

注册事件概述

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

注册事件有两种方法：

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

代码展示：




    
    
    
    Document

删除事件概述

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

删除事件有两种方法：

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

代码展示：

DOM事件流

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

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

DOM事件流分为3个阶段：

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

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

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




    
    
    
    Document
    


    
        son

事件对象

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

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

案例展示：




    
    
    
    Document

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

事件对象属性方法	说明
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的区别：

阻止默认行为：




    
    
    
    Document


    123
    百度

阻止事件冒泡：




    
    
    
    Document
    


    
        son

事件委托

事件委托解释：

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

事件委托原理：

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

事件委托的作用：

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

案例解释：




    
    
    
    Document


    
        点击我弹出弹框
        点击我弹出弹框
        点击我弹出弹框
        点击我弹出弹框
        点击我弹出弹框

鼠标事件拓展

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

鼠标事件	触发条件
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（不具有兼容性）

代码示例：




    
    
    
    Document

键盘事件和键盘事件对象

我们先来学习键盘事件：

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

注意：

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

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

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

注意：

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

案例展示：




    
    
    
    Document

结束语

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

相关阅读:
Springboot - 15.二级分布式缓存集成-Caffeine
echarts折线图修改特定点的颜色
【flink报错】flink cdc无主键时的操作
spring+pom-注意多重依赖时的兼容问题[java.lang.NoSuchMethodError]
JS手写深拷贝
web期末网站设计大作业：基于HTML+CSS+JavaScript制作新能源汽车企业网站
Action CLIIP：A New Paradigm for Video Action Recognition
SVN操作提示被锁定-清理命令Clean up
幂等性解决方案
Bellman-Ford算法与SPFA算法详解

原文地址：https://blog.csdn.net/JavaMonsterr/article/details/125912316