1.12个获取元素与节点的代码
(1)基本概念
①文档:document
②元素:页面中所有的标签,元素-----element,标签---->元素---->对象
③节点:页面中所有的内容(标签、文本(文字、换行、空格、回车)、属性),节点-----Node
④根元素:html标签
(2)节点的属性(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.出来)
①nodeType:节点的类型:1-----标签,2-----属性,3-----文本
②nodeName:节点的名字:标签节点-----大写的标签名字,属性节点-----小写的属性名字,文本节点-----#text
③nodeValue:节点的值:标签节点-----null,属性节点-----属性值,文本节点-----文本内容
<style> div { width: 300px; height: 300px; background-color: grey; } </style>
<div id="dv"> <span>我是一个span</span> <p>这是div中的第二个元素,第一个p标签</p> <ul id="uu"> <li>Chandler</li> <li>Monica</li> <li id="brother">Ross</li> <li>Rachel</li> <li>Phoebe</li> <li>Joey</li> </ul> </div>
<script> //获取ul var dvObj = my$("uu"); //1.获取父级节点 console.log(dvObj.parentNode); //2.获取父级元素 console.log(dvObj.parentElement); //3.子节点 console.log(dvObj.childNodes); //4.子元素 console.log(dvObj.children); //5.第一个子节点 console.log(dvObj.firstChild); //6.第一个子元素 console.log(dvObj.firstElementChild); //7.最后一个子节点 console.log(dvObj.lastChild); //8.最后一个子元素 console.log(dvObj.lastElementChild); //9.某个元素的前一个兄弟节点 console.log(my$("brother").previousSibling); //10.某个元素的前一个兄弟元素 console.log(my$("brother").previousElementSibling); //11.某个元素的后一个兄弟节点 console.log(my$("brother").nextSibling); //12.某个元素的后一个兄弟元素 console.log(my$("brother").nextElementSibling); </script>
效果:
2.通过节点操作元素的背景颜色
<hr/> <input type="button" value="变色" id="btn"/> <div id="dv"> <p>我是一个p</p> <span>我是一个span</span> <p>我是一个p</p> <span>我是一个span</span> <p>我是一个p</p> <span>我是一个span</span> <p>我是一个p</p> <span>我是一个span</span> </div>
<script> var pObj = my$("dv").childNodes; my$("btn").onclick = function () { for (var i = 0; i < pObj.length; i++) { if (pObj[i].nodeName == "P" && pObj[i].nodeType == "1") { pObj[i].style.backgroundColor = "red"; } else if (pObj[i].nodeName == "SPAN" && pObj[i].nodeType == "1") { pObj[i].style.backgroundColor = "yellow"; } } } </script>
点击前:
点击后:
3.节点操作隔行变色
<hr/> <input type="button" value="变色" id="btn"/> <ul id="uu"> <li>Chandler</li> <li>Ross</li> <li>Phoebe</li> <li>Rachel</li> <li>Monica</li> <li>Joey</li> </ul>
<script> var list = my$("uu").childNodes; my$("btn").onclick = function () { var count = 0; for (var i = 0; i < list.length; i++) { if (list[i].nodeName == "LI" && list[i].nodeType == "1") { list[i].style.backgroundColor = count % 2 ? "red" : "yellow"; count++; } } }; </script>
点击前:
点击后:
4.节点兼容代码
第一个节点和第一个元素的获取的代码在IE8中会出现不兼容的情况,如下:element.firstChild--->谷歌和火狐获取的是第一个 子节点
element.firstChild--->IE8获取的是第一个 子元素
element.firstElementChild------>谷歌和火狐是第一个子元素, IE8不支持
就说明我们需要设置一个函数用来解决这种兼容问题,获取第一个子元素的兼容函数
<ul id="uu"> <li>Chandler</li> <li>Ross</li> <li>Phoebe</li> <li>Rachel</li> <li>Monica</li> <li>Joey</li> </ul>
<script> //获取任意一个父级元素的第一个子级元素 //首先是传入一个元素,然后获取其中的子元素 function getFirstElement(element) { if (element.firstElementChild) { //如果为true------支持,如果为false------不支持 return element.firstElementChild; } else { //return element.firstChild; //以上这种方法如果遇上不支持firstElementChild且认为firstChild获取的是子节点的话就不通用了 //所以需要以下方式: var ele = element.firstChild; //循环判定ele是否是一个元素,如果不是则选择其下一个兄弟节点 while (ele && ele.nodeType != 1) { ele = ele.nextSibling; } //跳出循环即说明已经获取到第一个元素,则返回 return ele; } } function getLastElement(element) { if (element.lastElementChild) { //如果为true说明浏览器支持,如果为false说明不支持 return element.lastElementChild; } else { //return element.lastChild; //以上这种方法如果遇上不支持lastElementChild且认为lastChild获取的是子节点的话就不通用了 //所以需要以下方式: var ele = element.lastChild; //循环判定ele是否是一个元素,如果不是则选择其下一个兄弟节点 while (ele && ele.nodeType != 1) { ele = ele.previousSibling; } //跳出循环即说明已经获取到第一个元素,则返回 return ele; } } var a = getFirstElement(my$("uu")); var b = getLastElement(my$("uu")); console.log("我是第一个元素:" + a.innerText); console.log("我是最后一个元素:" + b.innerText); </script>
效果:
5.为网页设置背景图片
<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>
<!--这个案例为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> //首先需要获取img,同时为img注册点击事件 var imgObj = my$("mask").getElementsByTagName("img"); for (var i = 0; i < imgObj.length; i++) { imgObj[i].onclick = function () { //获取body,然后为body设置背景图片 document.body.style.backgroundImage = "url(" + this.src + ")"; //设置的格式是关键,需要牢记!! } } </script>
重点牢记一下背景图片的设置格式
效果:
点击其他图片:
6.通过节点解决全选和全不选问题
<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>
<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> //1.首先是点击全选按钮就全选四个,取消全选按钮就四个都取消选择 //获取总复选框 var BiObj = my$("j_cbAll"); //获取小复选框 var LiObj = my$("j_tb").getElementsByTagName("input"); //为总复选框注册点击事件 BiObj.onclick = function () { //console.log(this.checked); for (var i = 0; i < LiObj.length; i++) { LiObj[i].checked = this.checked; } }; //2.然后是点击满四个就全选 //首先遍历四个按钮来分别注册点击事件 for (var j = 0; j < LiObj.length; j++) { LiObj[j].onclick = function () { var flag = true; //设定一个复选框的条件,并且默认复选框是被选中的 for (var k = 0; k < LiObj.length; k++) { //循环遍历判断四个小复选框有没有被选中 if (!LiObj[k].checked) { //如果没有被选中,就设flag为false //并且用break跳出for循环 flag = false; break; } } //如果全部被选中,则flag默认为true,则总复选框会被选中 //如果有一个或多个没有被选中,flag会被设置为false,则复选框不会被选中 BiObj.checked = flag; }; } </script>