标签：
通过该方式可以获取父节点下的所有子节点，但是由于浏览器的差异，这写节点中可能包含文本节点。
<!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>
通过该方法可以直接获取父节点下的元素节点
<!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>
<!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>
通过上面的方式可以让父节点隐藏
寻找脱离文档流的父节点(使用了绝对定位或相对定位的父节点)
<!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的背景是黄色
标签：
原文地址：http://www.cnblogs.com/xidongyu/p/5507102.html
