一、操作子节点
-
childNodes
通过该方式可以获取父节点下的所有子节点，但是由于浏览器的差异，这写节点中可能包含文本节点。
<!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> window.onload = function (){ var oUl = document.getElementById('ul1'); alert(oUl.childNodes.length); } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> </ul> </body> </html>
我们通过浏览器打开上面的代码会发现提示框是5。这是因为 ul 标签中的空白处可以被视为文本节点。如果只直接访问 li 节点则需要进行节点类型判断。
<!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> window.onload = function (){ var j=0; var node; var oUl = document.getElementById('ul1'); for(i=0; i<oUl.childNodes.length; i++){ //1表示该节点是一个元素节点 if(oUl.childNodes[i].nodeType == 1) j++; } alert(j); } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> </ul> </body> </html>
-
children
通过该方法可以直接获取父节点下的元素节点
<!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> window.onload = function (){ var oUl = document.getElementById('ul1'); alert(oUl.children.length); oUl.children[0].style.background = "red"; } </script> </head> <body> <ul id="ul1"> <li></li> <li></li> </ul> </body> </html>
firstChild和 lastChild是分别访问子标签中的第一个节点和最好一个节点，不过可能会出现问题就是访问到的可能是元素节点。
二、操作父节点
-
parentNode
<!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> window.onload = function(){ var oAs = document.getElementsByTagName('a'); for(var i=0; i<oAs.length; i++){ oAs[i].onclick = function (){ this.parentNode.style.display = "none"; }; } } </script> </head> <body> <ul id="ul1"> <li><a href ="javascript:void(0);">隐藏</a></li> <li><a href="javascript:void(0);">隐藏</a></li> </ul> </body> </html>
通过上面的方式可以让父节点隐藏
-
offsetParent
寻找脱离文档流的父节点(使用了绝对定位或相对定位的父节点)
<!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div2'); oDiv.offsetParent.style.backgroundColor="yellow"; } </script> <style type="text/css"> #div1{ width: 100px; height: 100px; background-color: red; position: relative; } #div2{ width: 100px; height: 100px; position: absolute; top: 20px; left: 20px; background-color: blue; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
如果去掉#div1中的position属性，则整个body的背景会变为黄色，如果不去则只有div1的背景是黄色
-
setAttribute
<!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('1'); oBtn.onclick = function (){ var oInput = document.getElementById('2'); oInput.setAttribute("value", "div2"); } } </script> </head> <body> <input type="text" id="2"> <button id="1">按键</button> </div> </body> </html>
setAttribute方法有很多限制，如果允许的话最好选择JQuery中的attr方法。removeAttribute移除某个属性，获取属性值getAttribute。
-
className
<!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> function getByClass(oParent, className){ var result = []; var oTags = oParent.getElementsByTagName("*"); for(var i=0; i<oTags.length; i++){ if(oTags[i].className == className) result.push(oTags[i]); } return result; } window.onload = function(){ var oUl = document.getElementById('ul'); var cboxes = getByClass(oUl, "box"); for(var i=0; i<cboxes.length; i++) cboxes[i].style.backgroundColor = "red"; } </script> </head> <body> <ul id="ul"> <li class="box">1</li> <li>2</li> <li class="box">32</li> <li class="box">4</li> </ul> </div> </body> </html>
className用于判断标签使用的类选择器