点击操作---节点的方式---案例
案例1：点击按钮,设置p变色---节点的方式做
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 200px; height: 200px; border: 1px solid hotpink; } </style> </head> <body> <input type="button" value="变色" id="btn" /> <div id="dv"> <p>锄禾日当午</p> <p>汗滴禾下土</p> <span>谁知盘中餐</span> <br /> <span>粒粒皆辛苦</span> <br /> <a href="#">唐诗宋词</a> </div> <script src="common.js"></script> <script> my$("btn").onclick = function () { //先获取div var dvObj = my$("dv"); //获取里面所有的子节点 var nodes = dvObj.childNodes; //循环遍历所有的子节点 for (var i = 0; i < nodes.length; i++) { //判断这个子节点是不是p标签, nodetype是1且nodename是大写的P if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") { nodes[i].style.backgroundColor = "pink"; } } }; </script> </body> </html>
案例2：节点操作隔行变色
（写错一个字母查找bug花了好久时间，.nodes[i].nodeName 多了个s）
<body> <ul id="uu"> <li>爆炒</li> <li>油炸</li> <li>清蒸</li> <li>红烧</li> <li>烧烤</li> <li>糖醋</li> <li>凉拌</li> <li>鱼香</li> </ul> <input type="button" value="隔行变色" id="btn" /> <script src="common.js"></script> <script> my$("btn").onclick = function () { //获取ul中所有的子节点 var count = 0; //记录有多少li var nodes = my$("uu").childNodes; for (var i = 0; i < nodes.length; i++) { //判断这个节点是不是li标签 if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") { nodes[i].style.backgroundColor = count % 2 == 0 ? "pink" : "yellow"; count++; } } }; </script> </body>
案例3：封装节点兼容代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <ul id="uu"> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul> <script src="common.js"></script> <script> //获取任意一个父级元素的第一个子级元素 function getFirstElementChild(element) { if(element.firstElementChild){//true--->支持 return element.firstElementChild; }else{ var node=element.firstChild;//第一个节点 while (node&&node.nodeType!=1){ node=node.nextSibling; } return node; } } //获取任意一个父级元素的最后一个子级元素 function getLastElementChild(element) { if(element.lastElementChild){//true--->支持 return element.lastElementChild; }else{ var node=element.lastChild;//第一个节点 while (node&&node.nodeType!=1){ node=node.previousSibling; } return node; } } console.log(getFirstElementChild(my$("uu")).innerText); console.log(getLastElementChild(my$("uu")).innerText); //最后一个节点和最后一个元素的获取的代码在IE8中可能不支持 //前一个节点和前一个元素的获取的代码在IE8中可能不支持 //后一个节点和后一个元素的获取的代码在IE8中可能不支持 //学习节点操作还是为了操作元素 </script> </body> </html>
案例4：切换背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>哈哈,我又变帅了</title> <style> * { margin: 0px; padding: 0px; } body { background-image: url("images/1.jpg"); } #mask { background-color: rgba(255, 255, 255, 0.3); height: 200px; text-align: center; } #mask img { width: 200px; margin-top: 35px; cursor: pointer; } </style> </head> <body id="bd"> <div id="mask"> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> </div> <script src="common.js"></script> <script> //获取的所有的子元素 var imgObjs = my$("mask").children; for (var i = 0; i < imgObjs.length; i++) { //循环遍历所有img,注册点击事件 imgObjs[i].onclick = function () { document.body.style.backgroundImage = "url(" + this.src + ")"; }; } </script> </body> </html>
案例5：
1. 全选的时候，复选框里面状态和全选一致
2. 复选的时候，循环复选框，有一个不选中全选就flase
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>红烧肉</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>西红柿鸡蛋</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>油炸榴莲</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>清蒸助教</td> <td>田老师</td> </tr> </tbody> </table> </div> <script src="common.js"></script> <script> //获取全选的这个复选框 var ckAll = my$("j_cbAll"); //获取tbody中所有的小复选框 var ckSmall = my$("j_tb").getElementsByTagName("input"); //点击全选的这个复选框, 获取他当前的状态, 然后设置tbody中所有复选框的状态 ckAll.onclick = function () { for (var i = 0; i < ckSmall.length; i++) { ckSmall[i].checked = this.checked; } }; //获取tbody中所有的复选框,分别注册点击事件 for (var i = 0; i < ckSmall.length; i++) { ckSmall[i].onclick = function () { var flag = true;//默认都被选中了 for (var j = 0; j < ckSmall.length; j++) { //判断是否所有的复选框都选中 if (!ckSmall[j].checked) { flag = false; break; } } //全选的这个复选框的状态就是flag这个变量的值 ckAll.checked = flag; }; } </script> </body> </html>