JS-DOM ～ 02. 暗藏二维码、锁定、获取输入框焦点、for循环为文本赋值、筛选条件、全选和反选、属性的方法操作、节点的层次结构、nodeType
JS-DOM ～ 02. 隐藏二维码、锁定、获取输入框焦点、for循环为文本赋值、筛选条件、全选和反选、属性的方法操作、节点的层次结构、nodeType
隐藏二维码
锁定输入框
文本输入框焦点
for循环为文本框赋值和取值
输入不满足条件则变色
点击全选和反选
发现鼠标变色
tab栏切换版本1
tab栏切换js版
tab栏切换 精简版
访问关系
NodeType、nodeName、nodeValue
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .nodeSmall { 8 width: 50px; 9 height: 50px; 10 background: url("../bgs.png") no-repeat -159px -51px; 11 position: fixed; 12 right: 10px; 13 top: 40%; 14 } 15 16 .erweima { 17 position: absolute; 18 top: 0; 19 left: -150px; 20 } 21 22 .nodeSmall a { 23 display: block; 24 width: 50px; 25 height: 50px; 26 } 27 28 .hide { 29 display: none; 30 } 31 32 .show { 33 display: block; 34 } 35 36 </style> 37 <script> 38 window.onload = function () { 39 // 需求：鼠标放到a链接上，显示二维码（添加show类名，去掉hide类名） 40 // 鼠标移开则隐藏二维码（添加hide类名，去掉show类名） 41 // 1：获取事件源 42 var a = document.getElementsByTagName("a")[0]; 43 var div = document.getElementById("er"); 44 // 2:绑定事件 45 a.onmouseover = fn1; 46 a.onmouseout = fn2; 47 function fn1() { 48 div.className = "erweima show"; 49 50 } 51 52 function fn2() { 53 div.className = "erweima hide"; 54 } 55 56 } 57 58 </script> 59 </head> 60 <body> 61 <div class="nodeSmall" id="node_small"> 62 <a href="#"></a> 63 <div class="erweima hide" id="er"> 64 <img src="../456.png" alt=""> 65 </div> 66 </div> 67 68 69 </body> 70 </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 账号：<input type="text" value="欢迎光临..."> <button>禁用</button> <button>解禁</button> <br><br> 密码：<input type="password" value="aaaaa"> <script> // 1:获取事件源 var inp = document.getElementsByTagName("input")[0]; var btn1 = document.getElementsByTagName("button")[0]; var btn2 = document.getElementsByTagName("button")[1]; // 2:绑定事件 btn1.onclick = function () { inp.disabled = "no"; }; btn2.onclick = function () { inp.disabled = false; } </script> </body> </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 input { 9 width: 400px; 10 height: 46px; 11 padding-left: 5px; 12 color: #ccc; 13 font: 17px/46px "微软雅黑"; 14 } 15 16 label { 17 position: absolute; 18 top: 94px; 19 left: 56px; 20 font-size: 12px; 21 color: #ccc; 22 cursor: text; 23 } 24 25 .hide { 26 display: none; 27 } 28 29 .show { 30 display: block; 31 } 32 33 34 </style> 35 </head> 36 <body> 37 38 京东：<input type="text" id="inp1" value="我是京东"/><br><br> 39 淘宝：<label for="inp2">我是淘宝</label><input id="inp2" type="text"><br><br> 40 placeholder: <input type="text" placeholder=" 我是placeholder"> 41 42 <script> 43 // 1：获取事件源和相关元素 44 var inp1 = document.getElementById("inp1"); 45 // 2：绑定事件 46 inp1.onfocus = function () { 47 if (this.value === "我是京东") { 48 inp1.value = ""; 49 } 50 }; 51 inp1.onblur = function () { 52 if (this.value === "") { 53 inp1.value = "我是京东"; 54 } 55 }; 56 // 设置淘宝的框 57 var inp2 = document.getElementById("inp2"); 58 var lab = document.getElementsByTagName("label")[0]; 59 // 绑定事件，输入事件文字的输入和删除都会触发这个事件 60 inp2.oninput = function () { 61 if (this.value === "") { 62 lab.className = "show"; 63 } else { 64 lab.className = "hide"; 65 } 66 } 67 68 69 </script> 70 71 72 </body> 73 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="text"/><br><br> 9 <input type="text"/><br><br> 10 <input type="text"/><br><br> 11 <input type="text"/><br><br> 12 <input type="text"/><br><br> 13 <input type="text"/><br><br> 14 15 <button>赋值</button><br><br> 16 <button>取值</button><br><br> 17 18 <script> 19 //for循环赋值 20 //老三步 21 var inpArr = document.getElementsByTagName("input"); 22 var btnArr = document.getElementsByTagName("button"); 23 24 //赋值 25 btnArr[0].onclick = function () { 26 //循环为每一个input赋值 27 for(var i=0;i<inpArr.length;i++){ 28 inpArr[i].value = i; 29 } 30 } 31 32 //获取值 33 btnArr[1].onclick = function () { 34 //循环获取nput的值赋值为一个数组 35 var newArr = []; 36 for(var i=0;i<inpArr.length;i++){ 37 newArr.push(inpArr[i].value); 38 } 39 console.log(newArr.join(" ")); 40 } 41 42 43 </script> 44 </body> 45 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .wrong { 8 border: 2px solid red; 9 } 10 .right { 11 border: 2px solid #91B81D; 12 } 13 </style> 14 </head> 15 <body> 16 17 账号：<input type="text" onblur="fn(this)"/><br><br> 18 密码：<input type="password" onblur="fn(this)"/> 19 20 <script> 21 //需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。 22 //步骤： 23 //1.获取事件源 24 //2.绑定事件 25 //3.书写事件驱动程序 26 27 28 //3.书写事件驱动程序 29 function fn(aaa){ 30 //html中的input标签行内调用function的时候,是先通过window调用的function，所以打印this等于打印window 31 // console.log(this) 32 //只有传递的this才指的是标签本身。 33 // console.log(aaa) 34 // console.log(this.value) 35 if(aaa.value.length < 6 || aaa.value.length>12){ 36 aaa.className = "wrong"; 37 }else{ 38 aaa.className = "right"; 39 } 40 } 41 </script> 42 </body> 43 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 12 .wrap { 13 width: 300px; 14 margin: 100px auto 0; 15 } 16 17 table { 18 border-collapse: collapse; 19 border-spacing: 0; 20 border: 1px solid #c0c0c0; 21 width: 300px; 22 } 23 24 th, 25 td { 26 border: 1px solid #d0d0d0; 27 color: #404060; 28 padding: 10px; 29 } 30 31 th { 32 background-color: #09c; 33 font: bold 16px "微软雅黑"; 34 color: #fff; 35 } 36 37 td { 38 font: 14px "微软雅黑"; 39 } 40 41 tbody tr { 42 background-color: #f0f0f0; 43 } 44 45 tbody tr:hover { 46 cursor: pointer; 47 background-color: #fafafa; 48 } 49 </style> 50 51 <script> 52 53 window.onload = function () { 54 //需求1：点击上面的的input，下面全选或者反选。 55 //思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。 56 //老三步 57 var topInp = document.getElementById("theadInp"); 58 var tbody = document.getElementById("tbody"); 59 var botInpArr = tbody.getElementsByTagName("input"); 60 61 //绑定事件 62 topInp.onclick = function () { 63 //版本1 64 // for(var i=0;i<botInpArr.length;i++){ 65 // if(topInp.checked === true){ 66 // botInpArr[i].checked = true; 67 // }else{ 68 // botInpArr[i].checked = false; 69 // } 70 // } 71 //费劲版 72 // if(topInp.checked){ 73 // for(var i=0;i<botInpArr.length;i++){ 74 // botInpArr[i].checked = true; 75 // } 76 // }else{ 77 // for(var i=0;i<botInpArr.length;i++){ 78 // botInpArr[i].checked = false; 79 // } 80 // } 81 //优化版（被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值） 82 for(var i=0;i<botInpArr.length;i++){ 83 botInpArr[i].checked = this.checked; 84 } 85 } 86 87 //需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。 88 //思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮 89 // checked属性值是否全部都是true，如果有一个是false， 90 // 那么上面的input的checked属性也是false;都是true，topInp的checked就是true； 91 92 //老三步 93 for(var i=0;i<botInpArr.length;i++){ 94 botInpArr[i].onclick = function () { 95 //开闭原则 96 var bool = true; 97 //检测每一个input的checked属性值。 98 for(var j=0;j<botInpArr.length;j++){ 99 if(botInpArr[j].checked === false){ 100 bool = false; 101 } 102 } 103 topInp.checked = bool; 104 } 105 } 106 } 107 108 </script> 109 110 </head> 111 <body> 112 <div class="wrap"> 113 <table> 114 <thead> 115 <tr> 116 <th> 117 <input type="checkbox" id="theadInp" /> 118 </th> 119 <th>菜名</th> 120 <th>饭店</th> 121 </tr> 122 </thead> 123 <tbody id="tbody"> 124 <tr> 125 <td> 126 <input type="checkbox" /> 127 </td> 128 <td>地三鲜</td> 129 <td>田老师</td> 130 </tr> 131 <tr> 132 <td> 133 <input type="checkbox" /> 134 </td> 135 <td>西红柿鸡蛋</td> 136 <td>田老师</td> 137 </tr> 138 <tr> 139 <td> 140 <input type="checkbox" /> 141 </td> 142 <td>醋溜土豆丝</td> 143 <td>田老师</td> 144 </tr> 145 <tr> 146 <td> 147 <input type="checkbox" /> 148 </td> 149 <td>萝卜干炒黄豆儿</td> 150 <td>田老师</td> 151 </tr> 152 </tbody> 153 </table> 154 </div> 155 156 </body> 157 </html>
属性的方法操作
<script>
//两种方式不能交换使用，赋值和获取值必须使用用一种方法。
var div = document.getElementById("box");
//元素节点.属性（元素节点[属性]）:绑定的属性值不会出现在标签上。
div.aaaa = "1111";
console.log(div.aaaa);
//get/set/removeAttribut: 绑定的属性值会出现在标签上。
div.setAttribute("bbbb","2222");
console.log(div.getAttribute("aaaa"));
console.log(div.bbbb);
</script>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 button { 8 margin: 10px; 9 width: 100px; 10 height: 40px; 11 cursor: pointer; 12 } 13 .current { 14 background-color: yellow; 15 } 16 </style> 17 </head> 18 <body> 19 <button>按钮1</button> 20 <button>按钮2</button> 21 <button>按钮3</button> 22 <button>按钮4</button> 23 <button>按钮5</button> 24 25 <script> 26 //需求：鼠标放到哪个button上，改button变成黄色背景（添加类） 27 //步骤： 28 //1.获取事件源 29 //2.绑定事件 30 //3.书写事件驱动程序 31 32 //1.获取事件源 33 var btnArr = document.getElementsByTagName("button"); 34 //2.绑定事件 35 for(var i=0;i<btnArr.length;i++){ 36 btnArr[i].onmouseover = function () { 37 //排他思想（干掉所有人，剩下我一个） 38 //排他思想是和for循环连用 39 for(var j=0;j<btnArr.length;j++){ 40 btnArr[j].className = ""; 41 } 42 this.className = "current"; 43 } 44 } 45 //3.书写事件驱动程序 46 47 48 </script> 49 50 </body> 51 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 .box { 12 width: 500px; 13 height: 400px; 14 border: 1px solid #ccc; 15 margin: 100px auto; 16 overflow: hidden; 17 } 18 ul { 19 width: 600px; 20 height: 40px; 21 margin-left: -1px; 22 list-style: none; 23 } 24 li { 25 float: left; 26 width: 101px; 27 height: 40px; 28 text-align: center; 29 font: 600 18px/40px "simsun"; 30 background-color: pink; 31 cursor: pointer; 32 } 33 span { 34 display: none; 35 width: 500px; 36 height: 360px; 37 background-color: yellow; 38 text-align: center; 39 font: 700 150px/360px "simsun"; 40 } 41 .show { 42 display: block; 43 } 44 .current { 45 background-color: yellow; 46 } 47 </style> 48 49 <script> 50 window.onload = function () { 51 //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类); 52 //思路：1.点亮盒子。 2.利用索引值显示盒子。 53 //步骤： 54 //1.获取事件源和相关元素 55 //2.绑定事件 56 //3.书写事件驱动程序（排他思想） 57 58 59 //1.获取事件源和相关元素 60 var boxArr = document.getElementsByClassName("box"); 61 //函数调用 62 for(var i=0;i<boxArr.length;i++){ 63 fn(boxArr[i]); 64 } 65 66 //函数封装 67 function fn(ele){ 68 var liArr = ele.getElementsByTagName("li"); 69 var spanArr = ele.getElementsByTagName("span"); 70 //2.绑定事件（循环绑定） 71 for(var i=0;i<liArr.length;i++){ 72 //绑定索引值(自定义属性) 73 liArr[i].setAttribute("index",i); 74 liArr[i].onmouseover = function () { 75 //3.书写事件驱动程序（排他思想） 76 //1.点亮盒子。 2.利用索引值显示盒子。(排他思想) 77 for(var j=0;j<liArr.length;j++){ 78 liArr[j].removeAttribute("class"); 79 spanArr[j].removeAttribute("class"); 80 } 81 this.setAttribute("class","current"); 82 spanArr[this.getAttribute("index")].setAttribute("class","show"); 83 } 84 } 85 } 86 } 87 </script> 88 </head> 89 <body> 90 91 <div class="box"> 92 <ul> 93 <li class="current">鞋子</li> 94 <li>袜子</li> 95 <li>帽子</li> 96 <li>裤子</li> 97 <li>裙子</li> 98 </ul> 99 <span class="show">鞋子</span> 100 <span>袜子</span> 101 <span>帽子</span> 102 <span>裤子</span> 103 <span>裙子</span> 104 </div> 105 106 107 108 <div class="box"> 109 <ul> 110 <li class="current">鞋子</li> 111 <li>袜子</li> 112 <li>帽子</li> 113 <li>裤子</li> 114 <li>裙子</li> 115 </ul> 116 <span class="show">鞋子</span> 117 <span>袜子</span> 118 <span>帽子</span> 119 <span>裤子</span> 120 <span>裙子</span> 121 </div> 122 123 124 125 <div class="box"> 126 <ul> 127 <li class="current">鞋子</li> 128 <li>袜子</li> 129 <li>帽子</li> 130 <li>裤子</li> 131 <li>裙子</li> 132 </ul> 133 <span class="show">鞋子</span> 134 <span>袜子</span> 135 <span>帽子</span> 136 <span>裤子</span> 137 <span>裙子</span> 138 </div> 139 140 </body> 141 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 .box { 12 width: 500px; 13 height: 400px; 14 border: 1px solid #ccc; 15 margin: 100px auto; 16 overflow: hidden; 17 } 18 ul { 19 width: 600px; 20 height: 40px; 21 margin-left: -1px; 22 list-style: none; 23 } 24 li { 25 float: left; 26 width: 101px; 27 height: 40px; 28 text-align: center; 29 font: 600 18px/40px "simsun"; 30 background-color: pink; 31 cursor: pointer; 32 } 33 span { 34 display: none; 35 width: 500px; 36 height: 360px; 37 background-color: yellow; 38 text-align: center; 39 font: 700 150px/360px "simsun"; 40 } 41 .show { 42 display: block; 43 } 44 .current { 45 background-color: yellow; 46 } 47 </style> 48 49 <script> 50 window.onload = function () { 51 //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类); 52 //思路：1.点亮盒子。 2.利用索引值显示盒子。 53 //步骤： 54 //1.获取事件源和相关元素 55 //2.绑定事件 56 //3.书写事件驱动程序（排他思想） 57 58 59 //1.获取事件源和相关元素 60 var liArr = document.getElementsByTagName("li"); 61 var spanArr = document.getElementsByTagName("span"); 62 //2.绑定事件（循环绑定） 63 for(var i=0;i<liArr.length;i++){ 64 //绑定索引值 65 liArr[i].index = i; 66 liArr[i].onmouseover = function () { 67 //3.书写事件驱动程序（排他思想） 68 //1.点亮盒子。 2.利用索引值显示盒子。(排他思想) 69 for(var j=0;j<liArr.length;j++){ 70 liArr[j].className = ""; 71 spanArr[j].className = ""; 72 } 73 this.className = "current"; 74 spanArr[this.index].className = "show"; 75 } 76 } 77 } 78 </script> 79 </head> 80 <body> 81 82 <div class="box"> 83 <ul> 84 <li class="current">鞋子</li> 85 <li>袜子</li> 86 <li>帽子</li> 87 <li>裤子</li> 88 <li>裙子</li> 89 </ul> 90 <span class="show">鞋子</span> 91 <span>袜子</span> 92 <span>帽子</span> 93 <span>裤子</span> 94 <span>裙子</span> 95 </div> 96 97 </body> 98 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 .box { 12 width: 500px; 13 height: 400px; 14 border: 1px solid #ccc; 15 margin: 100px auto; 16 overflow: hidden; 17 } 18 ul { 19 width: 600px; 20 height: 40px; 21 margin-left: -1px; 22 list-style: none; 23 } 24 li { 25 float: left; 26 width: 101px; 27 height: 40px; 28 text-align: center; 29 font: 600 18px/40px "simsun"; 30 background-color: pink; 31 cursor: pointer; 32 } 33 span { 34 display: none; 35 width: 500px; 36 height: 360px; 37 background-color: yellow; 38 text-align: center; 39 font: 700 150px/360px "simsun"; 40 } 41 .show { 42 display: block; 43 } 44 .current { 45 background-color: yellow; 46 } 47 </style> 48 49 <script> 50 window.onload = function () { 51 var boxArr = document.getElementsByClassName("box"); 52 for(var i=0;i<boxArr.length;i++){ 53 fn(boxArr[i]); 54 } 55 function fn(ele){ 56 var liArr = ele.getElementsByTagName("li"); 57 var spanArr = ele.getElementsByTagName("span"); 58 for(var i=0;i<liArr.length;i++){ 59 liArr[i].index = i; 60 liArr[i].onmouseover = function () { 61 for(var j=0;j<liArr.length;j++){ 62 liArr[j].className = ""; 63 spanArr[j].className = ""; 64 } 65 this.className = "current"; 66 spanArr[this.index].className = "show"; 67 } 68 } 69 } 70 } 71 </script> 72 </head> 73 <body> 74 75 <div class="box"> 76 <ul> 77 <li class="current">鞋子</li> 78 <li>袜子</li> 79 <li>帽子</li> 80 <li>裤子</li> 81 <li>裙子</li> 82 </ul> 83 <span class="show">鞋子</span> 84 <span>袜子</span> 85 <span>帽子</span> 86 <span>裤子</span> 87 <span>裙子</span> 88 </div> 89 90 <div class="box"> 91 <ul> 92 <li class="current">鞋子</li> 93 <li>袜子</li> 94 <li>帽子</li> 95 <li>裤子</li> 96 <li>裙子</li> 97 </ul> 98 <span class="show">鞋子</span> 99 <span>袜子</span> 100 <span>帽子</span> 101 <span>裤子</span> 102 <span>裙子</span> 103 </div> 104 105 <div class="box"> 106 <ul> 107 <li class="current">鞋子</li> 108 <li>袜子</li> 109 <li>帽子</li> 110 <li>裤子</li> 111 <li>裙子</li> 112 </ul> 113 <span class="show">鞋子</span> 114 <span>袜子</span> 115 <span>帽子</span> 116 <span>裤子</span> 117 <span>裙子</span> 118 </div> 119 120 </body> 121 </html>
节点的层次结构
父节点：parentNode 下面的IE678 不支持
兄弟节点： previousSibling || previousElementSibling 前一个兄弟节点
nextSibling || nextElementSibling 后一个兄弟节点
子节点 ： firstChild 第一个子节点 || firstElementChild
lastChild 最后一个子节点 || lastElementChild
所有子节点：var arr = box.parentNode.children
随意获取兄弟节点: 自己.parentNode.children[ index ];
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 li { 8 list-style: none; 9 width: 100px; 10 height: 100px; 11 background-color: pink; 12 margin: 5px; 13 } 14 </style> 15 </head> 16 <body> 17 18 <ul> 19 <li class="box1"></li> 20 <li class="box2"></li> 21 <li id="box3"></li> 22 <li class="box4"></li> 23 <li class="box5"></li> 24 </ul> 25 26 <script> 27 28 //parentNode父盒子 29 var box3 = document.getElementById("box3"); 30 box3.parentNode.style.backgroundColor = "blue"; 31 32 //兄弟节点（前一个和后一个：previousSibling和nextSibling） 33 //previousElementSibling和nextElementSibling在IE678中不支持。IE678不能获取文本节点。 34 // box3.previousElementSibling.style.backgroundColor = "red"; 35 // box3.nextElementSibling.style.backgroundColor = "yellow"; 36 // box3.previousSibling.style.backgroundColor = "red"; 37 // box3.nextSibling.style.backgroundColor = "yellow"; 38 var pre = box3.previousElementSibling || box3.previousSibling; 39 var net = box3.nextElementSibling || box3.nextSibling; 40 pre.style.backgroundColor = "red"; 41 net.style.backgroundColor = "yellow"; 42 43 //单个子元素（firstChild和lastChild） 44 // box3.parentNode.firstElementChild.style.backgroundColor = "orange"; 45 // box3.parentNode.lastElementChild.style.backgroundColor = "green"; 46 var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild; 47 var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild; 48 first.style.backgroundColor = "orange"; 49 last.style.backgroundColor = "green"; 50 51 52 //所有子元素 53 var arr = box3.parentNode.children; 54 for(var i=0;i<arr.length;i++){ 55 arr[i].style.backgroundColor = "black"; 56 } 57 58 console.log(box3.parentNode.childNodes); 59 var arr2 = box3.parentNode.childNodes; 60 for(var i=0;i<arr2.length;i++){ 61 if(arr2[i].nodeType === 1){ 62 console.log(arr2[i]); 63 } 64 } 65 66 //随意获取指定兄弟节点 67 var index = 0; 68 var node = box3.parentNode.children[index]; 69 70 71 //获取所有的兄弟节点 72 function siblings(elm) { 73 var a = []; 74 var p = elm.parentNode.children; 75 for(var i =0;i<p.length;i++) { 76 if(p[i] !== elm) { 77 a.push(p[i]); 78 } 79 } 80 return a; 81 } 82 83 </script> 84 </body> 85 </html>
nodeType / nodeName /nodeValue
nodeType:节点的类型： 元素节点：1 || 属性节点：2 || 文本节点：3
nodeName：节点的名字
nodeValue：节点的值： 元素节点（element）的value为 null ；属性的value 是属性值
1 <script> 2 3 var ele = document.getElementById("box");//元素节点 4 var att = ele.getAttributeNode("id");//属性节点 5 var txt = ele.firstChild; 6 7 // console.log(ele); 8 // console.log(att); 9 // console.log(txt); 10 //nodeType 11 console.log(ele.nodeType);//1 12 console.log(att.nodeType);//2 13 console.log(txt.nodeType);//3 14 15 //nodeName 16 console.log(ele.nodeName);//DIV 17 console.log(att.nodeName);//id 18 console.log(txt.nodeName);//#text 19 20 //nodeValue 21 console.log(ele.nodeValue);//null 22 console.log(att.nodeValue);//box 23 console.log(txt.nodeValue);//你好 24 25 </script>