dom基础3

原创于 2019-06-11 00:14:59 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #js

dom 专栏收录该内容

8 篇文章

订阅专栏

本文通过一个HTML示例，详细解析了如何使用JavaScript获取DOM元素及其属性，包括元素节点、属性节点和子节点的获取与读取。展示了如何遍历元素的所有属性并获取其值，以及如何读取元素的内容。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM</title>
</head>
<body>
	<div id="d1" align="center" class="abv">Hello DOM</div><br>
	<script type="text/javascript">
		var div1 = document.getElementById('d1');//获取元素节点
		var as = div1.attributes;//获取旗下所有属性节点，返回数组
		for(i = 0; i< as.length; i++){
			document.write("<br>");
			document.write(as[i].nodeName);//节点名称
			document.write(" : ");
			document.write(as[i].nodeValue);//节点值
		}
		document.write("<br>");
		document.write("div的ID的属性值是："+as["id"].nodeValue);

		var content = div1.childNodes[0];//获取旗下所有子节点，其中第一个子节点就是其内容
		document.write("<br>");
		document.write("div的内容节点的节点名是："+content.nodeName);
		document.write("<br>");
		document.write("div的内容节点的节点值是："+content.nodeValue);
	</script>


	

</body>
</html>