您的位置：首页 > Web前端 > JavaScript

JavaScript -- 练习，Dom 获取节点

2013-11-25 22:47 441 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航