DOM节点1
<!-- DOM节点1 childNodes nodeType 获取子节点 children parentNode 例子：点击链接，隐藏整个li offsetParent 例子：获取元素在页面上的实际位置 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { alert(document.body.childNodes[1].nodeType); } </script> </head> <body> aaafsa <span>fff</span> </body> </html> <!-- childNodes 和 nodeType （1） nodeType: 1.element 2.attr 3.text nodeName nodeValue --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { var oUl = document.getElementById(‘ul1‘); var i = 0; for(i; i< oUl.childNodes.length; i++) { if(oUl.childNodes[i].nodeType == 1) { oUl.childNodes[i].style.background=‘red‘; } } } </script> </head> <body> <ul id="ul1"> <li>asd</li> <li>asd</li> <li>asd</li> </ul> </body> </html> <!-- childNodes 和 nodeType（2） --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload = function() { var aA = document.getElementsByTagName(‘a‘); var i = 0; for(i; i< aA.length; i++) { aA[i].onclick = function() { this.parentNode.style.display = ‘none‘; } } } </script> </head> <body> <ul> <li>aass<a href="javascript:">隐藏</a></li> <li>5453<a href="javascript:">隐藏</a></li> <li>cvxc<a href="javascript:">隐藏</a></li> <li>ertert<a href="javascript:">隐藏</a></li> </ul> </body> </html> <!-- parentNode --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <script type="text/javascript"> </script> </head> <body> <div id="div1" style="width:100px; height:100px; background:red; margin:100px;"> <div id="div2" onclick="alert(this.offsetParent.tagName)" style="width:100px; height:100px; background:yellow; position:absolute; left:100px; top:100px;"></div> </div> </body> </html> <!-- offsetParent -->
原文：http://www.cnblogs.com/tabCtrlShift/p/5625454.html
