<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body >
<p id="p1">Welcome to<B> DOM </B>World! </p>
<script type="text/javascript">
function nodeStatus(node) {
var temp = "";
if (node.nodeName != null) {
temp += "nodeName: " + node.nodeName + "\n";
}
else temp += "nodeName: null!\n";
if (node.nodeType != null) {
temp += "nodeType: " + node.nodeType + "\n";
}
else temp += "nodeType: null\n";
if (node.nodeValue != null) {
temp += "nodeValue: " + node.nodeValue + "\n\n";
}
else temp += "nodeValue: null\n\n";
return temp;
}
//处理并输出节点信息
//返回id 属性值为p1 的元素节点
var currentElement = document.getElementById('p1');
var msg = nodeStatus(currentElement);
//返回p1 的第一个孩子,即文本节点“Welcome to”
currentElement = currentElement.firstChild;
msg += nodeStatus(currentElement);
//返回文本节点“Welcome to”的下一个同父节点,即元素节点B
currentElement = currentElement.nextSibling;
msg += nodeStatus(currentElement);
//返回元素节点B 的第一个孩子,即文本节点“DOM”
currentElement = currentElement.firstChild;
msg += nodeStatus(currentElement);
//返回文本节点“DOM”的父节点,即元素节点B
currentElement = currentElement.parentNode;
msg += nodeStatus(currentElement);
//返回元素节点B 的同父节点,即文本节点“Welcome to”
currentElement = currentElement.previousSibling;
msg += nodeStatus(currentElement);
//返回文本节点“Welcome to”的父节点,即元素节点P
currentElement = currentElement.parentNode;
msg += nodeStatus(currentElement);
//返回元素节点P 的最后一个孩子,即文本节点“World!”
currentElement = currentElement.lastChild;
msg += nodeStatus(currentElement);
//输出节点属性
alert(msg);
</script>
</body>
</html>
对象属性
最新推荐文章于 2023-04-03 08:48:42 发布