本文详细讲解了H5中DOM操作技巧，包括通过ID、标签名和类名获取元素，以及使用新方法获取元素。介绍了事件基础、执行过程、键盘事件，并重点讲解了动态生成表格、事件委托和鼠标右键菜单屏蔽。此外，还涉及了元素内容修改、属性修改、样式操作和事件监听与删除。
目录
JS的组成
ECMA JavaScript JS的基本语法
DOM
BOM:实现网页交互功能
API：应用程序编程接口，是一些预先定义的函数
WEB API：浏览器提供一套操作浏览器和页面元素的API，主要做浏览器交互效果，WEB API 一般都有输入和输出（函数的传参和返回值），WEB API很多都是方法（函数）
DOM
DOM简介
Document Object Model
文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，W3C已经定义了一系列的DOM接口，通过这些接口可以改变网页内容、结构和样式。
DOM树
文档：document 一个页面就是一个文档
元素：element 页面中所有的标签都是元素
节点:node 网页中所有内容都是节点（标签、属性、文本、注释）
DOM把以上元素都看作对象
获取元素
通过ID获取
通过getElementById（）获取元素
1.文档页面从上往下加载，得先有标签，script写在标签下面
2.get获得element元素by通过驼峰命名法
3.参数id是大小写敏感的字符串
4.返回的是元素对象object
通过getElementsByTagName()获取某类标签元素
1.返回的是获取过来的元素对象的集合，以伪数组的形式存储
2.想要打印里面的元素对象，可以采用遍历的方式
3.得到的元素是动态的
4.如果页面中只有一个元素，返回的依旧是伪数组
根据标签名获取
获取某个元素（父元素）内部所有的指定标签名的子元素
父元素必须是指定的单个对象，不能是数组，获取是不包括父元素
<div id="time">2022-6-8</div>
<script>
var timer=document.getElementById('time');
console.log(timer)
console.log(typeof timer)
console.dir(timer)
</script> <ul>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
for(var i=0;i<lis.length;i++){
console.log(lis[i])
}
</script><ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<script>
var ol=document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>H5新增获取元素的方式
通过类名获取元素
1.getElementsByClassName 根据类名获取某些元素集合
2.querySelector返回指定选择器的第一个元素对象
3.document.querySelctorAll('选择器') 根据指定选择器返回所有对象
<div class="box"></div>
<div class="box"></div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var boxs=document.getElementsByClassName('box');
console.log(boxs);
</script> <ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var boxs=document.getElementsByClassName('box');
console.log(boxs);
var firstBox=document.querySelector('.box');
console.log(firstBox);
var nav=document.querySelector('#nav');
console.log(nav);
var li=document.querySelector('li');
</script>获取body元素
document.body 返回body元素对象
document.documentElement 返回html元素对象
事件基础
点击一个按钮，弹出对话框
1.事件由三部分组成 事件源 事件类型 事件处理程序 事件源：事件被触发的对象
var botton=document.getElementById('btn')
事件类型：如何触发 什么时间
事件监听方式：同一个事件可以绑定多个事件类型
addEventListener(type,callback,[capture]
type:表示事件类型，click load mouseover
事件删除方式：
DOM对象.事件名=null
DOM对象.removeEventListener(type,claaback)
<body> <button id="btn"></button> <script> var btn=document.getElementById('btn') btn.onclick=function(){ alert('点秋香') } </script> </body>
执行事件过程
1.获取事件源
2.绑定事件\注册事件 div.onclick
3.添加事件处理程序
<script> var div=document.querySelector('div') div.onclick=function(){ console.log('我被选中了') } </script>
事件流：发生事件元素节点和DOM数根节点之间按照特定的顺序进行传播
网景：事件捕获
微软：事件冒泡
W3C ：中和，捕获+冒泡
事件对象event：每个事件处理程序中事件对象是默认存在的
e.target 返回事件触发对象 e.type 返回事件类型 e.stopPropagation 阻止事件冒泡 e.preventDefault 阻止默认事件 <a href=""></a> <button>事件对象</button> <script> let btn=document.querySelector('buttom') let a1=document.querySelector('a') btn.addEventListener('click',function(e){ console.log('事件对象',e.target) console.log('事件类型',e.type) e.stopPropagation }) a1.addEventListener('click',function(e){ e.preventDefault }) </script>事件委托：子元素不注册事件，父元素注册事件，事件处理程序在父元素的事件中执行
<ul> <li>西安</li> <li>长沙</li> <li>北京</li> <li>深圳</li> </ul> <script> let ul=document.querySelector('ul') ul.addEventListener('click',function(e){ console.log('test',e.target) // 指向事件触发的对象 子元素 console.log('this',this) // 指向事件绑定的对象 父元素 e.target.style.backgroundColor='pink' }) </script>
如何在页面中屏蔽鼠标右键菜单栏
在页面中禁止选中
document.addEventListener('contextmenu',function(e){ e.preventDefault // 关闭鼠标右键菜单栏 }) document.addEventListener('selectstart',function(e){ e.preventDefault // 关闭鼠标选中 })
鼠标事件对象
mouseEvent 跟鼠标事件相关的一系列信息的集合
1.鼠标的位置 mousemove
clientX x坐标（浏览器页面当前窗口的可视区域） clientY y坐标 screenX x坐标（屏幕中的） screenY y坐标 pageX x坐标（文档坐标） pageY Y坐标 <script> document.addEventListener('mousemove',function(e){ console.log(e.clientX) }) windows.addEventListener('mousemove',function(e){ console.log(e.screenY) }) </script><style> img{ position: absolute; top:20px; } </style> </head> <body> <img src="" alt=""> <script> let pic=document.querySelector('img') document.addEventListener('mousemove',function(e){ let x=e.pageX let y=e.pageY pic.style.left=(x-50)+'px' pic.style.left=(y+40)+'px' }) </script>设置鼠标移动到位置显示坐标
//需要给span设置绝对性定位 <span></span> <script> let sp=document.querySelector('span') document.addEventListener('mousemove',function(e){ let x=e.clientX let y=e.clientY let info='('+x+',"+y+")' sp.innerHTML=info }) sp.style.left=(x-50)+'px' sp.style.right=(y-40)+'px' </script>键盘事件
keypress：键盘的某个按键被按下的时候触发，不识别功能键，保存的是按键的ASCII值，可以区分大小写
keydown：可以识别功能键，保存的是按键的虚拟键码，不区分大小写
keyup：键盘上的某个键松开时触发，不区分大小写
键盘事件对象 KeyBoardEvent
属性keyCode：事件对象的ascii值，通过该属性可以知道用户按的哪个键
搜索框 <input type="text"> <script> let inpue=document.querySelector('input') document.addEventListener('keyup',function(e){ if(e.keyCode=83){ // 按下s键时 input.focus() } }) </script>
常见windows操作事件
<body οnlοad="函数名（）"></body>
window.addEventListener('事件类型'，事件处理程序)
调整窗口大小的时间
1.window.οnresize=function()
2.window.addEventListener('resize',function(){})
定时器
setTimeOut（fn，间隔时间） 在指定间隔时间之后调用fn函数，只打印一次，不会重复打印 setInterval（fn,间隔时间） 不重复循环调用 clearTimeOut（定时器） 取消由settimeout创建的定时器 clearInterval 取消由setInterval创建的定时器 <script> setTimeout(function(){ console.log(setTimeout) },2000) setInterval(function(){ console.log(setInterval) },2000) </script>设计倒计时
操作元素
修改元素内容
element.innerText
<button>显示系统当前的时间</button> <div>某个时间</div> <script> // 获取元素 var btn=document.querySelector('button') var div=document.querySelector('div') // 注册事件 btn.onclick=function(){ div.innerText='2022-6-10' div.innerText=get Date() } //元素不添加事件 var p=document.querySelctor('p'); p.innerText=getDate(); </script>element.innerHtml
区别：
innerText不识别HTML标签，非标准 去除空格和换行 innerHtml识别html标签 不去除空格和换行 w3c标准
这两个属性是可读写的，可以获取元素里面的内容
inner HTML使用的更多
修改元素属性
src href
id alt title
<button id='ldh'>刘德华</button> <button id='zxy'>张学友</button> <img src="" alt=""> <script> // 修改元素属性 // 获取元素 var ldh=document.getElementById('ldh') var zxy=document.getElementById('zxy') var img=document.querySelector('img') // 注册事件 处理程序 zxy.onclick=function(){ img.src='' img.title='刘德华' } </script>案例：分时问候
<img src="" alt=""> <div>上午好</div> <script> // 根据系统不同时间来判断，需要用到日期内置对象 // 利用多分支语句来设置不同图片 // 需要一个图片，根据时间修改图片，需要用到操作元素src属性 // 需要一个div元素，显示不同问候语，修改元素内容即可 // 获取元素 var img=document.querySelector('img') var div=document.querySelector('div') // 得到当前小时数 var date=new Date(); var h=date.getHours(); // 判断小时数改变图片和文字信息 if(h<12){ img.src=''; div.innerHTML='亲，上午好，好好写代码' }else if(h<18){ img.src=''; img.innerHTML='亲，下午好，请好好写代码' }else{ img.src=''; img.innerHTML='亲，晚上好，好好写代码' } </script>
修改表单属性
type value checked selected disabled
<button>按钮</button> <input type="text" value="输入内容"> <script> // 获取元素 var btn=document.querySelector('button') var input=document.querySelector('input') // 注册事件 btn.onclick=function(){ // 表单里面的值，文字是通过value来修改 input.value='被点击了'; // 如果想要某个表单被禁用，不能被点击 input.disabled=true; this.disabled=true; // this指向事件函数的调用者 btn } </script>案例：仿京东显示隐藏密码明文案例
<style> .box{ position: relative; width: 400px; border-bottom: 1px solid red; margin:100px auto; } .input{ width: 370px; height: 30px; border:0; outline:none; } .box img{ width:20px; position: absolute; top:2px; right:2px; width:24px; } </style> </head> <body> <div class='box'> <label for=""> <img src="" alt="" id='eye'> </label> <input type="password" name='' id='' id='password'> </div> <script> // 核心思路：点击眼睛按钮，把密码类型改为文本框就可以看见里面的密码 // 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框 // 算法：利用一个flag变量，判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1 // 获取元素 var eye=document.getElementById('eye') var pwd=document.getElementById('password') // 注册事件 处理程序 var flag=0; eye.onclick=function(){ // 点击一次后，flag会发生变化 if(flag==0){ password.type='text'; eye.src='' flag=1 }else { password.type='password'; eye.src='' flag=0 } } </script>
修改样式属性
大小 颜色 位置等样式
element.style 行内样式操作
<style> div{ width: 200px; height: 200px; color:salmon; } </style> </head> <body> <div ></div> <script> // 获取元素 var div=document.querySelector('div') // 注册事件 处理程序 div.onclick=function(){ this.style.color='purple'; this.style.width='250px'; } </script>js里面的样式采用驼峰命名法 比如fontSize backgroundColor
js修改style样式操作，产生的是行内样式，css权重比较高
案例
element.className 类名样式操作 ：样式较复杂、功能复杂
<style> .change{ background-color: #fff; font-size: larger; margin-top: 30px; } </style> </head> <body> <button id="btn"></button> <div>文本</div> <script> var test=document.querySelector('div'); test.onclick=functon(){ this.className='change'; } </script>className会直接更改元素类名，会覆盖原先的类名
this.className='first change'多类名选择器，可保留原先的类名
排他思想
节点操作
节点层级：利用dom树可以把节点划分为不同的层级，常见的是父子兄层级关系
父节点：node.parentNode
parentNode可以返回某节点的父节点，是离得最近的一个父节点
如果指定的节点没有父节点则返回null
子节点：parentNode.childNodes
返回指定节点的集合，包括了所有的子节点，包括元素节点、文本节点
第一个元素和最后一个元素
parentNode.firstChild
返回第一个子节点，找不到返回null，包含所有节点
parentNode.lastChild
返回最后一个子节点
子节点
parentNode.firstElementChild
返回第一个子元素节点，找不到返回null
parentNode.lastElementChild
返回最后一个元素子节点
实际开发写法
var ol=document.queryselector('ol'); console.log(ol.children[0]);//返回第一个元素 console.log(ol.children[ol.children.length-1]);案例
新浪下拉菜单
//鼠标经过时表格显示，鼠标移开的时候表格隐藏 //获取元素 var nav=document.queryselector('.nav') var lis=nav.children //循环注册事件 for (var i=0;i<lis.length;i++){ lis[i].mouseover=function(){ this.children[1].style.display='block'; } lis[i].mouseout=function(){ this.children[i].style.display='none'; } }兄弟节点
node.nextSibling
下一个兄弟节点，包括元素节点、文本节点
node.previousSibling
上一个兄弟节点
node.nextElementSibling
下一个兄弟元素节点
node.previousElementSibling
上一个兄弟元素节点
创建节点
document.createElement('tagName')
创建tagName指定的HTML元素，因为这些元素原先不存在，是根据我们需求动态生成的，称为动态创建元素节点。
添加节点（显示在后面）
node.appendChild(child)
将一个节点添加到指定父节点的子节点的末尾，类似于css里面的after伪元素,类似于数组中push
添加节点（显示在前面）
node.insertBefore(child,指定元素)
//创建节点 var li=document.creatElement('li'); //添加节点 var ul=document.queryselector('ul'); ul.appendChild(li); //添加节点 var lili=document.creatElement('lili') var lili=document.insertBefore(lili,ul.children[0])给页面添加元素：1.创建元素2.添加元素
案例
简单版发布留言
//获取元素 var btn=document.querySelector('button'); var text=document.querySelector('textarea'); var ul=document.querySelector('ul'); //注册事件 btn.onclick=function(){ if(text.value==''){ alert(''您没有输入内容) return false;} else{ //console.log(text.value); //(1)创建元素 (2)添加元素 var li=document.creatElement('li'); li.innerHTML=text.value; ul.appendChild(li) //ul.insertBefore(li,ul.children[0]); }删除节点
node.removeChild(child) 其中node代表的是父节点
从dom中删除一个子节点，返回删除的节点
//获取元素 var ul=document.queryselector('ul'); //删除元素 //ul.removeChild(ul.children[0]); //点击按钮依次删除里面的数字 btn.onclick=function(){ if(ul.children.length==0){ this.disabled=true; }else{ ul.removeChild(ul.children[0]) } }案例
删除留言
var as=document.queryselector('a'); for(var i=0;i<as.length;i++){ as[i].onclick=function(){ //删除的是a当前所在的li ul.removeChild(this.parentNode); }}复制节点(克隆节点)
node.cloneNode()
如果括号参数为空或者为false，则是浅拷贝，即只是克隆复制节点（标签）本身，不克隆里面的子节点；如果括号里面有内容或为true，则为深拷贝，复制标签并且复制里面的内容（里面所有的子节点）
var ul=document.queryselector('ul') var lili=ul.children[0].cloneNode(); ul.appendChild(lili);
动态生成表格
案例
动态生成学生表格
创建删除单元格
//先准备学生数据 var dates=[{ name:'', subject:'', score: }, { name:'', subject:'', score: }, //多个数组之间用逗号隔开 ]; //往tbody创建行，有几个人（通过数组长度）就创建几行 var tbody=document.queryselector('tbody'); for(var i=0;i<dates.length;i++)//外面的for循环遍历行{ //创建tr行 var tr=document.creatElement('tr'); tbody.appendChild('tr'); //往行里面创建单元格td单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 //里面的for循环遍历列 for(var k in dates[i]){ //创建单元格 var td=document.creatChild('td'); //把对象里面的属性值给td console.log(dates[i][k]); //td.innerHTML=dates[i][k]; tr.appendChild('td'); } //创建有删除两个字的单元格 var td=document.creatElement('td'); td.innerHTML='<a href="javascript:;"></a>' tr.appendChild('td') } //遍历对象 for(k in obj){ k得到的是属性名 obj[k]得到的是属性值 } //删除操作 var as=document.queryselectorAll('a'); for(var i=0;i<as.length;i++){ as[i].onclick=function(){ //点击a删除当前a当前所在行(child:链接a所在的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentnode.parentnode) } }三种动态创建元素的区别
document.write()
如果页面文档流加载完毕，再调用这句话会导致页面重绘
element.innerHTML()
document.creatElement()
注册事件
两种方式
传统注册方式 利用on开头的事件 onclick
<button οnclick="alert('hi~')"></button>
btn.οnclick=function(){}
特点：注册事件的唯一性（同一个元素同一个事件只能设置一个处理函数，最后设置的处理函数会覆盖前面的）
方法监听注册事件
addEventListener()
按照注册顺序依次执行
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
