DOM（一）：获取元素（查）、事件基础、操作元素（改）
DOM：Document Object Model （文档对象模型）DOM把下面这些东西都当作对象。获取元素有很多种方式1.根据ID获取2.根据标签名获取3.通过html5新增的方法获取4.特殊元素获取如果多个标签id相同，默认选第一个，但是如果多个标签class相同，都会选出来，详见4这里面有这么几个注意点，第一捏就是文档页面是从上往下读的，所以script标签要写到下面第二就是参数id大小写一
DOM：Document Object Model （文档对象模型）
DOM主要是针对元素的操作：创建、增删改查、属性操作、事件操作
DOM把下面这些东西都当作对象。
一、获取元素
获取元素有很多种方式
1.根据ID获取
2.根据标签名获取
3.通过html5新增的方法获取
4.特殊元素获取
1、根据ID获取获取元素
如果多个标签id相同，默认选第一个，但是如果多个标签class相同，都会选出来，详见4
document.getElementById()
这里面有这么几个注意点，第一捏就是文档页面是从上往下读的，所以script标签要写到下面
第二就是参数id大小写一定要一致，第三呢就是返回的timer是一个元素对象
<div id="time">2022-6-30</div>
<script>
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer); //object
console.dir(timer);
</script>
2、根据标签名获取获取元素
document.getElementsByTagName()
返回的是带有指定标签名的对象的集合（伪数组）
如果页面里只有一个li，返回的还是伪数组，如果没有li，返回的是空的伪数组
如果想获取某个单独的元素对象，使用[ ] 即可
<ul>
<li>一挑十，别超时，现在开始计时一小时</li>
<li>一挑十，别超时，现在开始计时一小时</li>
<li>一挑十，别超时，现在开始计时一小时</li>
<li>一挑十，别超时，现在开始计时一小时</li>
</ul>
//通过标签名获取元素,这里的意思是获取全部的li
// 如果页面里只有一个li，返回的还是伪数组，如果没有li，返回的是空的伪数组
var lis = document.getElementsByTagName('li');
console.log(lis); //伪数组[li, li, li, li]
// 我们可以遍历得到里面的每个元素对象
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
console.log(typeof lis); //object
console.log(lis[0]); //li
3、获取某个父标签内的所有指定标签子元素
父元素对象.getElementsByTagName(‘子元素标签名’)
<ul>
<li>一挑十，别超时，现在开始计时一小时</li>
<li>一挑十，别超时，现在开始计时一小时</li>
<li>一挑十，别超时，现在开始计时一小时</li>
<li>一挑十，别超时，现在开始计时一小时</li>
</ul>
<ol id="aoligei">
<li>从蓬莱写到仙台，哥们儿代码信手拈来</li>
<li>从蓬莱写到仙台，哥们儿代码信手拈来</li>
<li>从蓬莱写到仙台，哥们儿代码信手拈来</li>
</ol>
比如我要获取ol里面的li：olli[0]意思是第一个ol
//获取某个父标签内的所有指定标签子元素
//获取ol里面的li
var olli = document.getElementsByTagName('ol'); //返回的是伪数组[ol]
console.log(olli[0].getElementsByTagName('li')); //这样就是还要[0]，容易出错
当然啊，最好还是getElementById()比较好，可以直接选出来想要的父元素ol，不用再[]了
//当然啊，最好还是byid比较好，可以直接选出来想要的父元素ol
var olli = document.getElementById('aoligei');
console.log(olli.getElementsByTagName('li'));
4、H5新增通过类名获取元素
如果多个标签id相同，默认选第一个（详见1），但是如果多个标签class相同，都会选出来，返回的也是伪数组
document.getElementsByClassName('类名')
举例：
<div class="box">盒子1</div>
<div class="box">盒子2</div>
var boxes = document.getElementsByClassName('box');
console.log(boxes); //[div.box, div.box]
5、H5新增牛逼获取方式
切记里面的选择器要加符号，比如.box ，#nav
假设我这里有这样几个标签
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<ol id="nav">
<li>从蓬莱写到仙台，哥们儿歌词信手拈来</li>
<li>从蓬莱写到仙台，哥们儿歌词信手拈来</li>
<li>从蓬莱写到仙台，哥们儿歌词信手拈来</li>
</ol>
（1）querySelecter返回指定选择器的第一个对象
（2）querySelecterAll返回指定选择器的全部对象集合
6、获取body和html元素
二、事件基础
1.事件三要素：事件源，事件类型，事件处理程序
事件要包括：
1.事件源，事件出发的对象，我们要对谁操作？
2.事件类型，事件是如何出发的，是点击（onclick）？还是鼠标经过，还是键盘按下
3.事件处理程序，通过一个函数赋值，这个事件能实现什么功能
<button id="btn">点击开始rap</button>
<script>
var my = document.getElementById('btn');
my.onclick = function () {
alert('从蓬莱写到仙台，哥们儿代码信手拈来');
}
</script>
切记tagname返回的是伪数组
var you = document.getElementsByTagName('div');
//切记tagname返回的是伪数组
you[0].onclick = function () {
console.log('你被选中了');
}
2.常见的鼠标事件：
三、操作元素（核心）
1.修改元素内容
（1）innerText和innerHTML的区别：
1、innerText不识别html标签，但是innerHTML可以识别
比如下面这个：
<div>嗷嗷嗷</div>
var ao = document.querySelector('div');
ao.innerText = '<strong>aoaoao</strong>嘻嘻嘻';
ao.innerHTML = '<strong>aoaoao</strong>嘻嘻嘻';
显示的结果是不一样的
2、innerText会去除空格和换行，innerHTML会保留原版写法
（2）这两个属性都是既可以读，又可以写的
可以ao.innerText或者ao.innerHTML显示里面的内容，也可以改，改的话可以直接改，也可以给个事件
（3）innerHTML用的比较多
//1.先把元素选出来
var btn = document.querySelector('button');
var ao = document.querySelector('div');
//2.操作它
//可以直接改
ao.innerText = '现在的时间';
//也可以给点功能
btn.onclick = function () {
ao.innerText = getTime();
}
//封装一个函数，返回当前的时分秒
function getTime() {
var now = new Date();
var hour = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
// 为了更好的视觉效果，如果小于10应该补0
hour = hour < 10 ? '0' + hour : hour;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
return hour + ':' + minutes + ':' + seconds;
}
2.修改元素属性
元素.属性名 = ‘属性值’
看看下面这个案例就明白了：
点击按钮切换图片
//1.先把元素选出来
var one = document.getElementById('one');
var two = document.getElementById('two');
var demo = document.querySelector('img');
//2.给个事件
one.onclick = function () {
demo.src = './images/1.jpg';
demo.title = 'one';
}
two.onclick = function () {
demo.src = './images/2.jpeg';
demo.title = 'two';
}
案例：根据不同时间，显示不同的图片和问候语
如果上午时间打开页面，显示上午好，显示上午的图片
如果下午时间打开页面，显示下午好，显示下午的图片
如果晚上时间打开页面，显示晚上好，显示晚上的图片
<div>上午</div>
<img src="./images/1.jpg" alt="">
var time = document.querySelector('div');
var img = document.querySelector('img');
var date = new Date();
var now = date.getHours();
if (now >= 6 && now < 12) {
alert('上午好北鼻');
time.innerHTML = '上午';
img.src = './images/1.jpg';
}
else if (now >= 12 && now < 20) {
alert('下午好北鼻');
time.innerHTML = '下午';
img.src = './images/2.jpg';
}
else {
alert('晚上好北鼻');
time.innerHTML = '晚上';
img.src = './images/3.jpg';
}
3.修改表单属性
和上边差不多
注意这个this的巧用
京东显示密码明文案例：
.box {
position: relative;
margin: 100px auto;
width: 500px;
border-bottom: 1px solid #ccc;
}
.box input {
width: 400px;
height: 40px;
outline: none;
border: 0;
}
.box span {
display: block;
position: absolute;
top: 5px;
right: 10px;
width: 30px;
height: 30px;
background-color: pink;
border-radius: 15px;
}
<div class="box" id="box">
<label for="pwd"></label>
<input type="password" name="" id="pwd">
<span id="btn"></span>
</div>
<script>
//获取元素
var box = document.getElementById('box');
var btn = document.getElementById('btn');
var pwd = document.getElementById('pwd');
var flag = 0;
btn.onclick = function () {
if (flag == 0) {
pwd.type = 'text';
flag = 1;
} else {
pwd.type = 'password';
flag = 0;
}
}
</script>
4.修改CSS样式属性
（1）元素.style.属性名 = ‘属性值’
比如我要实现鼠标点击元素，实现宽度改变，背景颜色改变
div {
width: 200px;
height: 200px;
background-color: pink;
}
1.第一步仍然是获取元素，然后element.style.属性名 = ‘修改后的’，就可以
2.这里this指向的是被调用者，也就是谁调用的事件
3.属性名都是驼峰命名法，这个要注意，容易出错
4.这些改变，都是放在了行内样式的style里，所以权重比较高，会优先执行，也就是说js里改样式权重比较高
<div id="div"></div>
<script>
//1.获取元素
var a = document.getElementById('div');
a.onclick = function () {
// this指向的是被调用者，这里是a，也就是div
this.style.backgroundColor = 'purple'; //注意驼峰命名法
this.style.width = '300px';
}
</script>
点击叉号关闭广告案例：
* {
box-sizing: border-box;
}
.box {
position: relative;
text-align: center;
margin: 100px auto;
width: 150px;
height: 200px;
border: 1px solid #ccc;
}
.close-btn {
position: absolute;
display: block;
top: -1px;
left: -20px;
width: 20px;
height: 20px;
line-height: 20px;
padding-left: 1px;
border: 1px solid #ccc;
}
<div class="box">
<p>淘宝二维码</p>
<img src="./images/tb.png" alt="aaaa">
<i class="close-btn">✖</i>
</div>
<script>
var box = document.querySelector('.box');
var btn = document.querySelector('.close-btn');
btn.onclick = function () {
box.style.display = 'none';
}
</script>
（2）元素.className = ‘类名’
如果我们在一个事件中要同时更改多个样式，比如这样
var div = document.getElementById('div');
div.onclick = function () {
this.style.backgroundColor = 'red';
this.style.fontSize = '16px';
this.style.width = '100px';
this.style.color = 'black';
}
那么写起来会相当的麻烦，但是我们可以把这些都写到css里，然后起个类名
.change {
width: 100px;
color: black;
font-size: 16px;
background-color: red;
}
这样的话，我们就可以把第一块儿代码改成
var div = document.getElementById('div');
div.onclick = function () {
this.className = 'change';
}
so easy
不过这里要注意，如果标签本来就有类名，那么这样写会把原类名直接覆盖，如果想保留原类名，要这么写：
this.className = ‘change 原类名’;
就是把原类名也添进去
5.循环精灵图
前提是精灵图是竖着按照一定规律拍好的，x轴坐标为0，y轴按一定规律排列
这里写个大概的思路，这里要注意
变量要有，单位要有，负号要有，xy轴之间的空格也要有
var ul = document.getElementsByTagName('ul');
var lis = ul[0].getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
//注意这个写法，变量要有，单位要有，负号要有，xy轴之间的空格也要有
lis[i].style.backgroundPosition = '0 -' + 44 * i + 'px';
}
6.密码框验证信息
实现一个密码框，输入密码长度不对的时候提示不对，颜色变红。输入密码长度正确时提示正确，颜色变绿
.box {
padding-left: 20px;
margin: 100px auto;
width: 400px;
height: 50px;
border: 1px solid #ccc;
}
.check {
display: inline-block;
padding-left: 30px;
}
.wrong {
color: red;
}
.correct {
color: green;
}
<div class="box">
<input type="password" class="pwd">
<p class="check">请输入6~16位的密码</p>
</div>
<script>
var pwd = document.querySelector('.pwd');
var check = document.querySelector('.check');
//出发离开焦点事件
pwd.onblur = function () {
//根据表单里内容的长度来判断 pwd.value.length
var tag = pwd.value.length;
if (tag < 6 || tag > 16) {
check.className = 'check wrong';
check.innerHTML = '你输入的密码长度不对！'
} else {
check.className = 'check correct';
check.innerHTML = '密码格式正确'
}
}
</script>
GitCode 天启AI是一款由 GitCode 团队打造的智能助手，基于先进的LLM（大语言模型）与多智能体 Agent 技术构建，致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话，还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力，真正做到“一句话，让 Al帮你完成复杂任务”。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)