JS的DOM(获取元素、元素属性、value属性、显示时间、计时器、节点增删改查等)
一. 获取元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function test() { // 获取userName的两种方法： // 1. 根据ID获取userName对象,一个ID只能使用一次 let userName = document.getElementById("userName"); // console.log(userName); // <input id="userName" type="text"> // alert(userName); // [object HTMLInputElement] // 2. 根据标签名来获取userName对象 // 这里注意，因为同一个标签名对应有多个标签内容 // 因此这里得到的是一个数组 let userNameList = document.getElementsByTagName("input"); // console.log(userNameList[0]); // <input id="userName" type="text"> // alert(userNameList[0]); // // [object HTMLInputElement] // 展示数组中每个元素——使用for循环 // for (let i = 0; i < userNameList.length; i++) { // alert(userNameList[i]); // 5个[object HTMLInputElement] // } // 根据元素的属性(name属性)来获取对应标签信息 // 注意这里同样是数组 let hobbyList = document.getElementsByName("hobby"); // console.log(hobbyList[0]); // <input type="checkbox" name="hobby" value="eat"> // alert(hobbyList[0]); // [object HTMLInputElement] // alert(hobbyList[0].nodeName); // INPUT(获取节点名字) // alert(hobbyList[0].nodeType); // 1(获取节点类型) // 根据标签名查找所有子节点(chileNodes) var pNodes = document.getElementsByTagName("p"); // var childNodes = pNodes[0].childNodes; // console.log(childNodes); // NodeList(3) [ #text, span, #text ] // alert(childNodes[0]).nodeType; // [object Text](查看子节点类型,空格或换行都属于文本节点) // 获取父节点(parentNode) let parentNode = pNodes[0].parentNode; // console.log(parentNode); // <body onload="test()"> // alert(parentNode); // [object HTMLBodyElement] // 获取同级节点 let otherNode = pNodes[0].nextElementSibling; // console.log(otherNode); // <p class="p2"> // alert(otherNode); // [object HTMLParagraphElement] // alert(otherNode.nodeName); // p // 获取元素hr let hrNode = pNodes[0].previousElementSibling.nodeName; alert(hrNode); // HR } </script> </head> <!--这里的作用是让页面先加载好再执行上面的JS代码--> <body onload="test()"> 用户名：<input type="text" id="userName" /> 密码：<input type="text" id="userPwd" /> 兴趣爱好：吃<input type="checkbox" name="hobby" value="eat" /> 喝<input type="checkbox" name="hobby" value="drink" /> 玩<input type="checkbox" name="hobby" value="happy" /> <hr /> <p class="p1"> <span>今天礼拜五</span> </p> <p class="p2"> <span>明天礼拜六</span> </p> </body> </html>
二. 元素的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // 页面加载完成后执行function函数中的js代码 window.onload = function () { // 根据元素的class属性查找 let pNodes = document.getElementsByClassName("p1"); console.log(pNodes[0].innerHTML); // <span>今天礼拜六</span> // 获取元素p1的html内容 // alert(pNodes[0].innerHTML); // <span>今天礼拜六</span> // 改变元素p1的html内容 pNodes[0].innerHTML = "<h1>内容已变</h1>"; }; </script> </head> <body> <p class="p1"> <span>今天礼拜六</span> </p> <p class="p2"> <span>明天礼拜日</span> </p> </body> </html>
三. value属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> // value属性只存在以下三种标签中 // input textarea select function setText() { // 修改输入框value的属性值 document.getElementById("userName").value = "显示信息变了"; } function getText() { // 获得输入框value的属性值 let userName = document.getElementById("userName"); alert(userName); } </script> </head> <body> <input type="text" id="userName" value="显示信息1"> <input type="text" onclick="setText()" value="显示信息2"> <input type="text" onclick="getText()" value="显示信息3"> </body> </html>
四. 显示系统时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function showTime() { let dayMsg = new Date(); let year = dayMsg.getFullYear(); // 获取年份 let month = dayMsg.getMonth(); // 获取月份 let day = dayMsg.getDate(); // 获取日 let hour = dayMsg.getHours(); // 获取小时 let minute = dayMsg.getMinutes(); // 获取分钟 let second = dayMsg.getSeconds(); // 获取秒 let nowTime = year + "年" + month + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒"; let spanNode = document.getElementById("systime"); // 设置span标签要显示的内容 spanNode.innerHTML = nowTime.fontcolor("blue"); } window.onload = function () { // 设置一秒的延迟再执行function函数 setInterval("showTime()", 1000); } </script> </head> <body> <span id="systime"></span> </body> </html>
五. 计时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> let sec = 0; let min = 0; let ho = 0; let taskId; // 设置定时器ID // 开始计时 function start() { if (taskId == null) { taskId = setInterval(function () { sec++; // 先让秒针计数 if (sec == 60) { min++; // 每60s加1分钟，秒针重置为0 sec = 0; } if (min == 60) { ho++; min = 0; } if (ho == 24) { sec = 0; min = 0; ho = 0; } // 显示设置，当秒数、分钟数、小时数小于10，前面要加个0 if (sec < 10) { document.getElementById("second").innerHTML="0" + sec; } else { document.getElementById("second").innerHTML=sec; } if (min < 10) { document.getElementById("minute").innerHTML="0" + min; } else { document.getElementById("minute").innerHTML=min; } if (ho < 10) { document.getElementById("hour").innerHTML="0" + ho; } else { document.getElementById("hour").innerHTML=ho; } }, 100) } } function stop() { clearInterval(taskId); taskId = null; } </script> </head> <body> <span id="hour">00</span> <span id="minute">00</span> <span id="second">00</span> <hr /> <input type="button" value="点击开始计时" onclick="start()" /> <input type="button" value="点击停止计时" onclick="stop()" /> </body> </html>
六. 购物车全选功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function selectAll() { // 设置"全选"所在标签的状态 let status = document.getElementById("shopping").checked; // 设置所有"checkbox"的标签的状态跟"全选"的状态一样 let cbNodes = document.getElementsByTagName("input"); for (let i = 0; i < cbNodes.length; i++) { cbNodes[i].checked = status; } } </script> </head> <body> <!-- cellpadding: 单元格与单元格之间的距离 cellspacing：单元格与格子里的内容的距离 tr: 表格头 th: 表格行 td: 表格单元 --> <table border="1" cellspacing="0" width="300px"> <tr align="center"> <th><input type="checkbox" id="shopping" onclick="selectAll()" /></th> <th>商品名称</th> <th>价格</th> <th>库存</th> </tr> <tr align="center"> <td><input type="checkbox"></td> <td>电冰箱</td> <td>2000</td> <td>100</td> </tr> <tr align="center"> <td><input type="checkbox"></td> <td>洗衣机</td> <td>2500</td> <td>100</td> </tr> <tr align="center"> <td><input type="checkbox"></td> <td>空调</td> <td>3000</td> <td>100</td> </tr> </table> </body> </html>
七. 创建和删除节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { // 创建一个元素p let pNode = document.createElement("p"); // 给新建的p元素新建内容 pNode.innerHTML="<h1>这是一个标题</h1>"; // 获取body元素 // 方法一 // let bodeNode = document.getElementsByTagName("body")[0]; // 方法二 let bodyNode = document.body; // 把刚才新建的元素p添加到body中 // 注意默认放在body中已有元素的后面 bodyNode.appendChild(pNode); // 删除刚才新建的p元素，这里为了看效果，设置1s的时间延迟 // setTimeout(function () { // // 因为加上刚才新建的p元素，总共有三个p元素，所以这里索引值为2 // let pNode = document.getElementsByTagName("p")[2]; // document.body.removeChild(pNode); // }, 1000); // 现在还剩两个p元素 // 在两个p元素之间插入一个p元素的方法 let p1Node = document.createElement("p"); let p2Node = document.getElementsByTagName("p")[1]; p1Node.innerHTML="我是新建的p元素"; document.body.insertBefore(p1Node, p2Node); } </script> </head> <body> <p>这是段落一内容</p> <p>这是段落二内容</p> </body> </html>
八. 添加和删除附件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function addRow() { // 创建一个新的tr节点 let trNode = document.createElement("tr"); // tr里面还要创建两个td节点 let td1 = document.createElement("td"); // 注意这里的方法 td1.innerHTML = "<input type='file' />"; let td2 = document.createElement("td"); td2.innerHTML = "<input type='button' value='删除文件' onclick='delRow(this)' />"; // 把两个td节点添加进新建的tr节点中 trNode.appendChild(td1); trNode.appendChild(td2); // 把新建的tr节点添加到tbody节点里，注意要放到添加按钮的前面 let tbodyNode = document.getElementsByTagName("tbody")[0]; let lastTrNode = document.getElementById("lastRow"); tbodyNode.insertBefore(trNode, lastTrNode); } function delRow(inputNode) { // 获取点击按钮所在行的tr节点 let trNode = inputNode.parentNode.parentNode; // 删除该tr节点 let tbodyNode = document.getElementsByTagName("tbody")[0]; tbodyNode.removeChild(trNode); } </script> </head> <body> <table border="1" cellspacing="0" width="300"> <tr> <td><input type="file" /></td> <!--this表示当前的input元素--> <td><input type="button" value="删除文件" onclick="delRow(this)"></td> </tr> <tr> <td><input type="file" /></td> <td><input type="button" value="删除文件" onclick="delRow(this)"></td> </tr> <tr id="lastRow"> <td colspan="2"> <input type="button" value="再添加一行" onclick="addRow()"> </td> </tr> </table> </body> </html>
九. 操作元素CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function changeCSS() { let aNode = document.getElementsByTagName("a")[0]; aNode.style.fontSize = "30px"; aNode.style.color = "blue"; aNode.style.textDecoration = "None"; } </script> </head> <body> <a href="">这是一个链接</a> <input type="button" value="点我改变前面的样式" onclick="changeCSS()" /> </body> </html>
十. 生成验证码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function() { let arr = ["中", "a", "9", "国", "c", "3"]; // 生成四位数验证码 let vrCode = ""; for (let i = 0; i < 4; i++) { let index = Math.floor(Math.random() * arr.length); vrCode += arr[index]; } // 把验证码显示在span标签中 let spanNode = document.getElementById("vrCode"); spanNode.innerHTML = vrCode; spanNode.style.backgroundColor = "lightgray"; spanNode.style.color = "blue"; spanNode.style.fontSize = "100px"; spanNode.style.textDecoration = "line-through"; spanNode.style.display = "block"; spanNode.style.width = "500px"; spanNode.style.textAlign = "center"; } </script> </head> <body> <span id="vrCode" style="display:none"></span> </body> </html>
