代码描述:js元素节点封装。js元素节点封装代码实例
对于dom元素的操作是javascript的根本目标,所以获取要操作动科元素是先决条件。 本章节分享一段代码实例,它能够获取父元素下面指定的元素节点,希望能够给需要的朋友带来一定的帮助。 代码如下:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> function nth(parent,ele,num){ var _ele=Array.prototype.slice.call(parent.childNodes); var eleArray=[]; for(var index= 0,len=_ele.length;index<len;index++){ if(_ele[index].nodeType==1){ eleArray.push(_ele[index]); } } if(arguments.length===2){ if(typeof arguments[1]==="string"){ _ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1])); return _ele; } else if(typeof arguments[1]==="number"){ return eleArray[arguments[1]]; } } else{ _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele)); return _ele[num]; } } window.onload=function(){ var obox=document.getElementById("box"); //选取第三个li元素 console.log(nth(obox,"li",2).innerHTML); //选取第四个按钮 console.log(nth(obox,"button",3).innerHTML) //选取第二个li下的第二个按钮 console.log(nth(nth(obox,"li",1),"button",1).innerHTML); //选取第二个li下的所有按钮 console.log(nth(nth(obox,"li",1),"button")); //选取第二个元素 console.log(nth(obox,2)); } </script> </head> <body> <ul id="box"> <li>51前端一<button>a</button></li> <li>51前端二<button>b</button><button>o</button></li> <p>51前端</p> <li>51前端三<button>c</button></li> <li>51前端四<button>d</button></li> <li>51前端五<button>e</button></li> </ul> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能