当前位置：首页 > news >正文

js(DOM)基础：11、DOM定义、事件、文档的加载、DOM查询1、DOM实现轮播图、DOM查询2、DOM实现全选

news 2025/11/7 7:44:02

javascript 的dom定义、事件、文档的加载、dom查询、dom实现轮播图、dom实现全选

Ⅰ、DOM的定义：
- 其一、代码为：
- 其二、结果为：
Ⅱ、事件：
- 其一、代码为：
- 其二、结果为：
Ⅲ、文档的加载过程：
- 其一、代码为：
- 其二、结果为：
Ⅳ、DOM查询1：getElementById、getElementsByTagName、getElementsByName
- 其一、css代码为：
- 其二、html代码为：
- 其三、结果为：
Ⅴ、DOM实现轮播图：
- 其一、图片信息为：
- 其二、代码为：
- 其二、结果为：
Ⅵ、DOM查询2：childNodes、children、firstChild(firstElementChild)、parentNode、innerHTML、innerText、previousSibling(previousElementSibling)、nodeValue
- 其一、css代码为：
- 其二、html代码为：
- 其三、结果为：
Ⅶ、DOM实现全选：
- 其一、代码为：
- 其二、结果为：
Ⅷ、小结：

Ⅰ、DOM的定义：

其一、代码为：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button id="btn">我是一个按钮</button><script type="text/javascript">/** 浏览器已经为我们提供 文档节点 对象这个对象是 window 对象的属性* 	可以在页面中直接使用，文档节点代表的是整个网页*/console.log(document);// #document(http://127.0.0.1:5502/day13(%E5%90%ABDOM)/05.DOM.html)(注意：是一个对象)//获取到 button 对象var btn = document.getElementById("btn");//修改按钮的文字btn.innerHTML = "I'm Button";</script></body>
</html>

其二、结果为：

// 一进入页面后的控制台：
在这里插入图片描述

Ⅱ、事件：

其一、代码为：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--我们可以在事件对应的属性中设置一些 js 代码，这样当事件被触发时，这些代码将会执行这种写法我们称为结构和行为耦合，不方便维护，不推荐使用	--><!--<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>--><button id="btn">我是一个按钮</button><script type="text/javascript">/** 事件，就是用户和浏览器之间的交互行为，* 	比如：点击按钮，鼠标移动、关闭窗口。。。*///获取按钮对象var btn = document.getElementById("btn");/** 可以为按钮的对应事件绑定处理函数的形式来响应事件* 	这样当事件被触发时，其对应的函数将会被调用*///绑定一个单击事件//像这种为单击事件绑定的函数，我们称为单击响应函数btn.onclick = function(){alert("你还点~~~");};</script></body>
</html>

其二、结果为：

// 一进入页面后的控制台：

在这里插入图片描述

// 点击后的弹窗展示：

在这里插入图片描述

Ⅲ、文档的加载过程：

其一、代码为：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">/** 浏览器在加载一个页面时，是按照自上向下的顺序加载的，* 	读取到一行就运行一行,如果将 script 标签写到页面的上边，* 	在代码执行时，页面还没有加载，页面没有加载 DOM 对象也没有加载* 	会导致无法获取到 DOM 对象*//** onload 事件会在整个页面加载完成之后才触发* 为 window 绑定一个 onload 事件* 		该事件对应的响应函数将会在页面加载完成之后执行，* 		这样可以确保我们的代码执行时所有的 DOM 对象已经加载完毕了(即：就不会再出现获取不到 DOM 对象的情况，即该代码也不会因为获取不到 DOM 对象而报错)* 	*/window.onload = function(){//获取 id 为 btn 的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};};</script></head><body><button id="btn">点我一下</button><!--<script type="text/javascript">/** 将 js 代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行 js 代码*///获取 id 为 btn 的按钮var btn = document.getElementById("btn");//为按钮绑定一个单击响应函数btn.onclick = function(){alert("hello");};</script>--></body>
</html>

其二、结果为：

// 一进入页面后的控制台：

在这里插入图片描述

// 点击后的弹窗展示：

在这里插入图片描述

Ⅳ、DOM查询1：getElementById、getElementsByTagName、getElementsByName

其一、css代码为：


@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;
}button {width: 300px;margin-bottom: 10px;
}#btnList {float:left;
}#total{width: 450px;float:left;
}ul{list-style-type: none;margin: 0px;padding: 0px;
}.inner li{border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float:left;
}.inner{width:400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;
}

其二、html代码为：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function(){//为 id 为 btn01 的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//查找 #bj 节点var bj = document.getElementById("bj");//打印 bj//innerHTML 通过这个属性可以获取到元素内部的 html 代码// alert(bj.innerHTML);console.log(bj.innerHTML);// 北京};//为 id 为 btn02 的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){//查找所有 li 节点//getElementsByTagName() 可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");//打印 lis//alert(lis.length);//变量 lisfor(var i=0 ; i<lis.length ; i++){// alert(lis[i].innerHTML);console.log(lis[i].innerHTML);// // 北京 上海 东京 首尔 红警 实况 极品飞车 魔兽 IOS Android Windows Phone}};//为 id 为 btn03 的按钮绑定一个单击响应函数var btn03 = document.getElementById("btn03");btn03.onclick = function(){//查找 name=gender 的所有节点var inputs = document.getElementsByName("gender");//alert(inputs.length);for(var i=0 ; i<inputs.length ; i++){/** innerHTML 用于获取元素内部的 HTML 代码的* 	对于自结束标签，这个属性没有意义*///alert(inputs[i].innerHTML);/** 如果需要读取元素节点属性，* 	直接使用 元素.属性名* 		例子：元素.id 元素 .name 元素.value* 		注意：class 属性不能采用这种方式，* 			读取 class 属性时需要使用 元素.className*/// alert(inputs[i].className);console.log(inputs[i].className);// hello hello}};//查找 #city 下所有 li 节点//返回 #city 的所有子节点//返回 #phone 的第一个子节点//返回 #bj 的父节点//返回 #android 的前一个兄弟节点//读取 #username 的 value 属性值//设置 #username 的 value 属性值//返回 #bj 的文本值};</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male"/>Male<input class="hello" type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body>
</html>

其三、结果为：

// 一进入页面后：
在这里插入图片描述
// 点击 查找#bj节点 后的控制台：

在这里插入图片描述

// 点击 查找所有li节点 后的控制台：

在这里插入图片描述

// 点击 查找name=gender的所有节点 后的控制台：
在这里插入图片描述

Ⅴ、DOM实现轮播图：

其一、图片信息为：

在这里插入图片描述

其二、代码为：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#outer{width: 500px;margin: 50px auto;padding: 10px;background-color: greenyellow;/*设置文本居中*/text-align: center;}</style><script type="text/javascript">window.onload = function(){/** 点击按钮切换图片*///获取两个按钮var prev = document.getElementById("prev");var next = document.getElementById("next");/** 要切换图片就是要修改 img 标签的 src 属性*///获取 img 标签var img = document.getElementsByTagName("img")[0];//注意：通过 getElementsByTagName() 拿到的值一定是一个数组，即便只有一个元素值也是数组;//创建一个数组，用来保存图片的路径var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];//创建一个变量，来保存当前正在显示的图片的索引var index = 0;//获取 id 为 info 的 p 元素var info = document.getElementById("info");//设置提示文字info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";//分别为两个按钮绑定单击响应函数prev.onclick = function(){/** 切换到上一张，索引自减*/index--;//判断 index 是否小于 0if(index < 0){index = imgArr.length - 1;}img.src = imgArr[index];//当点击按钮以后，重新设置信息info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";};next.onclick = function(){/** 切换到下一张是 index 自增*/index++;if(index > imgArr.length - 1){index = 0;}//切换图片就是修改 img 的 src 属性//要修改一个元素的属性 元素.属性 = 属性值img.src = imgArr[index];//当点击按钮以后，重新设置信息info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";};};</script></head><body><div id="outer"><p id="info"></p><img src="img/1.jpg" alt="冰棍" /><button id="prev">上一张</button><button id="next">下一张</button></div></body>
</html>

其二、结果为：

// 一进入页面后：

在这里插入图片描述
// 其它情况下的展示：

在这里插入图片描述

Ⅵ、DOM查询2：childNodes、children、firstChild(firstElementChild)、parentNode、innerHTML、innerText、previousSibling(previousElementSibling)、nodeValue

其一、css代码为：


@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;
}button {width: 300px;margin-bottom: 10px;
}#btnList {float:left;
}#total{width: 450px;float:left;
}ul{list-style-type: none;margin: 0px;padding: 0px;
}.inner li{border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float:left;
}.inner{width:400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;
}

其二、html代码为：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">/** 定义一个函数，专门用来为指定元素绑定单击响应函数* 	参数：* 		idStr 要绑定单击响应函数的对象的 id 属性值* 		fun 事件的回调函数，当单击元素时，该函数将会被触发*/function myClick(idStr , fun){var btn = document.getElementById(idStr);btn.onclick = fun;}window.onload = function(){//为 id 为 btn01 的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//查找 #bj 节点var bj = document.getElementById("bj");//打印 bj//innerHTML 通过这个属性可以获取到元素内部的 html 代码// alert(bj.innerHTML);console.log(bj.innerHTML);// 北京};//为 id 为 btn02 的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){//查找所有 li 节点//getElementsByTagName() 可以根据标签名来获取一组元素节点对象//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中//即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");//打印 lis//alert(lis.length);//变量 lisfor(var i=0 ; i<lis.length ; i++){// alert(lis[i].innerHTML);console.log(lis[i].innerHTML);// 北京 上海 东京 首尔 红警 实况 极品飞车 魔兽 IOS Android Windows Phone}};//为 id 为 btn03 的按钮绑定一个单击响应函数var btn03 = document.getElementById("btn03");btn03.onclick = function(){//查找 name=gender 的所有节点var inputs = document.getElementsByName("gender");//alert(inputs.length);for(var i=0 ; i<inputs.length ; i++){/** innerHTML 用于获取元素内部的 HTML 代码的* 	对于自结束标签，这个属性没有意义*///alert(inputs[i].innerHTML);/** 如果需要读取元素节点属性，* 	直接使用 元素.属性名* 		例子：元素.id 元素.name 元素.value* 		注意：class 属性不能采用这种方式，* 			读取 class 属性时需要使用 元素.className*/alert(inputs[i].className);// hello hello}};//为 id 为 btn04 的按钮绑定一个单击响应函数var btn04 = document.getElementById("btn04");btn04.onclick = function(){//获取 id 为 city 的元素var city = document.getElementById("city");//查找 #city 下所有 li 节点var lis = city.getElementsByTagName("li");for(var i=0 ; i<lis.length ; i++){// alert(lis[i].innerHTML);console.log(lis[i].innerHTML);// 北京 上海 东京 首尔 }};//为 id 为 btn05 的按钮绑定一个单击响应函数var btn05 = document.getElementById("btn05");btn05.onclick = function(){//获取 id 为 city 的节点var city = document.getElementById("city");//返回 #city 的所有子节点/** childNodes 属性会获取包括文本节点在内的所有节点* 根据 DOM 标签标签间空白也会当成文本节点* 注意：在 IE8 及以下的浏览器中，不会将空白文本当成子节点，* 	所以该属性在 IE8 中会返回 4 个子元素而其他浏览器是 9 个(即：4个元素节点，5个(空白)文本节点)*/var cns = city.childNodes;//alert(cns.length);/*for(var i=0 ; i<cns.length ; i++){alert(cns[i]);}*//** children 属性可以获取当前元素的所有子元素(即：仅有标签)*/var cns2 = city.children;// alert(cns2.length);console.log(cns2.length);// 4};//为 id 为 btn06 的按钮绑定一个单击响应函数var btn06 = document.getElementById("btn06");btn06.onclick = function(){//获取 id 为 phone 的元素var phone = document.getElementById("phone");//返回 #phone 的第一个子节点//phone.childNodes[0];//firstChild 可以获取到当前元素的第一个子节点（包括空白文本节点）var fir = phone.firstChild;//firstElementChild 获取当前元素的第一个子元素/** firstElementChild 不支持 IE8 及以下的浏览器，* 	如果需要兼容他们，尽量不要使用*///fir = phone.firstElementChild;// alert(fir);console.log(fir);// <li>IOS</li>};//为 id 为 btn07 的按钮绑定一个单击响应函数myClick("btn07",function(){//获取 id 为 bj 的节点var bj = document.getElementById("bj");//返回 #bj 的父节点(即：肯定不是本文，涉及父节点，肯定是元素)var pn = bj.parentNode;// alert(pn.innerHTML);console.log(pn.innerHTML);// <li id="bj">北京</li>// <li>上海</li>// <li>东京</li>// <li>首尔</li>/** innerText* 	- 该属性可以获取到元素内部的文本内容* 	- 它和 innerHTML 类似，不同的是它会自动将 html 标签去除(即：是文本)*///alert(pn.innerText);});//为 id 为 btn08 的按钮绑定一个单击响应函数myClick("btn08",function(){//获取 id 为 android 的元素var and = document.getElementById("android");//返回 #android 的前一个兄弟节点（也可能获取到空白的文本）// var ps = and.previousElementSibling;var ps = and.previousSibling;//previousElementSibling 获取前一个兄弟元素(即：肯定不是文本)，IE8 及以下不支持//var pe = and.previousElementSibling;// alert(ps);console.log(ps);// #text(即：此时是空白的文本)});//读取 #username 的 value 属性值myClick("btn09",function(){//获取 id 为 username 的元素var um = document.getElementById("username");//读取 um 的 value 属性值//文本框的 value 属性值，就是文本框中填写的内容// alert(um.value);console.log(um.value);// abcde});//设置 #username 的 value 属性值myClick("btn10",function(){//获取 id 为 username 的元素var um = document.getElementById("username");um.value = "今天天气真不错~~~";});//返回 #bj 的文本值myClick("btn11",function(){//获取 id 为 bj 的元素var bj = document.getElementById("bj");//alert(bj.innerHTML);//alert(bj.innerText);// console.log(bj.innerHTML);// 北京// console.log(bj.innerText);// 北京//获取 bj 中的文本节点var fc = bj.firstChild;// alert(fc.nodeValue);// console.log(fc.nodeValue);// 北京// alert(bj.firstChild.nodeValue);//对于文本节点来说，节点的 nodeValue 就是文本内容，因此对于文本节点来说通过 nodeValue 可以获取文本内容;console.log(bj.firstChild.nodeValue);// 北京});};</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input class="hello" type="radio" name="gender" value="male"/>Male<input class="hello" type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body>
</html>

其三、结果为：

// 一进入页面后：
在这里插入图片描述

// 点击 查找#city下所有li节点 后的控制台：

在这里插入图片描述

// 点击 返回#city的所有子节点 后的控制台：

在这里插入图片描述

// 点击 返回#phone的第一个子节点 后的控制台：

在这里插入图片描述

// 点击 返回#bj的父节点 后的控制台：

在这里插入图片描述

// 点击 返回#android的前一个兄弟节点 后的控制台：

在这里插入图片描述

// 点击 返回#username的value属性值 后的控制台：

在这里插入图片描述

// 点击 设置#username的value属性值 后的控制台：

在这里插入图片描述

// 点击 返回#bj的文本值 后的控制台：

在这里插入图片描述

Ⅶ、DOM实现全选：

其一、代码为：


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">window.onload = function(){//获取四个多选框 itemsvar items = document.getElementsByName("items");//获取全选/全不选的多选框var checkedAllBox = document.getElementById("checkedAllBox");/** 全选按钮* 	- 点击按钮以后，四个多选框全都被选中*///1.#checkedAllBtn//为 id 为 checkedAllBtn 的按钮绑定一个单击响应函数var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function(){//遍历 itemsfor(var i=0 ; i<items.length ; i++){//通过多选框的 checked 属性可以来获取或设置多选框的选中状态//alert(items[i].checked);//设置四个多选框变成选中状态items[i].checked = true;}//将全选/全不选设置为选中checkedAllBox.checked = true;};/** 全不选按钮* 	- 点击按钮以后，四个多选框都变成没选中的状态*///2.#checkedNoBtn//为 id 为 checkedNoBtn 的按钮绑定一个单击响应函数var checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function(){for(var i=0; i<items.length ; i++){//将四个多选框设置为没选中的状态items[i].checked = false;}//将全选/全不选设置为不选中checkedAllBox.checked = false;};/** 反选按钮* 	- 点击按钮以后，选中的变成没选中，没选中的变成选中*///3.#checkedRevBtnvar checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function(){//将 checkedAllBox 设置为选中状态checkedAllBox.checked = true;for(var i=0; i<items.length ; i++){//判断多选框状态/*if(items[i].checked){//证明多选框已选中，则设置为没选中状态items[i].checked = false;}else{//证明多选框没选中，则设置为选中状态items[i].checked = true;}*/items[i].checked = !items[i].checked;//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[i].checked){//一旦进入判断，则证明不是全选状态//将 checkedAllBox 设置为没选中状态checkedAllBox.checked = false;}}//在反选时也需要判断四个多选框是否全都选中};/** 提交按钮：* 	- 点击按钮以后，将所有选中的多选框的 value 属性值弹出*///4.#sendBtn//为 sendBtn 绑定单击响应函数var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function(){//遍历 itemsfor(var i=0 ; i<items.length ; i++){//判断多选框是否选中if(items[i].checked){// alert(items[i].value);console.log(items[i].value);}}};//5.#checkedAllBox/** 全选/全不选 多选框* 	- 当它选中时，其余的也选中，当它取消时其余的也取消* * 在事件的响应函数中，响应函数是给谁绑定的 this 就是谁*///为 checkedAllBox 绑定单击响应函数checkedAllBox.onclick = function(){//alert(this === checkedAllBox);//设置多选框的选中状态for(var i=0; i <items.length ; i++){items[i].checked = this.checked;}};//6.items/** 如果四个多选框全都选中，则 checkedAllBox 也应该选中* 如果四个多选框没都选中，则 checkedAllBox 也不应该选中*///为四个多选框分别绑定点击响应函数for(var i=0 ; i<items.length ; i++){items[i].onclick = function(){//将 checkedAllBox 设置为选中状态checkedAllBox.checked = true;for(var j=0 ; j<items.length ; j++){//判断四个多选框是否全选//只要有一个没选中则就不是全选if(!items[j].checked){//一旦进入判断，则证明不是全选状态//将 checkedAllBox 设置为没选中状态checkedAllBox.checked = false;//一旦进入判断，则已经得出结果，不用再继续执行循环(即：省性能)break;}}};}};</script>
</head>
<body><form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /><input type="checkbox" name="items" value="足球" />足球<input type="checkbox" name="items" value="篮球" />篮球<input type="checkbox" name="items" value="羽毛球" />羽毛球<input type="checkbox" name="items" value="乒乓球" />乒乓球<br /><input type="button" id="checkedAllBtn" value="全　选" /><input type="button" id="checkedNoBtn" value="全不选" /><input type="button" id="checkedRevBtn" value="反　选" /><input type="button" id="sendBtn" value="提　交" /></form>
</body>
</html>

其二、结果为：

// 一进入页面后的控制台：
在这里插入图片描述
// 点击提交操作的控制台值(即：选择了什么在提交后就输出什么)：

在这里插入图片描述

Ⅷ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

查看全文

http://www.dtcms.com/a/577158.html