JavaScript中DOM的语法1

绅士

程序员的世界真可怕

DOM 的概念

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展

标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动

态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档

是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面

。DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

DOM 经常进行的操作

获取元素

对元素进行操作(设置其属性或调用其方法)

动态创建元素

事件(什么时机做相应的操作)

获取页面元素

为什么要获取页面元素？

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元

素，才进行后续操作

根据 id 获取元素

方法：调用 document 对象的 getElementById 方法。

参数：字符串类型的 id 的属性值。

返回值：对应 id 名的元素对象。

注意1：由于 id 名具有唯一性，部分浏览器支持直接使用 id 名访问元素，但不是标准

方式，不推荐使用。

注意2：代码执行顺序，如果 js 在 html 结构之前，会导致结构未加载，不能获取对应

id的元素。

<body>

// 根据 id 获取元素

var para = document.getElementById("para");

console.log(typeof para);object

// 补充：在控制台打印具体的对象

console.dir(para);

//调用方法

para.style.background = "pink";

// 代码书写顺序：js 中获取元素时，必须保证元素已经在浏览器中渲染成功

// 需要将 js 的代码写在 html 结构之后

// box.style.background = "blue"; 不推荐直接使用 id 名

</script>

</body>

根据标签名获取元素

方法：调用 document 对象的 getElementsByTagName 方法。

参数：字符串类型的标签名。

返回值：同名的元素对象组成的数组。

注意1：操作数据时需要按照操作数组的方法进行。

注意2：getElementsByTagName 方法内部获取的元素是动态增加的。

// 提前获取元素

var divs = document.getElementsByTagName("div");

console.log(divs);

</script>

<body>

<div>

</div>

console.log(divs);

// 通过标签名获取元素

var ps = document.getElementsByTagName("p");

console.log(ps);[p,p,p,p,p]一个p对应一个对象

// HTMLCollection html 元素组成的集合伪数组

// 操作时需要按照操作数组的方法进行

ps[0].style.background = "pink";

元素对象内部获取标签元素

获取的元素对象内部，本身也可以调用根据标签获取元素方法，例如 div 元素对象也可

以调用 getElementsByTagName 方法。

目的：缩小选择元素的范围，类似 css 中的后代选择器。

<body>

</div>

// 元素对象内部可以继续打点调用通过标签名获取元素的方法

// 类似于 css 中后代选择器，缩小选择范围

var box1 = document.getElementById("box1");

// 我们习惯将连续调用方式拆开书写

var ps1 = box1.getElementsByTagName("p");

console.log(ps1);[p,p]

</script>

</body>

根据 name 获取元素

方法：调用 document 对象的 getElementsByName 方法。

参数：字符串类型的 name 属性值。

返回值：name 属性值相同的元素对象组成的数组。

不建议使用：在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素。

<body>

<form>

</form>

// 通过标签的 name 属性获取元素

var ages = document.getElementsByName("age");

// NodeList 节点列表集合类数组

console.log(ages);

// 兼容问题：在 IE(9及以下) 和 Opera中有兼容问题，会多选中 id 属性值相同

的部分

</script>

</body>

根据类名获取元素

方法：调用 document 对象的 getElementsByClassName 方法。

参数：字符串类型的 class 属性值。

返回值：class 属性值相同的元素对象组成的数组。

浏览器兼容问题：不支持 IE8 及以下的浏览器

<body>

</div>

</div>

// 通过 class 属性值获取元素

// var paras = document.getElementsByClassName("para");得到四个

// 获取 id 为 box1 的元素对象

var box1 = document.getElementById("box1");

// 元素对象内部也可以调用 getElementsByClassName 方法

var paras1 = box1.getElementsByClassName("para");

console.log(paras1);

// 兼容问题：不支持 IE 8 及以下浏览器

</script>

根据选择器获取元素

方法1：调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一

个符合条件的标签元素。

方法2：调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取

所有符合条件的标签元素。

参数：字符串类型的 css 中的选择器。

浏览器兼容问题：不支持 IE8 以下的浏览器

<body>

</div>

</div>

// 在结构之后使用选择器选取方法

var para = document.querySelector("#box1 .para");

console.log(para);只能输出一个

var paras = document.querySelectorAll("#box1 .para");

console.log(paras);输出两个

// 兼容问题：在 IE8 以下不能使用

</script>

</body>

总结

掌握，没有兼容问题

getElementById()

getElementsByTagName()

了解

getElementsByName() 不推荐使用

getElementsByClassName() 不推荐使用

querySelector() 如果不考虑IE8及以下时可以用

querySelectorAll() 如果不考虑IE8及以下时可以用

DOM 事件基本应用

掌握 DOM 事件的用法

事件

事件：在什么时候做什么事

执行机制：触发--响应机制

绑定事件(注册事件)三要素：

1、事件源：给谁绑定事件

2、事件类型：绑定什么类型的事件 click 单击

3、事件函数：事件发生后执行什么内容，写在函数内部

事件监听

JavaScript 解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，

只要触发对应的绑定事件，会立刻执行事件函数。

常用事件监听方法

方法1：绑定 HTML 元素属性。

<input type="button" id="btn" value="点击有惊喜" onclick="alert('点我做什么？

')">

方法2：绑定 DOM 对象属性。

// 获取元素

var btn = document.getElementById("btn");

// 添加绑定事件

btn.onclick = function () {

// 定义的是事件被触发后要做的事情

alert("点我干嘛？");

};

常用的鼠标事件类型

onclick 鼠标左键单击触发

ondbclick 鼠标左键双击触发

onmousedown 鼠标按键按下触发

onmouseup 鼠标按键放开时触发

onmousemove 鼠标在元素上移动触发

onmouseover 鼠标移动到元素上触发

onmouseout 鼠标移出元素边界触发

DOM 元素属性操作

掌握 DOM 元素属性操作方式

非表单元素的属性

例如：href、title、id、src 等。

调用方式：元素对象打点调用属性名，例如 obj.href。

注意：部分的属性名跟关键字和保留字冲突，会更换写法。

class → className

for → htmlFor

rowspan → rowSpan

属性赋值：给元素属性赋值,等号右侧的赋值都是字符串格式。

// 获取元素

var link = document.getElementById("link");

var pic = document.getElementById("pic");

// 调用元素对象的属性，从而操作 HTML 中标签的属性

console.log(link.href); 百度一下，你就知道

console.log(link.title);跳转到百度页面

console.log( Apache2 Ubuntu Default Page: It works );link

console.log(pic.src);images/a.jpg

console.log(pic.alt);美女

console.log(pic.className);pic

// 等号赋值，值必须是字符串类型的

pic.src = "images/b.jpg";

</script>

案例

1.点击按钮切换图片

// 获取元素

var btn = document.getElementById("btn");

var pic = document.getElementById("pic");

// 通过一个变量作为判断条件，变量值为 1，认为加载的是 a 图片，如果为 2 ，

认为加载的是 b 图片

var num = 1;

// 给按钮添加点击事件

btn.onclick = function () {

// 给图片换 src 的属性值

// 通过 if 语句判断，如果是 a 图片，就换成 b 图片，反之换成 a 图片

if (num === 1) {

pic.src = "images/b.jpg";

// 数字要对应发生变化

num = 2;

} else {

pic.src = "images/a.jpg";

num = 1;

}

};

</script>

点击按钮显示隐藏 div

<style>

* {

margin: 0;

padding: 0;

}

div {

width: 200px;

height: 200px;

background-color: pink;

}

.hide {

display: none;

}

.show {

display: block;

}

</style>

</head>

<body>

// 获取元素

var btn = document.getElementById("btn");

var box = document.getElementById("box");

// 点击按钮，让 div 显示或隐藏

// box.style.display = "none";

btn.onclick = function () {

// 元素 div 当前是显示的，需要让他隐藏

// 根据按钮的 value 值进行条件判断

if (this.value === "点击隐藏") {

box.className = "hide";

this.value = "点击显示";

} else {

box.className = "show";

this.value = "点击隐藏";

}

// 在事件函数内部有一个 this ，指向事件源

// 区分一下不同函数内部 this 的指向

// 普通函数 -> window 对象

// 构造函数 -> 指向的是生成的实例对象

// 对象的方法 -> 指向的是对象本身

// 事件函数 -> 指向的是事件源

};

</script>

</body>

美女相册

<h2>

美女画廊

</h2>

</a>

</a>

</a>

</a>

</div>

<p id="des">选择一个图片</p>

// 1.获取元素

var imagegallery = document.getElementById("imagegallery");

var links = imagegallery.getElementsByTagName("a");

var image = document.getElementById("image");

var des = document.getElementById("des");

// 2.遍历数组，添加点击事件

for (var i = 0 ; i <= links.length - 1 ; i++) {

links[i].onclick = function () {

// alert("aaa");

// 3.更改 image 内部的 src 属性值

// this 关键字指代的是触发事件的真正事件源

image.src = this.href;

// 4.更改 des 内部的文字内容

des.innerText = this.title;

// 5.取消 a 标签的默认跳转效果

return false;

};

}

// for 循环内部添加的绑定事件，在触发时，所有的批量添加的事件已经成功，触发事

件时都是在循环结束之后

// 批量绑定的事件的事件函数内部如果有变量i，要注意，函数执行时已经是在循环结

束后

// 循环内部定义的变量是一个全局变量，在循环后执行的 i 变量的值是 i 跳出循环时

的值

// image.src = links[i].href;

// console.log(i);4

</script>

获取标签内部内容的属性

获取标签内部内容的属性有两个：innerHTML 和 innerText

innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取

的内容包括空白换行等。

innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取

的内容会去掉换行和缩进等空白。

更改标签内容

还可以通过两个属性给双标签内部去更改内容：

innerHTML 设置属性值，有标签的字符串，会按照 HTML 语法中的标签加载。

innerText 设置属性值，有标签的字符串，会按照普通的字符加载。

设置标签内部的内容

box.innerHTML = "<h2>hello JS</h2>";会根据h2加载

box.innerText = "<h2>hello JS</h2>";会根据字符串加载

对比使用场景

innerText：在设置纯字符串时使用。

innerHTML：在设置有内部子标签结构时使用。

表单元素属性

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性

checked 复选框选中属性

selected 下拉菜单选中属性

注意：在 DOM 中元素对象的属性值只有一个时，会被转成布尔值显示。

例如：txt.disabled = true;

</select>

// 获取元素

var btn = document.getElementById("btn");

var txt = document.getElementById("txt");

var list = document.getElementById("list");

var opts = list.getElementsByTagName("option");

// value 属性

// console.log(btn.value);按钮

// console.log(txt.value);空字符串

// console.log(opts[0].value);beijing

// console.log(opts[0].innerHTML);北京

// 更改 input 标签的 value

// btn.value = "点击";

// txt.value = "请输入内容";改为默认值

// 表单元素特有的一些属性，属性名和属性值是一致的

// console.log(txt.disabled);false

btn.disabled = true;

</script>

案例

1.检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框

// 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框

// 1.获取元素

var btn = document.getElementById("btn");

// 2.给按钮添加点击事件，然后判断位数是否足够

btn.onclick = function () {

// 在事件触发后，去获取对象，内部的数据才是最新

var name = document.getElementById("name");

var pw = document.getElementById("pw");

// 用户名位数是否在 3-6 位，不满足需要高亮显示

if (name.value.length < 3 || name.value.length > 6) {

name.className = "bg";

return;

} else {

name.className = "";

}

// 密码的位数必须在 6-8 位之间，否则高亮显示

if (pw.value.length < 6 || pw.value.length > 8) {

pw.className = "bg";

return;

} else {

pw.className = "";

}

// 提交数据

console.log("提交数据");

};

</script>

2.设置下拉框中的选中项

<br>

</select>

// 1.获取元素

var btn = document.getElementById("btn");

var food = document.getElementById("food");

var opts = food.getElementsByTagName("option");

// 2.给按钮添加点击事件

btn.onclick = function () {

// 3.随机选择一个 option

// 每次点击需要获取一个 opts 数组的随机下标

// Math.random() [0,1)

// Math.random()*6 [0,6)

var n = Math.floor(Math.random() * opts.length);

// console.log(n);随机数[0,5]

// 设置对应的随机项的属性

opts[n].selected = true;

};

</script>

3.搜索文本框

<style>

.gray {

color: gray;

}

.black {

color: black;

}

</style>

<body>

// 获取元素

var txtSearch = document.getElementById("txtSearch");

// 1.获得焦点时，可以使用一个 onfocus，如果文本框内容是默认请输入搜索关键字

，需要清空文字，让文字加载黑色

txtSearch.onfocus = function () {

// 判断是否是默认的提示文字

if (this.value === "请输入搜索关键字") {

this.value = "";

this.className = "black";

}

};

// 2.失去焦点时，可以使用一个 onblur，如果文本框内容为空，需要改为默认提示内

容请输入搜索关键字，让文字颜色变为灰色

txtSearch.onblur = function () {

// 如果用户输入的内容正好与默认提示文本相同，失去焦点时，也应该让文字颜色变为

灰色

// 判断内容是否为空

if (this.value === "" || this.value === "请输入搜索关键字") {

this.value = "请输入搜索关键字";

this.className = "gray";

}

};

</script>

</body>

4.全选反选

<table>

<thead>

<tr>

<th>

</th>

</tr>

</thead>

<tr>

<td>

</td>

<td>iPhone8</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>Apple Watch</td>

</tr>

</tbody>

</table>

</div>

// 获取元素

var all = document.getElementById("all");

var tb = document.getElementById("tb");

var btn = document.getElementById("btn");

var tb_inputs = tb.getElementsByTagName("input");

// 1.全选:让子选项的选择效果始终与全选保持一致

all.onclick = function () {

// 遍历所有的子选项

for (var i = 0 ; i < tb_inputs.length ; i++) {

// 让每一个子选项的 checked 属性值与全选保持一致

tb_inputs[i].checked = all.checked;

}

};

// 2.单独选择子选项过程

// 给每一次点击任何一个子选项进行判断

for (var i = 0 ; i < tb_inputs.length ; i++) {

tb_inputs[i].onclick = function () {

// 需要判断所有的子选项是否都是选中的状态，如果都选中，让全选被选中，如果有的

没有被选中，让全选取消选择

allChecked();

}

// 3.反选

btn.onclick = function () {

// 让所有子选项与之前的状态相反

for (var i = 0 ; i < tb_inputs.length ; i++) {

// 让属性值取原来相反的值

tb_inputs[i].checked = !tb_inputs[i].checked;

}

// 控制全选效果，也需要进行取反

allChecked();

};

// 定义一个 all 是否被选中的函数

function allChecked() {

// 使用一个中间过渡变量，初始认为所有的子选项都是被选中的

var isAllChecked = true;

// 遍历所有子选项，进行判断

for (var j = 0 ; j < tb_inputs.length ; j++) {

// 一旦有一个是没有被选择的，让变量变为 false

if (tb_inputs[j].checked === false) {

isAllChecked = false;

// 只要走到这里，说明肯定不是全选，不需要往下执行循环

break;

}

// 如果循环内部条件永远不成立，说明所有子选项都是被选中，isAllChecked 的值没

有发生变化，还是 true

// 给 all 元素设置 checked 属性

all.checked = isAllChecked;

}

</script>

自定义属性操作

getAttribute(name) 获取标签行内属性

setAttribute(name，value) 设置标签行内属性

removeAttribute(name) 移除标签行内属性

与element.属性的区别: 上述三个方法用于获取任意的行内属性，包括自定义的属性

// 获取元素

var box = document.getElementById("box");

// 元素自有属性

console.log( box.id );

// 元素自定义的新属性不能用点语法直接调用

// 可以调用元素对象的获取自定义属性的方法

console.log(box.getAttribute("age"));

console.log(box.getAttribute("sex"));

// 也可以调用自有的属性

console.log(box.getAttribute("id"));

// 设置属性,添加新的自定义属性或者自有属性

box.setAttribute("age","20");

box.setAttribute("city","Beijing");

// 传的参数不需要进行属性名的修改

box.setAttribute("class","demo");

// 移除属性

box.removeAttribute("age");

box.removeAttribute("class");

</script>

style 样式属性操作

使用 style 属性方式设置的样式显示在标签行内。

element.style 属性的值，是所有行内样式组成的一个样式对象。

样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属

性。

注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，

要修改为驼峰命名方式书写 backgroundColor。

注意2：通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px 等单位。

引入：

function my$(id) {

return document.getElementById(id);

}

<body>

// 获取元素

var btn = my$("btn");

var box = my$("box");

// console.log(btn);

// 1.更改类名的方式去更改样式

// 2.根据对象的 style 属性去操作样式

console.log( btn.style );为空

// 元素对象的 style 属性的值是一个行内样式组成对象，对象内部封装了所

有的行内的样式属性及属性值

// 元素的样式属性对象可以继续打点调用，获取或设置相关的行内样式属性

console.log( box.style );{width}

console.log(box.style.width);100px

// 注意：如果使用的 css 属性名是复合属性的单一属性，需要更改为驼峰命

名法

console.log(box.style.backgroundColor);为空

box.style.width = "200px";

</script>

</body>

className 类名属性操作

修改元素的 className 属性相当于直接修改标签的类名。

如果需要修改多条 css 样式，可以提前将修改后的样式设置到一个类选择器中，后续通

过修改类名的方式，批量修改 css 样式。

<style>

.cls {

width: 100px;

height: 100px;

background-color: pink;

}

</style>

</head>

<body>

// 问题：实际工作中我们应该选择哪种方法？

// 获取元素

var btn = my$("btn");

var box = my$("box");

// 给按钮添加事件

btn.onclick = function () {

// 1.通过更改类名

// box.className = "cls";

// 2.通过元素对象的 style 属性进行设置

box.style.width = "100px";

box.style.height = "200px";

box.style.backgroundColor = "yellow";

};

</script>

</body>

案例

1.开关灯

// 获取元素

var btn = my$("btn");

// console.log(btn);

// 定义一个判断变量，true 表示开灯状态，false 表示关灯状态

// var isOpen = true;

// 点击事件，控制 body 的背景

方法一

btn.onclick = function () {

// 开灯时，需要点击后让它关灯并切换文字为开灯

if (isOpen) {

document.body.style.backgroundColor = "black";

this.value = "开灯";

isOpen = false;

} else {

document.body.style.backgroundColor = "white";

this.value = "关灯";

isOpen = true;

}

方法二

直接使用 btn 的 value 值进行判断

btn.onclick = function () {

if (this.value === "关灯") {

document.body.style.backgroundColor = "black";

this.value = "开灯";

} else {

document.body.style.backgroundColor = "white";

this.value = "关灯";

}

};

</script>

2.图片切换二维码案例

</div>

// 获取元素

var box = my$("box");

var er = my$("er");

// 给 box 添加鼠标移上事件 onmouseover ，添加鼠标离开事件 onmouseout

box.onmouseover = function () {

// 让子级元素进行显示，就是将 hide 改为 show

// er.className = "erweima show";

er.className = er.className.replace("hide","show");改变class中指定的

};

box.onmouseout = function () {

// 让子级元素进行隐藏，就是将 show 改为 hide

// er.className = "erweima hide";

er.className = er.className.replace("show","hide");改变class中指定的

};

</script>

3.当前输入的文本框高亮显示

// 获取元素

var txts = document.getElementsByTagName("input");

// 添加批量的获取焦点事件

for (var i = 0 ; i < txts.length ; i++) {

// 排他思想：1.排除其他 2.保留自己

// 给每一个input标签添加获取焦点事件

txts[i].onfocus = function () {

// 排除其他的方法：将所有的项包含自己都设置为默认样式

// 遍历数组，让所有的样式恢复默认

for (var j = 0 ; j < txts.length ; j++) {

txts[j].style.backgroundColor = "";

}

// 设置元素自己高亮显示

// 保留自己的特殊样式

// this 指代事件源自己

this.style.backgroundColor = "yellow";

};

}

</script>

4.点击按钮改变div的大小和位置

<style>

div{

width: 100px;

height: 100px;

background-color: pink;

}

.new {

position: absolute;

width: 200px;

height: 200px;

left: 200px;

top: 200px;

}

</style>

</head>

<body>

//获取元素

var btn = my$("btn");

var box = my$("box");

// 添加事件

btn.onclick = function () {

//第一种

// 修改类名

// box.className = "new";

//第二种

// 修改 style 样式对象中的属性

box.style.width = "200px";

box.style.height = "200px";

box.style.left = "200px";

style.top-正在西部数码(www.west.cn)进行交易 = "200px";

box.style.position = "absolute";

};

</script>

5.表格隔行变色、高亮显示

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

// 获取所有的行

var trs = document.getElementsByTagName("tr");

// 1.隔行变色

for (var i = 0; i < trs.length ; i++) {

// 下标为偶数的行显示粉色

// 下标为奇数的行显示灰色

if (i % 2 == 0) {

trs[i].style.backgroundColor = "pink";

} else {

trs[i].style.backgroundColor = "lightgray";

}

// 2.鼠标移上高亮显示，鼠标离开恢复默认

// 全局变量

var bgc;

// 鼠标移上高亮显示

trs[i].onmouseover = function () {

// 定义变量记录 tr 原来的颜色

bgc = this.style.backgroundColor;

this.style.backgroundColor = "skyblue";

};

// 鼠标离开恢复默认

trs[i].onmouseout = function () {

this.style.backgroundColor = bgc;

};

}

</script>

</body>

6.tab选项卡切换

<style>

* {margin:0; padding: 0;}

ul {

list-style-type: none;

}

.box {

width: 400px;

height: 300px;

border: 1px solid #ccc;

margin: 100px auto;

overflow: hidden;

}

.hd {

height: 45px;

}

.hd span {

display:inline-block;

width: 90px;

background-color: pink;

line-height: 45px;

text-align: center;

cursor: pointer;

}

.hd span.current {

background-color: skyblue;

}

.bd div {

height: 255px;

background-color: skyblue;

display: none;

}

.bd div.current {

display: block;

}

</style>

</head>

<body>

</div>

<div class="current">我是体育模块</div>

<div>我是娱乐模块</div>

<div>我是新闻模块</div>

<div>我是综合模块</div>

</div>

// 获取元素

var hd = my$("hd");

var spans = hd.getElementsByTagName("span");

var bd = my$("bd");

var divs = bd.getElementsByTagName("div");

// 鼠标移上某个 span 让它添加一个类名，其他的失去类名

for (var i = 0 ; i < spans.length ; i++) {

// 给每一个 span 元素添加一个新的属性，记录自己在数组中的下标

spans[i].index = i;

spans[i].onmouseover = function () {

// console.dir(this);

// 1.让 span 自己进行切换

// 排他思想：

// 排除其他

for (var j = 0; j < spans.length ; j++) {

spans[j].className = "";

// 由于 divs 中数据个数与 spans 一样，所以可以再同一个遍历循环中，进行排他操作

divs[j].className = "";

}

// 保留自己

this.className = "current";

// console.log(this.index);

// 2.让 bd 中的 div 也对应进行切换

// 对应控制思想：有两组数据中存储了相同个数的元素对象，一组对象的变化，会引起另外一组的变化

// 实现方法：找两个数据中的共同点，两个数组中元素对象的下标是一样的

// 对应控制中也会涉及到排他的操作

// 保留 div 自己的类名

divs[this.index].className = "current";

};

}

</script>

</body>

发布于 2021-03-16 21:59

JavaScript

DOM