版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
JavaScriptDOM介绍演讲人：XXXXXXJavaScript+Vue.jsWeb开发实战教程05学习目标掌握JavaScript中DOM元素的用法掌握JavaScript中DOM事件的监听方法能够独立操作DOM元素能够编写DOM事件能够独立创建JavaScript的事件监听器思维导图5.1DOM简介DOM是一种用于处理和操作HTML、XML和XHTML等文档的编程接口，其将整个文档表示为一个由节点组成的树状结构。其中，每个节点代表文档中的元素、属性、文本或其他类型的内容。开发者可以使用JavaScript访问、修改和操作文档中的元素和其他内容。DOM提供了一系列的方法和属性，用于查找和选择特定的元素，添加、删除和修改元素，以及修改元素的属性和样式等。当网页被加载时，浏览器会创建页面的DOM，即HTMLDOM。HTMLDOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。通过DOM可以访问所有的HTML元素（包括它们所包含的文本和属性）。HTMLDOM被构造为对象的树，即HTMLDOM树，如图所示。HTMLDOM树由3种主要类型的节点组成：元素节点、文本节点和属性节点。5.1DOM简介其中，元素节点表示文档中的HTML元素，文本节点表示元素节点中的文本内容，而属性节点表示元素节点的属性。图HTMLDOM树5.2DOM元素DOM元素是构成网页的基本单元，对应HTML中的标签（包含其属性和内容），是DOM中的核心节点类型。在JavaScript中，可以通过document对象提供的方法来操作网页中的DOM元素。document对象是DOM的入口对象，即文档的根节点，代表整个HTML文档。window.document属性就指向document对象。只要浏览器开始载入HTML文档，document对象就存在了，程序可以直接调用该对象。通过document对象，JavaScript可以实现动态修改HTML页面。document对象能够获取并修改页面中的HTML元素。document对象能够操作HTML元素的属性。document对象能够更改HTML元素的CSS样式。document对象能够响应用户交互行为。document对象01可以使用JavaScript中的getElementById()方法实现通过id查找HTML元素。该方法接收一个字符串作为参数，该字符串即所要查找元素的id属性值。借助getElementById()方法，开发者可以直接获取具有指定id的HTML元素对象，并对该元素进行各种操作，如修改其内容、样式、属性等。这种方式适用于需要精确定位某个特定元素并对其进行操作的情况。通过id查找HTML元素025.2DOM元素可以使用JavaScript中的getElementsByClassName()方法实现通过class查找HTML元素。该方法接收一个字符串作为参数，该字符串即所要查找元素的class属性值。借助getElementsByClassName()方法，开发者首先可以获取具有指定class的所有HTML元素对象的集合，返回一个数组；然后通过遍历数组，或者使用索引访问和操作这些元素。通过class查找HTML元素时，可以根据共同的class属性批量选择多个元素，以便对这些元素进行统一操作。例如，查找class为"intro"的元素。如果找到该元素，则getElementsByClassName()方法返回该元素对象的数组；如果未找到该元素，则返回null。示例如下。varx=document.getElementsByClassName("intro");通过class查找HTML元素03可以使用JavaScript中的getElementsByTagName()方法实现通过标签名查找HTML元素。该方法接收一个字符串作为参数，该字符串即所要查找元素的标签名。借助getElementsByTagName()方法，开发者首先可以获取具有指定标签名的所有HTML元素对象的集合，返回一个数组；然后通过遍历数组，或者使用索引访问和操作这些元素。这种方式适用于需要选择和操作一组具有相同标签的元素的情况，如修改内容、设置样式、添加事件等。例如，查找所有<p>标签的元素，代码如下所示。vary=x.getElementsByTagName("p");通过标签名查找HTML元素045.2DOM元素改变HTML输出流是指通过JavaScript动态地修改或替换HTML文档中的内容。通过改变HTML输出流，开发者可以实现动态更新页面内容。在JavaScript中，document.write()方法可用于直接向HTML输出流写内容。例如，在网页中输出当前时间，代码如下所示（位置：单元5/5-1.html）。改变HTML输出流05<!DOCTYPEhtml>
<html>
<body>
<script>
document.write(newDate());
</script>
</body>
</html>5.2DOM元素使用innerHTML属性可以修改HTML内容。该方法可以将新的HTML代码或纯文本赋值给元素的innerHTML属性，从而实现内容的修改。修改HTML内容的语法如下所示。document.getElementById(id).innerHTML=新的HTML代码或纯文本例如，修改<p>标签的内容，代码如下所示（位置：单元5/5-2.html）。修改HTML内容06修改HTML属性是指获取所需要修改的HTML节点，并改变HTML节点的属性，即将新的内容赋值给HTML属性。修改HTML属性的语法如下所示。document.getElementById(id).attribute=newvalue修改HTML属性07<html>
<body>
<pid="p1">HelloWorld!</p>
<script>
document.getElementById("p1").innerHTML="Newtext!";
</script>
</body></html>5.2DOM元素例如，修改图片的src属性，代码如下所示（位置：单元5/5-3.html）。创建新的HTML元素的方法如下：首先使用createElement()方法创建一个新的HTML元素节点，然后通过appendChild()方法将其插入文档中的特定位置。例如，创建一个<p>标签，并设置<p>标签的内容为“Thisisnew.”，将其插入id为“div1”的节点后面，代码如下所示（位置：单元5/5-4.html）。创建新的HTML元素08<!DOCTYPEhtml><html>
<body>
<imgid="image"src="image/round2.png"/>
<script>
document.getElementById('image').src='image/round1.png';
</script>
</body></html>图
修改图片的src属性在网页中的实现效果5.2DOM元素<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
</head>
<body>
<divid="div1">
<pid="p1">Thisisaparagraph.</p>
<pid="p2">Thisisanotherparagraph.</p>
</div>
<script>
varpara=document.createElement('p');
varnode=document.createTextNode('Thisisnew.');
para.appendChild(node);
varelement=document.getElementById('div1');
element.appendChild(para);
</script>
</body></html>图
动态插入节点在网页中的实现效果5.2DOM元素使用JavaScript的removeChild()方法可以删除指定的HTML元素。例如，删除id为“p2”的子节点，代码如下所示（位置：单元5/5-5.html）。删除指定的HTML元素09<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8"/>
</head>
<body>
<divid="div1">
<pid="p1">Thisisaparagraph.</p>
<pid="p2">Thisisanotherparagraph.</p>
</div>
<script>
//获取父元素
constparentDiv=document.getElementById('div1');
//获取要删除的子元素
constchildP=document.getElementById('p2');
//删除子元素
parentDiv.removeChild(childP);
</script>
</body></html>图
删除指定的HTML元素在网页中的实现效果5.2DOM元素使用DOM改变元素的CSS样式，是指通过使用元素的style属性可以访问和修改元素的CSS样式，语法如下所示。document.getElementById(id).perty=newstyle例如，修改id为“p2”的元素的样式，设置颜色是蓝色，代码如下所示（位置：单元5/5-6.html）。使用DOM改变元素的CSS样式10<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
</head>
<body>
<pid="p2">HelloWorld!</p>
<script>
document.getElementById('p2').style.color='blue';
</script>
<p>Theparagraphabovewaschangedbyascript.</p>
</body></html>图
修改指定的HTML元素的样式在网页中的实现效果5.3DOM事件DOM事件是在HTML文档中发生的特定交互或操作引发的反应。通过JavaScript的DOM事件处理机制，开发者可以捕获和处理用户的交互行为，如单击、鼠标指针移入、键盘输入等。常见的DOM事件包括单击（click）事件、鼠标指针移入（mouseover）事件、鼠标按键被按下事件（mousedown）、元素内容改变（change）事件、页面加载完成（load）事件等。每个事件都有相应的事件对象，可以通过事件对象获取相关的信息，如触发事件的元素、鼠标指针的位置、按下的键等。5.3.1click事件click事件是一种常见的DOM事件，其在用户单击（或触摸）特定元素时触发，即当用户单击元素时，click事件会被触发，从而执行相应的事件处理程序。如需在单击某个元素时执行一段代码，可以给某个HTML元素添加onclick属性，语法如下所示。onclick=JavaScript代码例如，给h1元素添加click事件，当单击h1元素上的内容时，会改变其内容，代码如下所示（位置：单元5/源文件/脚本5-7.html）。<!DOCTYPEhtml>
<html>
<body>
<h1onclick="this.innerHTML='Ooops!'">单击文本!</h1>
</body>
</html>5.3.2load和unload事件load和unload是两个常见的DOM事件，它们分别在页面加载完成和页面被关闭时触发。load事件在整个HTML文档及其所有相关资源（如图片、样式、脚本等）都加载完成时触发。当页面完全加载时，可以执行一些需要在页面加载完成后进行的操作，如初始化页面、绑定事件、加载数据等。语法如下所示。//方法1：在body元素上添加onload属性<bodyonload="checkCookies()">//方法2：在window对象上绑定load事件window.onload=function(){}unload事件在用户即将离开页面或关闭页面时触发。该事件通常用于执行一些清理操作，如保存用户数据、发送请求、取消定时器等。5.3.3change事件change事件在用户改变一个表单元素的值并提交、事件失去焦点或用户选择其他选项时触发，即当元素的值发生改变时，change事件会被触发，从而执行相应的事件处理程序。通过监听change事件并编写相应的事件处理函数，开发者可以实现对表单元素值的实时监测、自动保存或提交数据、动态更新页面内容等。change事件为开发者提供了一种与用户的输入交互并响应变化的方式，以增强表单的交互性和用户体验。5.3.3change事件<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8"/>
</head>
<body>
<inputtype="text"id="fname"onchange="upperCase(this.value)"/>
<script>
functionupperCase(value){
varfname=document.getElementById('fname');
fname.value=value.toUpperCase();
}
</script>
</body></html>图
给元素添加change事件在网页中的实现效果例如，当用户改变输入字段的内容时，会触发Change事件并调用upperCase()函数，代码如下所示（位置：单元5/5-8.html）。5.3.4mouseover和mouseout事件mouseover和mouseout分别在鼠标指针悬停在元素上方（鼠标指针移入）和鼠标指针离开元素（鼠标指针移出）时触发，这两个事件通常用于实现与鼠标交互相关的效果，如在鼠标指针悬停在元素上方时显示提示信息、改变元素的样式或内容、触发动画效果等。开发者可以在事件处理函数中编写相应的代码来实现这些效果。例如，当鼠标指针悬停在元素上方时文字为“ThankYou”，当鼠标指针离开元素时文字变为“MouseOverMe”，代码如下所示（位置：单元5/源文件/脚本5-9.html）。<!DOCTYPEhtml><html>
<head>
<metacharset="utf-8"/>
</head>
<body>
<div>
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="
background-color:#d94a38;
width:120px;
height:20px;
padding:40px;
"
MouseOverMe
</div><script>
functionmOver(obj){
obj.innerHTML='ThankYou';
}
functionmOut(obj){
obj.innerHTML='MouseOverMe';
}
</script>
</body></html>（a）鼠标指针移入前b）鼠标指针移入后5.3.5mousedown和mouseup事件mousedown和mouseup分别在鼠标按键被按下和鼠标按键被松开时触发，这两个事件通常用于实现与鼠标交互相关的效果，如拖曳、调整大小、绘图等。监听鼠标按键被按下和鼠标按键被松开这两个事件，可以实现在特定的鼠标操作期间进行相应的操作。例如，当鼠标按键被按下时文字为“ReleaseMe”，当鼠标按键被松开时将文字变为“ThankYou”，代码如下所示（位置：单元5/5-10.html）。<!DOCTYPEhtml><html>
<body>
<div>
onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="
background-color:#d94a38;
width:90px;
height:20px;
padding:40px;
"
ClickMe
</div>
<script>
functionmDown(obj){
obj.style.backgroundColor='#1ec5e5';
obj.innerHTML='ReleaseMe';
}
functionmUp(obj){
obj.style.backgroundColor='#D94A38';
obj.innerHTML='ThankYou';
}
</script>
</body></html>（a）鼠标按键被按下后（b）鼠标按键被松开时5.4.1添加事件监听器JavaScript的addEventListener()函数可以为元素添加事件监听器。该函数接收3个参数：事件类型、事件处理函数和一个可选的布尔值，用于指定事件是在冒泡阶段还是捕获阶段触发。addEventListener()函数的语法如下所示。//为元素添加事件监听器element.addEventListener(event,function,useCapture);5.4.2为元素添加多个事件监听器
addEventListener()函数允许向同个元素添加多个事件监听器，且不会覆盖已存在的事件；同时，如果添加了多个同样的事件，那么对应的函数都会被执行。例如，给同一个元素添加两个click事件，那么myFunction和mySecondFunction都会执行，代码如下所示。element.addEventListener("click",myFunction);element.addEventListener("click",mySecondFunction);也可以为同一个元素添加不同类型的事件。例如，同时添加mouseover、click和mouseout事件，代码如下所示。element.addEventListener("mouseover",myFunction);element.addEventListener("click",mySecondFunction);element.addEventListener("mouseout",myThirdFunction);addEventListener()函数同样可以给HTMLDOM对象（如HTML元素、HTML文档对象、window对象等）添加事件监听器。例如，当用户重置窗口大小时添加事件监听器，代码如下所示。window.addEventListener("resize",function(){
document.getElementById("demo").innerHTML=sometext;});5.4.3事件冒泡与事件捕获事件冒泡是指事件从触发事件的元素开始逐级向上传播至文档根节点的过程。当一个元素触发了某个事件时，事件会从触发元素开始冒泡到它的父元素，再到父元素的父元素，一直传播到文档根节点。在事件冒泡阶段，可以在父元素或祖先元素上捕获事件、处理事件或对事件进行进一步操作。事件捕获是指事件从文档根节点逐级向下传播至触发事件的元素的过程。当一个元素触发了某个事件时，事件首先从文档根节点开始传播，逐级向下，直到到达触发事件的元素。在事件捕获阶段，可以在父元素上捕获事件，从而提前处理事件或干预事件的默认行为。默认情况下，事件的传播是按照冒泡机制进行的。也就是说，事件首先在元素上触发，然后沿着DOM树向上冒泡。同时，也可以通过在事件监听器中设置useCapture参数为true来开启事件捕获机制，语法如下所示。addEventListener(event,function,useCapture);5.4.4移除事件监听器removeEventListener()函数用来移除由addEventListener()函数添加的事件监听器。一般在离开页面时需要移除事件监听器，否则事件会一直存在于内存中，影响页面性能。该函数的语法如下所示。element.removeEventListener("mousemove",myFunction);例如，当页面加载完成后，给ul元素绑定click事件，单击时弹窗显示当前单击元素的文本内容，当页面即将卸载时移除事件监听器，代码如下所示（位置：单元5/5-11.html）。5.4.4移除事件监听器<html>
<body>
<ulid="my-list">
<li>Listitem1</li>
<li>Listitem2</li>
<li>Listitem3</li>
</ul>
<script>
window.onload=function(){
varmyList=document.querySelector('#my-list');
myList.addEventListener('click',function(event){
if(event.target.tagName==='LI'){
alert('Clickedon:'+event.target.textContent);}
});
};
window.onunload=function(){
varmyList=document.querySelector('#my-list');
myList.removeEventListener('click');
};
</script>
</body></html>图
给元素绑定click事件和移除click事件在网页中的实现效果【商业案例】
学生信息管理系统——查看和删除学生信息任务1开发“查看学生信息”弹窗图中所示为“查看学生信息”弹窗，弹窗顶部中间有标题，右边有关闭按钮；中间部分是学生信息，包括序号、学号、姓名、学院、专业、年级、班级和年龄等；右下角是“取消”按钮，当单击“取消”按钮或关闭按钮时会关闭弹窗。用<div>标签作为弹窗的容器。用<div>标签将弹窗内容分为3个部分，标题部分使用<h4>标签进行标识，内容部分使用<p>标签分割每一个字段，并使用<input>输入框作为内容输入区域，输入框不支持修改，所以需要添加disabled属性将输入框的修改功能禁用；底部使用<button>标签定义“取消”按钮，并添加class属性。结构分析01图“查看学生信息”弹窗【商业案例】
学生信息管理系统——查看和删除学生信息使用HTML的标签实现页面的大致布局并搭建网页结构，同时给标签加上不同的类名和id属性，方便添加样式代码和绑定不同事件，代码如下所示（位置：学生信息管理系统-JavaScript版/index.html）。页面布局与结构搭建02<divclass="modalviewfade"id="viewmodal">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<iid="closeViewModal">X</i>
<h4>查看学生信息</h4>
</div>
<divclass="modal-body">
<p>序号：<inputtype="text"class="viewStyle"disabled/></p>
<p>学号：<inputdisabledtype="text"/></p>
<p>姓名：<inputdisabledtype="text"/></p>
<p>学院：<inputdisabledtype="text"/></p>
<p>专业：<inputdisabledtype="text"/></p>
<p>年级：<inputdisabledtype="text"/></p>
<p>班级：<inputdisabledtype="text"/></p>
<p>年龄：<inputdisabledtype="text"/></p>
</div>
<divclass="modal-footer">
<buttonclass="viewButton_no">取消</button>
</div>
</div>
</div></div>【商业案例】
学生信息管理系统——查看和删除学生信息#movemodal{
position:fixed;
left:0px;
top:0px;
right:0px;
bottom:0px;
background:rgba(0,0,0,0.5);
display:none;}.viewButton_no{
width:93px;
height:38px;
border-radius:4px;
background:#fff;
color:#808080;
outline:none;
cursor:pointer;
border:1pxsolid#aeaeae;}有了页面结构后，需要定义不同DOM结构的样式，以使弹窗更美观，样式代码如下所示（位置：学生信息管理系统-JavaScript版/index.css）。任务2给“查看”按钮添加click事件【商业案例】
学生信息管理系统——查看和删除学生信息1．结构分析在index.js中需要添加几个事件：单击页面中的“查看”按钮时打开弹窗，所以需要给“查看”按钮绑定click事件，同时需要将选择的学生信息展示在弹窗中；打开弹窗后单击关闭按钮或“取消”按钮会关闭弹窗，所以需要给这两个按钮绑定click事件。2．添加函数定义viewStudent()函数，用来查看学生信息，并在页面初始化时调用该函数。首先获取“查看”按钮的DOM元素，并绑定click事件，在单击时将弹窗打开。打开弹窗的同时需要获取选择的学生信息，并将数据回填到弹窗中的输入框里。然后获取关闭按钮和“取消”按钮的DOM元素，并绑定click事件，当单击任一按钮时关闭弹窗。【商业案例】
学生信息管理系统——查看和删除学生信息constviewStudent=()=>{
constviewBtn=document.querySelectorAll('.viewInf');
viewBtn.forEach((btn)=>{
btn.onclick=()=>{
constviewModal=document.querySelector('#viewmodal');
viewModal.style.display='block';
consttr=btn.parentNode.parentNode;
consttdNodes=Array.from(tr.children).slice(1,9);
constmodalInputs=document.querySelectorAll(
'#viewmodal.modal-bodyinput'
);
modalInputs.forEach((input,index)=>{
input.value=tdNodes[index].innerHTML;
});
};
});
constcancelUpdate=document.querySelector('.viewButton_no');代码如下所示（位置：学生信息管理系统-JavaScript版/index.js）。【商业案例】
学生信息管理系统——查看和删除学生信息
constcloseModal=document.querySelector('#closeViewModal');
cancelUpdate.onclick=()=>{
consteditModal=document.querySelector('#viewmodal');
editModal.style.display='none';
};
closeModal.onclick=function(){
consteditModal=document.querySelector('#viewmodal');
editModal.style.display='none';
};};constinit=()=>{
len=document.querySelectorAll('#tdatatr').length;
page=len%pageSize===0?len/pageSize:Math.ceil(len/pageSize);//根据记录条数，计算页数
curPage=1;
displayPage(); //显示第一页
switchPage();
addStudent(); //新增学生信息
editStudent(); //修改学生信息
viewStudent(); //查看学生信息
deleteStudent(); //删除学生信息};【商业案例】
学生信息管理系统——新增和修改学生信息任务3给“删除”按钮添加click事件在单击“删除”按钮时，会将选择的学生信息从学生信息列表中删除，所以需要给“删除”按钮绑定click事件。结构分析01定义deleteStudent()函数，用来删除学生信息，并在页面初始化时调用该函数。获取“删除”按钮的元素，绑定click事件，在单击时获取当前选择的学生信息所在行，并将所有选中的元素删除，删除完成后查询学生信息列表数据。添加函数02【商业案例】
学生信息管理系统——新增和修改学生信息代码如下所示（位置：学生信息管理系统-JavaScript版/index.js）。constdeleteStudent=()=>{
c
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 铜陵市辅警招聘考试题库及答案
- 人类学题目及答案
- 2025年行唐县社区工作者招聘考试真题及答案
- 新生儿科黄疸题库及答案
- 遂宁市专职消防员招聘面试题及答案
- 绥化市专职消防员招聘考试题库及答案
- 内分泌科痛风管理试题及答案
- 十堰市护士招聘笔试题及答案
- 深圳市专职消防员招聘笔试题及答案
- 韶关市护士招聘面试题及答案
- 中科曙光入职测试答案
- 对外投资合作国别（地区）指南 2025 -卡塔尔
- GA 991-2025爆破作业项目管理要求
- 湖南矿产行业现状分析报告
- 2026年学习教育查摆问题清单及整改措施台账（四个方面16条）
- 2025年四川省成都市小升初语文试卷
- 2025 小学高年级写作竞争合作主题的探讨课件
- 2025年5月浙江省水务集团下属企业招聘拟聘用人员（一）笔试历年难易错考点试卷带答案解析
- 2024年消防文员招录考试刷题专用试题及完整答案解析
- 雨课堂学堂在线学堂云《机械原理及设计（北京航空航天）》单元测试考核答案
- 2026年新版八年级下学期道德法治核心知识点资料
评论
0/150
提交评论