JavaScript-03DOM
2024-05-21 16:00:30
DOM简介
DOM查询
DOM
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--事件：用户和浏览器之间的互动-->
</head>
<body><button id="btn">按钮</button><script>// 获取id为btn的按钮var btn = document.getElementById("btn");/*- 为按钮的对应事件绑定处理事件函数的形式来响应事件，当事件触发时，函数被调用。*/// 为按钮绑定一个单击响应函数btn.onclick = function(){alert("点我干嘛？")};</script>
</body>
</html>
文档的加载
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="">window.onload = function(){// 获取id为btn的按钮var btn = document.getElementById("btn");// 为按钮绑定一个单击响应函数btn.onclick = function(){alert("点我干嘛？")};};</script>
</head>
<body><button id="btn">按钮</button>
</body>
</html>
DOM查询
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../code/02CSS/reset.css"><script>/*定义为指定元素绑定单击响应函数参数：idstr 要绑定单击响应函数的对象的id属性值fun 时间的回调函数，当单击元素时，函数被触发*/function myclick(idstr,fun){var btn01 = document.getElementById(idstr);btn01.onclick = fun;};window.onload = function(){// 为id 为btn01绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){// 查找#bj节点var bj = document.getElementById("bj")// innerHTML 查找id内的元素alert(bj.innerHTML);};// 为id 为btn02绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){// getElementsByTagName 根据标签名查找会返回一个数组，var lis = document.getElementsByTagName("li");// alert(lis.length);for(var i = 0; i <lis.length; i++){alert(lis[i].innerHTML);};};var btn03 = document.getElementById("btn03");btn03.onclick = function(){var value_bite = document.getElementsByName("性别");// alert(value_bite);for(var i= 0;i < value_bite.length; i++ ){alert(value_bite[i].value); };};var btn04 = document.getElementById("btn04");btn04.onclick = function(){var city_lis = city.getElementsByTagName("li");for(var i = 0; i < city_lis.length; i++){alert(city_lis[i].innerHTML);};};var btn05 = document.getElementById("btn05");btn05.onclick = function(){// 返回#city 的所有子节点var city = document.getElementById("city");// childNodes属性会获取包括文本节点在内的所有子节点// DOM标签内部的空白也会变成文本节点var cns = city.childNodes;// alert(cns.length);var cns02 = city.children;for(var i = 0; i <cns02.length;i++){alert(cns02[i].innerHTML);};};var btn06 = document.getElementById("btn06");btn06.onclick = function(){var city = document.getElementById("city");// firstChild 查找第一个子节点，包括空白文本var fir = city.firstChild;// alert(fir);// firstElementChild 查找第一个子元素，但是不兼容IE8以下fir = city.firstElementChild;alert(fir.innerHTML);};myclick("btn07",function(){var bj = document.getElementById("bj");// parentNode 查找父节点var pn = bj.parentNode;// alert(pn.innerHTML);// innerText 会将HTML标签去除alert(pn.innerText);});myclick("btn08",function(){var usr = document.getElementById("username");alert(usr.value);});myclick("btn09", function(){var usr = document.getElementById("username");usr.value= "修改后的value值是这个";});};</script><style>#city li{background-color: bisque;border: 1px solid black;display: inline;margin: 0 10px;padding: 5px;}#city{margin-left: -40px;}.test{border: 1px solid brown;padding-left: 20px;margin-bottom: 30px;width: 400px;}.index{border: 1px solid green;padding:20px;width: 400px;}</style>
</head>
<body> <div class="inner"> <p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>重庆</li><li>深圳</li><li>海南</li></ul></div><br><br><div class="test"><p>测试通过name属性来获取元素节点</p><div class="inner">性别：<input type="radio" name= "性别" value="">男<input type="radio" name="性别" value="">女<br><br>姓名：<input type="text" name="name" id="username" value="321"><br><br></div></div><div class="index"><div><button id="btn01">查找#bj节点</button></div><br><div><button id="btn02">查找所有li节点</button></div><br><div><button id="btn03">查找 name= "性别" 下的所有value节点</button></div><br><div><button id="btn04">查找 city 下的所有li节点 </button></div><br><div><button id="btn05">查找 city 下的所有子节点 </button></div><br><div><button id="btn06">查找 city 下的第一个节点 </button></div><br><div><button id="btn07">查找 id 的父节点 </button></div><br><div><button id="btn08">查找 username 的value值 </button></div><br><div><button id="btn09">修改 username 的value值 </button></div><br></div>
</body>
</html>
图片切换练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片切换</title><style>*{margin: 0;padding: 0;}.outer{ background-color: bisque;text-align: center;margin: 0 auto;margin-top: 100px;}#info{padding: 20px 0 15px 0;}</style><script>window.onload = function(){// 获取两个按钮var prev = document.getElementById("prev");var next = document.getElementById("next");var img = document.getElementsByTagName("img")[0];var img_list = ["js基础/33图片练习/01.jpg", "js基础/33图片练习/02.png","js基础/33图片练习/03.png","js基础/33图片练习/04.png","js基础/33图片练习/05.png","js基础/33图片练习/06.png"];var index = 0;var info = document.getElementById("info");info.innerHTML = "共有 "+ img_list.length + " 张图片，当前是第 "+(index+1)+" 张";prev.onclick = function(){index--;if(index < 0){index = (img_list.length-1);};img.src = img_list[index];info.innerHTML = "共有 "+ img_list.length + " 张图片，当前是第 "+(index+1)+" 张";};next.onclick = function(){index++;if(index > img_list.length-1){index = 0;};img.src = img_list[index];info.innerHTML = "共有 "+ img_list.length + " 张图片，当前是第 "+(index+1)+" 张";};};</script>
</head>
<body><div class="outer"><p id="info"></p><img src="js基础/33图片练习/01.jpg"><br><button id="prev">上一张</button><button id="next">下一张</button></div>
</body>
</html>
全选练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>全选练习</title><script>window.onload = function(){var checkAllBtn = document.getElementById("checkAllBtn");checkAllBtn.onclick = function(){// 获取四个多选框var items = document.getElementsByName("items");// 遍历数组for(var i = 0;i<items.length;i++){// 设置四个多选框成为选中状态// 通过多选框的checked属性设置或获取多选框状态items[i].checked = true;}};var checknoAllBtn = document.getElementById("checknoAllBtn");checknoAllBtn.onclick = function(){// 获取四个多选框var items = document.getElementsByName("items");// 遍历数组for(var i = 0;i<items.length;i++){items[i].checked = false;};};var checkRevBtn = document.getElementById("checkRevBtn");checkRevBtn.onclick = function(){// 获取四个多选框var items = document.getElementsByName("items");// 遍历数组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;};};var sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function(){var items = document.getElementsByName("items");for(var i = 0;i <items.length;i++){if(items[i].checked){alert(items[i].value);};};}; var checkAllBox = document.getElementById("checkAllBox");checkAllBox.onclick = function(){var items = document.getElementsByName("items");for(var i = 0;i<items.length;i++){// items[i].checked = checkAllBox.checked;items[i].checked = this.checked;};};/*四个多选框都选中，则checkAllBox也应该被选中*/var items = document.getElementsByName("items");for(var i = 0;i<items.length;i++){items[i].onclick = function(){checkAllBox.checked = true;for(var j=0;j<items.length;j++){if(!items[j].checked){checkAllBox.checked = false;break;};};};};};</script>
</head>
<body><form action="">你喜欢的运动是什么？<input type="checkbox" id="checkAllBox">全选/全不选<br><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><br><input type="button" id="checkAllBtn" value= "全选"><input type="button" id="checknoAllBtn" value= "全不选"><input type="button" id="checkRevBtn" value= "反选"><input type="button" id="sendBtn" value= "提交"></form>
</body>
</html>
DOM增删改
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#city li{background-color: bisque;border: 1px solid black;display: inline;margin: 0 10px;padding: 5px;}#city{margin-left: -40px;}
</style>
<script>window.onload = function(){myClick("btn01",function(){// document.createElement 创建元素节点var li = document.createElement("li");// document.createTextNode 创建文本节点var jx = document.createTextNode("江西");// 父节点.appendChild(子节点) 将子节点添加到父节点中li.appendChild(jx);var city = document.getElementById("city");city.appendChild(li);});myClick("btn02", function(){var li = document.createElement("li");var hn = document.createTextNode("湖南");li.appendChild(hn);// 注：要添加节点时，必须将旧节点表示出来var bj = document.getElementById("bj");var city = document.getElementById("city");// 父节点.insertBefore(新节点, 旧节点)city.insertBefore(li, bj);});myClick("btn03", function(){var li = document.createElement("li");var sc = document.createTextNode("四川");li.appendChild(sc);var cq = document.getElementById("cq");var city = document.getElementById("city");city.replaceChild(sc, cq);});myClick("btn04", function(){var hnn = document.getElementById("hnn");hnn.parentNode.removeChild(hnn);});myClick("btn05", function(){var city = document.getElementById("city");// alert(city.innerHtml); 读取元素节点alert(city.innerText);});myClick("btn06", function(){var hnn = document.getElementById("hnn");hnn.innerHTML = "江西";});myClick("btn07", function(){var city = document.getElementById("city");city.innerHTML += "<li>云南</li>";});myClick("btn08", function(){var city = document.getElementById("city");var li = document.createElement("li");li.innerHTML = "优秀";city.appendChild(li);});};function myClick(idstr, fun){var btn = document.getElementById(idstr);btn.onclick = fun;};
</script>
<body><div class="inner"> <p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li id="cq">重庆</li><li>深圳</li><li id="hnn">海南</li></ul></div><br><br><div class="index"><div><button id="btn01">创建江西节点并且添加到#city中</button></div><br><div><button id="btn02">创建湖南节点并且添加到北京之前</button></div><br><div><button id="btn03">创建四川节点并且替换重庆节点</button></div><br><div><button id="btn04">删除海南节点 </button></div><br><div><button id="btn05">读取city内的元素 </button></div><br><div><button id="btn06"> 替换海南为江西</button></div><br><div><button id="btn07"> 增加一个城市</button></div><br><div><button id="btn08"> 最优秀的增加城市方案</button></div><br></div>
</body>
</html>
添加空白练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>table{width:30%;border: 1px solid black;margin: 10px auto;/* border-spacing: 5px; 设置边框之间的距离 *//* border-spacing: 0px; *//* border-collapse: collapse; 设置边框合并，*/border-collapse: collapse;}/* 使用td 设置边框，可以显示横向和纵向边框使用tr 设置边框，只会显示横向边框*/td{border: 1px solid black;/* 文字在表格中默认垂直居中，使用text/vertical-align: center可设置水平或纵向位置设置; */height: 30px;text-align: center;}th{border: 1px solid black;height: 15px;text-align: center;}/* 给tr/td 设置横向/纵向颜色设置时，可以集合伪元素，nth-child 实现选择行列设置*/tr:nth-child(2n){color: rgb(175, 112, 88);}h4{text-align: center;margin-top: 100px;font-size: 20px;}
</style><script>// a的删除函数function delA(){var tr = this.parentNode.parentNode;// var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;// confirm能够生成确定和取消两个按钮，并且返回truevar flag = confirm("确认删除 "+ name + "吗？")if(flag){// 如果confirm点击确定，则执行删除操作tr.parentNode.removeChild(tr);};return false;};window.onload = function(){// 查找所有a标签var allA = document.getElementsByTagName("a");for(var i = 0;i<allA.length;i++){// 遍历所有a 并为其指定单击响应函数allA[i].onclick = delA;};var subButton = document.getElementById("subButton");subButton.onclick = function(){// 获取用户添加信息var name = document.getElementById("empName").value;var email = document.getElementById("Email").value;var sal = document.getElementById("Salary").value;var tr = document.createElement("tr");tr.innerHTML = "<td>"+ name + "</td>"+"<td>"+ email+ "</td>"+"<td>"+ sal + "</td>"+"<td><a href= '#'>delete</a></td>";var a = tr.getElementsByTagName("a")[0];a.onclick = delA;var eeTable = document.getElementById("eeTable");var tbody = eeTable.getElementsByTagName("tbody")[0];tbody.appendChild(tr);};};
</script>
<body><table id="eeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th>删除按钮</th></tr><tr><td>Tom</td><td>1.com </td> <td>$500</td ><td><a href="#">delete</a></td></tr><tr><td>Jerry</td><td>2.com</td><td>$10</td><td><a href="#">delete</a></td></tr><tr><td>jack</td><td>3.com</td><td>$100000</td><td><a href="#">delete</a></td></tr></table><div class="formTable"><h4>请添加新员工:</h4><table><tr><td class="word">Name:</td><td class="inp"><input type="text" name="empName" id="empName"></td></tr><tr><td class="word">Email:</td><td class="inp"><input type="text" name="Email" id="Email"></td></tr><tr><td class="word">Salary:</td><td class="inp"><input type="text" name="Salary" id="Salary"></td></tr><tr><td colspan="2" align="center"><button id="subButton" value="abc">submit</button></td></tr></table></div>
</body>
</html>
DOM操作css样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>修改样式</title><style>#box1{width: 150px;height: 150px;background-color: bisque;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){/* 通过js修改元素的样式：语法：元素.style.样式名 = 样式值；注：当样式名含有‘-’时，需要将连接符之间的小写转换成为大写*/box1.style.width = "200px";box1.style.borderBottomColor = "red";box1.style.borderRadius = "50%";};var btn02 = document.getElementById("btn02");btn02.onclick = function(){// 注：读取样式只能够读取内联样式，如下height没有改变，则不能读取出来// box1.currentStyle.width 显示当前生效的样式，但只在IE生效alert(box1.style.width);alert(box1.style.height);};};</script>
</head>
<body><div id="box1"></div><br><button id="btn01">点击改变box1样式</button><button id="btn02">读取box1样式</button>
</body>
</html>
读取元素样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>读取</title><style>#box1{width: 150px;height: 150px;background-color: bisque;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){/*getComputedStyle(元素,null) 显示元素样式，后面需要跟两个参数该方法会返回个对象，可以使用 --- 对象.样式名--- 来获取具体的样式var obj = getComputedStyle(box1,null).height;alert(obj);*/// 注：获取样式内的样式必须加双引号var w = getStyle(box1,"width");alert(w);};};function getStyle(obj, name){if(window.getComputedStyle){// 正常浏览器，使用getComputedStyle(obj, null)方法return getComputedStyle(obj, null)[name];}else{// IE8浏览器，使用currentStyle方法return obj.currentStyle[name];};};</script>
</head>
<body><div id="box1"></div><br><button id="btn01">点击显示box1当前生效样式</button>
</body>
</html>
其他样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>#box1{width: 150px;height: 150px;background-color: bisque;padding: 10px;border: 1px solid burlywood;margin: 5px;}#box2{padding: 50px;width: 200px;height: 300px;background-color: cornflowerblue;overflow: scroll;}#box4{width: 100px;height: 400px;background-color: crimson;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){/*clientHeight 返回元素的可见宽度/高度，包括元素内容以及内边距offsetHeight 返回元素的全部宽度/高度，包括元素内容以及内边距，边框等alert(box1.clientHeight);alert(box1.clientWidth);alert(box1.offsetHeight);*/// offsetParent 获取当前元素的定位元素父元素var op = box1.offsetParent;alert(op.id);// offsetLeft 当前元素相对于其定位父元素的水平偏移量/垂直偏移量alert(box1.offsetLeft);// scrollHeight，scrollWidth 获取滚动区域的高度或宽度alert(box4.scrollHeight);// scrollTop 滚动条滚动的垂直或水平距离alert(box4.scrollTop);};};</script>
</head>
<body><div id="box3" style="position: relative;"><div id="box2" style="position: relative;"><div id="box1"></div><div id="box4"></div></div></div><br><button id="btn01">测试按钮</button></body>
</html>
scroll练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#info{width: 320px;height: 500px;background-color:coral;overflow: auto;}</style><script>window.onload = function(){// 当垂直滚动条到底后按钮可点var info = document.getElementById("info");// 获取inputvar inputs = document.getElementsByTagName("input");// 为info绑定一个滚动事件info.onscroll = function(){// 检查滚动条是否到底if(info.scrollHeight- info.scrollTop == info.clientHeight){/*disable 属性可以设置元素是否禁用，true则禁用，false则可用*/inputs[0].disabled = false;inputs[1].disabled = false;};};};</script>
</head>
<body><h3>欢迎您注册！</h3><p id="info">风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；风在淅淅沥沥的雨中，缓缓走过那路口；</p><input type="checkbox" disabled= "disabled">我已仔细阅读协议，并遵守该协议!<input type="submit" value="注册" disabled= "disabled">
</body>
</html>
事件对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件对象</title><style>#areaDiv{width: 600px;height: 300px;background-color: burlywood;border: 1px solid black;}#showMsg{width: 600px;height: 100px;background-color: cadetblue;border: 1px solid black;}</style><script>window.onload = function(){var areaDiv = document.getElementById("areaDiv");var showMsg = document.getElementById("showMsg");// onmousemove: 设置鼠标在元素中移动触发效果areaDiv.onmousemove = function(event){/*- 在IE8中，响应函数被触发时，不会传递事件函数，- 在IE8，是将事件对象作为window对象的属性保存*/// alert("this")/* 方法一 解决兼容性if(!event){enent = window.enent; // 如果事件不成立，则将event转换成window.event};*/ event = event || window.event; // 事件成立则返回event，不成立则返回window.event// clientX 获取鼠标指针的水平坐标/垂直坐标var x = event.clientX;var y = event.clientY;// alert("( x, y ) = " + "( " + x + " , "+ y + " )");showMsg.innerHTML = " ( x, y ) = " + "( " + x + " , "+ y + ")";};};</script>
</head>
<body><div id="areaDiv"></div><br><br><div id="showMsg"></div>
</body>
</html>
鼠标跟随练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>鼠标跟随</title><style>#box1{width: 50px;height: 50px;background-color: bisque;border-radius: 50%;border: 1px solid red;/* 注：必须设置定位，因为偏移量是父元素定位偏移*/position: absolute; }</style><script>window.onload = function(){// 设置绑定为document而不是box1是为了全局移动document.onmousemove = function(event){// 解决兼容问题event = event || window.event;var st = document.body.scrollTop || document.documentElement.scrollTop;var sl = document.body.scrollLeft || document.documentElement.scrollLeft;/* 获取鼠标坐标- clientX/Y 是相对于可见窗口的偏移量，即页面的左上角- 而div的偏移是相对于浏览器的最开始的左上角pageX/Y 可获取相对于当前页面的坐标，但不支持ie8var left = event.pageX;var top = event.pageY;*/var left = event.clientX;var top = event.clientY;// 设置div 的偏移量,注：偏移量是数值，所以要带单位box1.style.left = left + sl + st+ "px";box1.style.top = top + sl + st + "px";}; };</script>
</head>
<body><div id="box1"></div>
</body>
</html>
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title> 冒泡 </title><style>#box1{width: 100px;height: 100px;background-color: blanchedalmond;}#sp{background-color: coral;border: 1px solid black;}</style><script>window.onload = function(){/* 事件冒泡：事件的向上传导，后代元素触发后，祖先元素也触发取消冒泡: 事件.cancelBubble = true;*/var box1 = document.getElementById("box1");var sp = document.getElementById("sp")box1.onclick = function(event){alert("box1点击响应");event.cancelBubble = true;};sp.onclick = function(){alert("span单击响应");};document.body.onclick = function(){alert("body单击响应");}};</script>
</head>
<body><div id="box1">box1<span id="sp">span</span></div>
</body>
</html>
事件委派
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>事件的委派</title><script>window.onload = function(){var btn01 = document.getElementById("btn01");var ul = document.getElementById("ul");btn01.onclick = function(){var li = document.createElement("li");li.innerHTML = "<a href='#' class= 'link'>新增超链接</a>";ul.appendChild(li);}; // 为超链接绑定单击响应函数var allA = document.getElementsByTagName("a");/*事件的委派：将事件绑定给共同的祖先元素，后代元素触发时，会冒泡到祖先元素，从而执行效果*/ul.onclick = function(event){event = event || window.event;// target 就是你点击的对象if(event.target.className == "link"){alert("whis");};};};</script>
</head>
<body><button id="btn01">添加新的超链接</button><ul id="ul"><li><a href="#" class="link">超链接1</a></li><li><a href="#" class="link">超链接2</a></li><li><a href="#" class="link">超链接3</a></li></ul>
</body>
</html>
事件绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><script>window.onload = function(){var btn01 = document.getElementById("btn01");/*addEventListener 绑定多个响应函数- 一般传递三个参数，(事件的字符串，回调函数，false)- 注：事件的字符串不需要加on，不兼容IE8，响应是从上往下btn01.addEventListener("click",function(){alert(1);},false);btn01.addEventListener("click",function(){alert(2);},false);btn01.addEventListener("click",function(){alert(3);},false);*//*attachEvent 绑定多个响应函数- 一般传递两个参数，(事件的字符串，回调函数)- 注：事件的字符串一定要加on ，且只兼容IE8，响应是从下往上- 即后绑定先执行btn01.attachEvent("onclick",function(){alert(1);});*/bind(btn01, "click", function(){alert("测试");});/*参数：- obj 要绑定事件的对象- eventStr 事件的字符串，不加on- callback 回调函数*/ function bind(obj, eventStr, callback){// 除了IE8 不兼容if(obj.addEventListener){obj.addEventListener(eventStr, callback, false);}else{// 兼容IE8obj.attachEvent("on"+ eventStr, function(){callback.call(obj);});};};};</script>
</head>
<body><button id="btn01">事件</button>
</body>
</html>
事件传播
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/*事件传播：捕获阶段，目标阶段，冒泡阶段 */</script>
</head>
<body>
</body>
</html>
拖拽
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽</title><style>#box1{width: 100px;height: 100px;background-color: bisque;position:absolute;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");box1.onmousedown = function(event){// 设置捕获box1.setCapture && box1.setCapture(); // alert("单击鼠标时，响应事件")event = event || window.event;/*div的偏移量 鼠标.clientX - 元素.offsetLeftdiv的偏移量 鼠标.clientY - 元素.offsetTop*/var ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;document.onmousemove = function(event){event = event || window.event;var left = event.clientX - ol;var top = event.clientY - ot;box1.style.left = left + "px";box1.style.top = top + "px";box1.releaseCpature && box1.releaseCpature();}; document.onmouseup = function(){document.onmousemove = null;document.onmouseup = null;};return false; }; };</script>
</head>
<body><div id="box1"></div>
</body>
</html>
setCapture
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function(){var btn01 = document.getElementById("btn01");var btn02 = document.getElementById("btn02");btn01.onclick = function(){alert("1");};btn02.onclick = function(){alert("2");};/*btn01.setCapture; 在IE8 捕获会导致鼠标按下相关事件捕获*/};</script>
</head>
<body><button id="btn01">按钮1</button><button id="btn02">按钮2</button>
</body>
</html>
鼠标滚轮事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1{width: 200px;height: 200px;background-color: tomato;margin: 50px auto;}</style><script>window.onload = function(){var box1 = document.getElementById("box1");// onmousewheel 鼠标滚轮滚动事件，滚轮滚动时触发，不支持火狐box1.onwheel = function(event){event = event || window.event;if(event.wheelDelta > 0){// alert("shang");box1.style.height = box1.clientHeight - 30 + "px";}else{// alert("xia");box1.style.height = box1.clientHeight + 30 + "px";};event.preventDefault();return false;};};</script>
</head>
<body><div id="box1"></div>
</body>
</html>
键盘事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 键盘事件一般绑定给可获得焦点对象或文档window.onload = function(){// onkeydown 键盘按下后事件触发// onkeyup 键盘松开后事件触发// eyCode 按键的编码/*document.onkeydown = function(event){console.log(event.keyCode);};*/var input = document.getElementsByTagName("input")[0];input.onkeydown = function(){// console.log(event.keyCode);};};</script>
</head>
<body><input type="text">
</body>
</html>
键盘事件练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>#box1{width: 100px;height: 100px;background-color: tomato;border-radius: 50%;position: absolute;}</style><script>window.onload = function(){document.onkeydown = function(event){event = event || window.event;var speed = 10; // 移动速度// 37-左 38-上 39-右 40-下// alert(event.keyCode);switch(event.keyCode){case 37:// alert("left");box1.style.left = box1.offsetLeft - speed + "px";break; case 38:// alert("top");box1.style.top = box1.offsetTop - speed + "px";break; case 39:// alert("right");box1.style.left = box1.offsetLeft + speed + "px";break; case 40:// alert("bottom");box1.style.top = box1.offsetTop + speed + "px";break; };};};</script>
</head>
<body><div id="box1"></div>
</body>
</html>
navigator
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>navigator</title><script>/*BOM: 浏览器模型- 可通过js操纵浏览器BOM对象：- Window ：浏览器窗口，- Navigator： 浏览器信息，可识别不同的浏览器- Location： 代表浏览器地址信息，可获取地址信息，或操作浏览器跳转页面- History： 浏览器历史记录- Screen： 屏幕信息*/
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.122 Safari/537.36alert(navigator.userAgent); // 正则表达提取// IE中特有的ActiveXObject属性var ua = navigator.userAgent;if(/chrome/i.test(ua)){alert("chrome浏览器");}else if(/firefox/i.test(ua)){alert("火狐浏览器");};</script>
</head>
<body></body>
</html>
JavaScript-03DOM相关推荐
- 【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
- 【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
- 【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
- 【JavaScript总结】JavaScript语法基础：JS编码
运算符 数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
- 【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
- 【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
- Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
- [JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人 上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟 数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
- [JavaScript] JavaScript 数组挖掘，不只是讲数组哟
课程来源:后盾人 数组引用类型分析 数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...
- linux下用js生成xml,js2xml:将javascript字符串转换为xml
有时候爬数据遇到像下面这种,数据在script标签中以javascript形式存在. var totalReviewsValue = 32; var averageRating = 4.5; if(t ...
最新文章
- 收录对网站优化起到什么作用？
- /usr/bin被删除的操作
- java只有高跟很高_女明星们为了合影不输，练就踩高跷本领，鞋跟一个比一个高！...
- 大厂面试官最喜欢问的面试难点
- ce测试数据文章ce测试数据文章ce测试数据文章ce测试数据文章ce测试数据文章ce测试数据文章ce测试数据文章ce测试数据文章ce测试数据文章
- 10分钟做一个新闻问答web站点[iVX低代码实战]
- vue-cli使用swiper4在ie以及safari报错
- bash: vim: command not found
- 我就拜你为师的飞秋爱好者
- 通过遍历类向Aspose.cell模板中插入数据
- 父类子类的创建对象和实例化
- Linux面试必备20个常用命令
- Kali利用metasploit 生成后门程序，操作目标主机cmd
- vnr光学识别怎么打开_SLS46CK4单光束安全传感器原版使用说明-Leuzeelectronic.PDF
- Linux查看或修改ip地址
- mysql索引执行顺序_mysql索引及sql执行顺序
- com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException:异常问题解析!
- 力天创见Brickstream排队客流统计
- 越来越多动物正在灭绝，“AI+动物”能否改变这一局面？
- 微软365网盘国内服务器,5TB微软Office365网盘OneDrive详细申请方法教程