<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"> function demo() { var divObj = document.getElementById("divid1"); //根据ID获取 divObj.style.backgroundColor = "red"; var parentNode = divObj.parentNode; //父节点 //getNodeInfo(parentNode); var childNodes = divObj.childNodes; //子节点 //getNodeInfo(childNodes[0]); var preNode = divObj.previousSibling.previousSibling; //前一个节点 //getNodeInfo(preNode); var nextNode = divObj.nextSibling; //下一个节点 //getNodeInfo(nextNode); //获取节点的方法: //1、getElementById(HTML标签中定义的id值) //2、getElementsByName(HTML标签中定义的name值) //3、getElementsByTagName(HTML标签名) var tabNode = document.getElementById("table1"); var tdNodes = tabNode.getElementsByTagName("td"); getNodeInfo(tdNodes[0].childNodes[0]); } function getNodeInfo(node) { alert("name:"+node.nodeName+"...type:"+node.nodeType+"...value:"+node.nodeValue+"---"); } //--------------------------打印层级节点 var str = ""; function listNode(node, level) { printInfo(node, level); level++; var nodes = node.childNodes; alert(nodes); for(var x=0; x<nodes.length; x++) { if(nodes[x].hasChildNodes()) listNode(nodes[x], level); else printInfo(node, level); } } function printInfo(node, level) { str += getSpace(level) + "name:"+node.nodeName+"...type:"+node.nodeType+"...value:"+node.nodeValue+"<br/>"; } function getSpace(level) { var s = ""; for(var x=0; x<level; x++) { s += "|----"; } return s; } function showNode() { listNode(document, 0); document.write(str); } </script> </head> <body> <input type="button" value="点击" onclick="showNode()" /> <div id="divid1"> ssssssssss </div> <table id="table1" border="1px"> <tr> <td>单元格一</td> <td>单元格二</td> </tr> <tr> <td>单元格三</td> <td>单元格四</td> </tr> </table> </body> </html>