快速导航: 首页 2024年9月20日 星期五
推荐导航:【学习 XML DOM】【学习 XML Schema】【学习 XML】【学习 XPath】【学习 XQuery】【学习 XSL-FO】【学习 XSLT】【数据结构与算法】【正则表达式】【浏览器信息】【网站主机教程】【网站品质】【网站建设指南】【设计模式】
【学习 XML DOM】 XML DOM 教程 DOM 节点 DOM 节点树 DOM 解析 DOM 加载函数 DOM 方法 DOM 访问 DOM 节点信息 DOM 节点列表 DOM 遍历 DOM 浏览器 DOM 导航 DOM 获取节点 DOM 改变节点 DOM 删除节点 DOM 替换节点 DOM 创建节点 DOM 添加节点 DOM 克隆节点 DOM XMLHttpRequest DOM 节点类型 DOM Node DOM NodeList DOM NamedNodeMap DOM Document DOM DocumentImpl DOM DocumentType DOM ProcessingInst DOM Element DOM Attribute DOM Text DOM CDATA DOM Comment DOM ParseError Obj DOM 解析器错误 DOM 总结 DOM 验证

DOM 节点类型学习笔记

什么是DOM？

DOM(Document Object Model) 文档对象模型，是一种表示和操作 HTML、XML 等文档的标准对象模型。通过 DOM，在页面加载后，可以使用 JavaScript 来操作文档中的任何元素。DOM 将文档呈现为带有层次结构的节点树。通过将网页解析成节点树，开发者便可以使用编程语言来修改其内容、属性和样式。

节点类型

在 DOM 中，每个 HTML 元素都被表示为一个节点，每个节点都有自己的类型。下面是常用的节点类型：

  • 元素节点（Element Node）：HTML 标签被解析为元素节点。例如 <div>、<a>、<p> 等。
  • 属性节点（Attribute Node）：元素的属性被解析为属性节点。例如 href、src、class 等。
  • 文本节点（Text Node）：元素的文本内容被解析为文本节点。例如 <p>这是一段文本</p> 中的 “这是一段文本”。
  • 注释节点（Comment Node）：HTML 中注释被解析为注释节点。例如 <!-- 这是一段注释 -->。

举例说明

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>DOM节点类型</title>
</head>
<body>

	<div id="container">
		<h1>DOM节点类型</h1>
		<p>元素节点示例</p>
		<a href="#">属性节点示例</a>
		<p>文本节点示例</p>
		<!-- 注释节点示例 -->
	</div>

	<script>
		var container = document.getElementById("container");
		console.log(container.nodeType); // 输出 1，表示 Element Node

		var link = container.getElementsByTagName("a")[0];
		console.log(link.getAttributeNode("href").nodeType); // 输出 2，表示 Attribute Node

		var pNode = container.getElementsByTagName("p")[0];
		console.log(pNode.childNodes[0].nodeType); // 输出 3，表示 Text Node

		var comment = container.childNodes[3];
		console.log(comment.nodeType); // 输出 8，表示 Comment Node
	</script>

</body>
</html>

在上面的示例中，我们创建了一个包含不同节点类型的 HTML 文档，并使用 JavaScript 获取了它们的节点类型。例如，document.getElementById("container") 获取到的是一个元素节点，而 container.getElementsByTagName("a")[0].getAttributeNode("href") 获取到的则是一个属性节点。