您现在的位置是：首页 > WEB开发 > 正文

WEB开发

JavaScript进阶内容——DOM详解

1987web2024-03-25WEB开发107

JavaScript进阶内容——DOM详解当我们已经熟练掌握JavaScript的语法之后，我们就该进入更深层次的学习了首先我们思考一下：JavaScript是用来做什

JavaScript进阶内容——DOM详解当我们已经熟练掌握JavaScript的语法之后，我们就该进入更深层次的学习了首先我们思考一下：JavaScript是用来做什么的？ JavaScript诞生就是为了能够让它在浏览器中运行那么DOM就是我们学习中不可或缺的一个环节，下面让我们深入了解D ...

JavaScript进阶内容——DOM详解

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

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

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

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

DOM简介

DOM定义：

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

DOM作用：

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

DOM树：

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

获得元素

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

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

ID获得元素：

代码：

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

案例展示：

标签名获取元素：

代码：

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

案例展示：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document12345 id="ol">12345类名获取元素(HTML5)：

代码：

document.getElementByClassName(类名);

案例展示：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document id="nav"> class="box"> class="box">获得特殊标签body和html元素

代码：

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

案例展示：

事件基础

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

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

事件三要素

我们把事件分为三部分：

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

我们下面给出基本格式：

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

我们给出一个基础案例：

事件类型概括

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

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

操作元素

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

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

元素内容修改

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

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

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

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

案例展示：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document id="but">按钮 class="box">时间~~~~ lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document id="ldh">刘德华 id="zxy">张学友 src="https://www.cnblogs.com/qiuluoyuweiliang/p/images/ldh.jpg"alt="">表单元素修改

value内容修改：

input.value=;

disabled禁用属性：

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

下面我们给出一个案例：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document按钮 type="text"value="请输入内容">

样式属性操作：

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

样式整体属性操作：

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

下面我们给出一个案例：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document.divv{height:400px;width:400px;background-color:red;}.change{height:200px;width:200px;background-color:aqua;font-size:20px;} id="div1"class="divv"> id="div2"class="divv"> id="div3"class="divv">123自定义属性

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

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

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

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

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

//注意：下面两种方法中针对class的设置不同//设置属性值（内置属性）对象.属性名=属性值;name.className=class1;//设置属性值（所有属性）对象.setAttribute(属性名,属性值);name.setAttribute(class,class1);

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

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

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

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document class="class1"data-index=1>排他思想（算法）

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

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

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

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Documentbutton{height:20px;width:40px;}

节点操作

节点操作的具体作用：

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

节点概述：

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

节点基本属性：

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

节点分类：

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

节点层级

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

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

案例展示:

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document class="father"> class="son">子节点对象.children常用，因为我们基本上只对元素进行修改获得的元素是集合，需要采用[]获得单个元素这里获得的是全部子元素节点

拓展：

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

案例展示：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document我是li我是li第一个子元素和最后一个子元素对象.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,指定元素)将一个节点放到指定元素前面

案例展示：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document123删除节点node.removeChild(child)删除指定节点复制节点node.cloneNode()复制某一结点括号里面为true，表示深拷贝，复制内容括号里面为空或者false，表示浅拷贝，不复制内容节点并未出现在页面，如果希望出现该节点，需要插入该节点

事件高级内容

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

注册事件概述

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

注册事件有两种方法：

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

代码展示：

删除事件概述

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

删除事件有两种方法：

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

代码展示：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=, initial-scale=1.0">Documentdiv{height:400px;width:400px;background-color:pink;}

DOM事件流

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

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

DOM事件流分为3个阶段：

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

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

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

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document.father{height:400px;width:400px;background-color:pink;}.son{height:200px;width:200px;background-color:purple;margin:auto;} class="father"> class="son">son

事件对象

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

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

案例展示：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=, initial-scale=1.0">Documentdiv{height:400px;width:400px;background-color:pink;}

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

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

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

e.target和this的区别：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Documentdiv{height:300px;width:300px;background-color:pink;}

111

123

阻止默认行为：

123

href="https://www.baidu.com/">百度 action="https://www.baidu.com/"> type="submit"value="提交"name="sub">阻止事件冒泡： lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document.father{height:400px;width:400px;background-color:pink;}.son{height:200px;width:200px;background-color:purple;margin:auto;} class="father"> class="son">son

事件委托

事件委托解释：

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

事件委托原理：

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

事件委托的作用：

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

案例解释：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=device-width, initial-scale=1.0">Document点击我弹出弹框点击我弹出弹框点击我弹出弹框点击我弹出弹框点击我弹出弹框

鼠标事件拓展

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

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

禁止右键选中：

document.addEventListener(contextmenu,function(e){//禁止contextmenu右键鼠标操作e.preventDefault();})

禁止选中文字：

document.addEventListener(selectstart,function(e){//禁止selectstart选中文字e.preventDefault();})

鼠标事件对象

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

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

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

代码示例：

lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible"content="IE=edge"> name="viewport"content="width=, initial-scale=1.0">Documentbody{height:3000px;}

键盘事件和键盘事件对象

我们先来学习键盘事件：

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

注意：

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

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

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

注意：

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

案例展示：

结束语

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

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

WEB开发

JavaScript进阶内容——DOM详解

JavaScript进阶内容——DOM详解

DOM简介

获得元素

事件基础

事件三要素

事件类型概括

操作元素

节点操作

节点层级

节点操作

事件高级内容

注册事件概述

删除事件概述

DOM事件流

事件对象

事件委托

鼠标事件拓展

鼠标事件对象

键盘事件和键盘事件对象

结束语

c语言二级指针是什么

Ant Design-vue 解决input前后空格问题(推荐)

相关文章