DOM模型（上）_虚拟dom树图例-CSDN博客

本文链接：https://blog.csdn.net/weixin_45921263/article/details/116571944

文章目录

一.DOM模型概述
二、DOM节点的属性和关系
- 1.DOM节点的属性
- 2.DOM节点的关系
三、DOM模型之document对象
总结

一.DOM模型概述

对DOM模型，学习JavaScript的人都知道它，我通过在网上查资料和自己的理解，对DOM模型的概念作一阐述。DOM模型就是平常所说的DOM树，对于树，咱们了解到的就是树的节点，dom树也是如此。一般一个网页的DOM结构一开始是固定的，DOM提供了可以从程序的角度访问结构的方式来动态的修改数据，样式，结构。

DOM树

图1.DOM树

在这里插入图片描述

图2.HTML DOM节点

二、DOM节点的属性和关系

1.DOM节点的属性

1.1.内容

1.nodeName属性：规定节点的名称。
（1）nodeName是只读的
（2）元素节点的nodeName与标签名相同
（3）属性节点的nodeName与属性名相同
（4）文本节点的nodeName始终是#text
（5）文档节点的nodeName始终是#document
注：nodeName始终包含HTML元素的大写字母标签名

2.nodeValue属性：规定节点的值
（1）元素节点的nodeValue是undefined或null
（2）文本节点的nodeValue是文本本身
（3）属性节点的nodeValue是属性值

3.nodeType属性：返回节点的类型，nodeType是只读
节点类型：

元素类型	nodeType
元素	1
属性	2
文本	3
注释	8
文档	9

2.代码如下（示例）:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	 <script>
		   window.onload = () =>{
   
			   //给外层的div添加单击事件
			   let  p = document.getElementById("p") ;
			   
			   console.log(p.nodeName)
			   console.log(p.nodeValue)
			   console.log(p.nodeType)
			   
			   //获取文本节点
			   let txt = p.firstChild ;
			   console.log(txt.nodeValue)
			   console.log(txt.nodeName)
			   console.log(txt.nodeType)
			  
		   }
	 </script>
	<body>
		<p id = "p">林志玲</p>
	</body>
</html>

2.DOM节点的关系

2.1.内容
DOM节点之间的关系只有父子和兄弟关系.

parentNode（父节点）
childNodes（孩子节点）
firstChild（被选中元素的第一个孩子节点）
lastChild（最后一个孩子节点）
nextChild（下一个孩子节点）
previousSibing（当前节点的兄弟节点）
document.documentElement:全部文档
document.body:文档的主体

2.2. 代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" /