DOM操作实例解析-优快云博客

本文通过一个具体的HTML页面示例介绍了如何使用JavaScript进行DOM操作。包括获取元素、访问节点属性及遍历节点等基本操作，有助于理解网页结构并实现动态内容更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>First Page!</title>
<script language="javascript" 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.nodeType != null) {
temp += "nodeValue:" + node.nodeValue + "\n\n";
} else {
temp += "nodeValue:null\n\n";
}
return temp;
}
function Init() {
//处理并输出节点信息
//返回id属性值为p1的元素节点
var cur = document.getElementById('p1');
var msg = nodeStatus(cur);
//返回p1的第一个孩子，即文本节点“Welcome to”
cur = cur.firstChild;
msg += nodeStatus(cur);
//返回文本节点“Welcome to”的下一个同父节点，即元素节点B
cur = cur.nextSibling;
msg += nodeStatus(cur);
//返回元素节点B的第一个孩子,即文本节点“WOW!”
cur = cur.firstChild;
msg += nodeStatus(cur);
//返回文本节点“WOW!”的父节点，即元素节点B
cur = cur.parentNode;
msg += nodeStatus(cur);
//返回元素节点B的同父节点，即文本节点“大世界”
cur = cur.previousSibling;
msg += nodeStatus(cur);
//返回文本节点“大世界”的父节点，即元素节点P
cur = cur.parentNode;
msg += nodeStatus(cur);
//返回元素节点P的最后一个孩子，即文本节点“你好!“
cur = cur.lastChild;
msg += nodeStatus(cur);
//输出节点属性
alert(msg);
}
</script>
</head>
<body onload="Init()">
<p id="p1"> 大世界 <b> WOW! </b> 你好! </p>
</body>
</html>