获取节点(包括空节点) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--dom对页面进行操作--> <!--children--> <!--childNodes获取节点(包括空节点)--> <!--nodeType节点类型--> <ul id="ul"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> <script> //IE6-8支持 var oUl=document.getElementById('ul'); // 获取节点的个数 // alert(oUl.childNodes.length); for(var i=0;i<oUl.childNodes.length;i++){ //IE7支持 // oUl.childNodes[i].style.background="red"; // nodeType==3 -> 文本节点 //nodeType==1 ->元素节点 // alert(oUl.childNodes[i].nodeType); // 高级浏览器支持 if (oUl.childNodes[i].nodeType==1){ oUl.childNodes[i].style.background="red"; } } 第二种方法 for(var i=0;i<oUl.children.length;i++){ //只获取元素节点,任何浏览器下都支持 // alert(oUl.children.length) oUl.children[i].style.background="red"; } </script> </html>
parentNode获取父节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>嘻嘻嘻嘻<a href="javascript:;">隐藏</a></li> <li>哈哈哈哈<a href="JavaScript:;">隐藏</a></li> <li>咦咦咦咦<a href="JavaScript:;">隐藏</a></li> <li>嘤嘤嘤嘤<a href="JavaScript:;">隐藏</a></li> </ul> </body> <script> var aA=document.getElementsByTagName('a'); for (var i=0;i<aA.length;i++ ){ aA[i].οnclick=function () { this.parentNode.style.display="none"; }; } </script> </html>
offsetParent获取父级定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{width: 400px;height: 400px;background: #ccc;margin: 100px auto;position: relative;} #div2{width: 280px;height: 280px;background: red;position: absolute;top: 60px;left: 60px;} </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> <script> var oDiv2=document.getElementById("div2"); alert(oDiv2.offsetParent); </script> </html>
firstChild获取第一个子节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="ull"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> var oUl=document.getElementById("ull"); //IE6-8支持 // oUl.firstChild.style.background="red"; //高级浏览器 // oUl.firstElementChild.style.background='red'; //任何浏览器都支持 if (oUl.firstElementChild) { oUl.firstElementChild.style.background='red'; }else{ oUl.firstChild.style.background="red"; } </script> </html>
setAttribute()获取元素操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="txt1"> <input type="button" id="btn2" value="获取"> </body> <script> var oTxt=document.getElementById('txt1'); var oBtn=document.getElementById('btn2'); oBtn.οnclick=function () { // oTxt.value='明天气温下降!'; // oTxt['value']='明天气温下降!' oTxt.setAttribute('value','明天气温下降!'); } </script> </html>
className选取元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul id="ull"> <li class="box"></li> <li class="box"></li> <li></li> <li></li> <li class="box"></li> <li></li> </ul> </body> <script> // 第一个参数用来决定是从哪儿父级下面选取元素 // 第二参数所需要的东西,他的class映射 function getByClass(oParent,sClass) { var aResult=[];//空数组,可以把每一个元素推到里面 var aEle=oParent.getElementsByTagName('*'); for (var i=0;i<aEle.length;i++) { if (aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } var oUl=document.getElementById('ull'); // var aLi=oUl.getElementsByTagName('li'); // for (var i=0;i<aLi.length;i++){ // if (aLi[i].className=='box'){ // aLi[i].style.background="red"; // } // } var aBox=getByClass(oUl,'box'); for (var i=0;i<aBox.length;i++){ aBox[i].style.background='red'; } </script> </html> className的优势: 1.可以批量化的获取元素 2.具有选择性 3.当页面发生变化时,程序不会出错 如何用className选择元素 1.选择所有元素 2.通过className条件筛选 二.封装成函数