DOM提供的9大内置对象

m0_62356365

于 2022-03-21 19:25:54 发布

阅读量615

点赞数

文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/m0_62356365/article/details/123643621

版权

本文详细介绍了DOM，包括DOM的概念、节点树、访问节点的方式以及HTML DOM的常用属性和方法。通过示例讲解了如何通过getElementsByTagName、getAttribute等方法访问和操作节点，还提及了ES6的新API如querySelector和querySelectorAll。最后，讨论了DOM中的9大内置对象，如Array对象的各种方法，如concat、join、push等。

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

## 1.1 DOM概述

DOM：文档对象模型，当网页文档加载到浏览器内存时，浏览器会为文档生成一个对应的文档对象，

同时会解析这个文档中的所有内容，所有的成分都是一个节点，每个节点都是一个对象。

DOM 是这样规定的：

- 整个文档是一个文档节点
- 每个 XML 标签是一个元素节点
- 包含在 XML 元素中的文本是文本节点
- 每一个 XML 属性是一个属性节点
- 注释属于注释节点

补充：

XML文档：可扩展标记语言，这种文档以标签来描述数据的，而且可以自定义标签

HTML文档：超文本标记语言，它是XML的子集，不能自定义标签

## 1.2 节点树

DOM文档会被浏览器解析为一个节点树，节点之间有等级关系：

父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

- 在节点树中，顶端的节点成为根节点
- 根节点之内的每个节点都有一个父节点
- 节点可以有任何数量的子节点
- 叶子是没有子节点的节点
- 同级节点是拥有相同父节点的节点

## 1.3 访问节点

XML DOM：HTMLCollection getElementsByTagName() 根据标签的名称可以获取到DOM节点集合，HTML DOM 继承了

每个节点都是Node的对象，每个节点对象都有nodeName、nodeValue、nodeType属性

<body>
		
		
		<ul>
			<li>水浒传</li>
		</ul>
		
			
		<script type="text/javascript">
			// 创建一个新的元素节点li
			// createElement('元素名称') 创建新的元素节点
			var newLi = document.createElement('li');
				
			newLi.innerHTML = '<span>西游记</span>';
			
			newLi.setAttribute('id', 'li2');
			
			var ulEle = document.getElementsByTagName('ul')[0];
			
			ulEle.appendChild(newLi);
			
		</script>	
			
		
	</body>

元素节点的三个属性的值是什么：

访问方式： document.getElementsByTagName parentNode firstChild lastChild childNodes

nodeName: 标签名

nodeType: 1

nodeValue： null

属性节点的三个属性的值是什么：

访问方式：元素节点.getAttribute("属性名称")

nodeName: 属性名称

nodeType: 2

nodeValue：属性的值

文本节点的三个属性的值是什么：

访问方式：元素节点.textContent(文本内容) 、 firstChild

nodeName: #text 固定

nodeType: 3

nodeValue：文本内容本身

注释节点：

访问方式：

nodeName: #comment 固定

nodeType: 8

nodeValue： null

文档节点的三个属性的值是什么：

访问方式： document 对象

nodeName: #document 固定的

nodeType: 9

nodeValue： null

<body>
		
		<ul id="books">
			<li>天龙八部</li>
		</ul>
		
		
		<script type="text/javascript">
			var newLi = document.createElement('li');
			// 设置文本
			newLi.innerHTML = '倚天屠龙记';
			// 获取ul
			var ulEle = document.querySelector('#books');
			
			 var firstLi = ulEle.firstElementChild;
			
			// replaceChild(新的节点, 旧的节点)
			ulEle.replaceChild(newLi, firstLi);
			
			
			// 追加节点
			// ulEle.appendChild(newLi);
			
			// // firstChild获取第一个子节点
			
			// ulEle.removeChild(firstLi);
			
			
		</script>
	</body>

## 1.4 HTML DOM 常用属性和方法

Node节点对象

Element元素节点对象

Attr属性节点对象

元素节点 textContent属性可以设置或获取纯文本内容，HTML标签不会被浏览器解析

createElement('元素名称') 创建元素节点这个方法继承自XML DOM

appendChild(新的元素节点) 在某个元素节点内最后添加新的节点对象

innerHTML属性：设置或获取元素节点的文本内容，HTML标签会被浏览器解析

getElementById()：根据元素的Id获取元素对象

getElementsByClassName() : 根据元素的class属性的值（类名）获取一组元素节点对象

getElementsByTagName() : 根据标签名称获取一组元素节点对象

getElementsByName() : 根据标签的name属性的值获取一组元素节点对象