DOM

最新推荐文章于 2021-04-09 21:45:19 发布

周朝兵

最新推荐文章于 2021-04-09 21:45:19 发布

阅读量125

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/m0_45251955/article/details/103211050

版权

js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

本文介绍了HTML中的DOM，它是一种用于操作HTML内容的API，以树形结构存储网页元素。节点对象有三个主要属性：nodeType、nodeName和nodeValue。DOM中包含了父子、兄弟等节点关系的获取方法，并提供了创建、添加、移除、替换、插入节点的函数，如createElement、appendChild等。此外，还提到了Gecko内核浏览器对空白符处理的影响以及各种查找元素的方法。

摘要由CSDN通过智能技术生成

在介绍DOM之前，我们首先来看一下下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM第一次体验</title>
</head>
<body>
 
	
	<div></div>
	<script>
		// 操作div的宽高背景颜色，并且每一次点击更换颜色
		var div = document.getElementsByTagName("div")[0];
		div.style.width = "100px";
		div.style.height = "100px";
		div.style.backgroundColor =  "#f00";
 
		var count = 0 ;
		div.onclick = function () {
			count ++;
			if( count % 2 == 1){
				this.style.backgroundColor = "#0f0";
			}else{
				this.style.backgroundColor = "#f00";
			}			
		}
		
	</script>
</body>
</html>

DOM分很多种，不同的开发语言都有所不同，这里讲的主要是HTML中的DOM。它是一种专门操作HTML内容的API，在实际的开发中，先用简单的DOM，也就是HTML中的，如果简单的不能解决问题，在采用核心DOM，核心DOM是能够操作所有结构化文档的。在网页中，一切在内存中都是以树形结构存储的，在HTML中，每一个元素，属性，文本都是一个节点对象。

节点对象的三大属性：

1、nodeType

nodeType 属性返回以数字值返回指定节点的节点类型。

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

专门区分节点的类型：

document 9

element 1

attribute 2

text 3

在需要区分节点类型的时候使用。

2、nodeName

nodeName 属性指定节点的节点名称。

如果节点是元素节点，则 nodeName 属性返回标签名。

如果节点是属性节点，则 nodeName 属性返回属性的名称。

对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

专门区分元素名称：

document #document
element 全大写的标签名
attribute 属性名
文本节点 #text

进一步区分元素名称时使用

3、nodeValue 属性根据节点的类型设置或返回节点的值。

document null
element null
attribute 属性值
text 文本的内容

在查找DOM树时，有三种元素不需要找，可以直接获得

document.documentElement document.head document.body

在DOM树中，不同的节点可以用不同称呼来形容，比如，节点在你前面一级的，称为父节点，在你后面一级的称为子节点，和你同一级的称为兄弟节点，以此类推，可以将所有节点都囊括进来。不同的节点当然也有不同的关系，通过这些关系可以查找到不同的元素，比如：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<span>Hello World!</span>
	<ul id="nav">
		<li>aa</li>
		<li>bb
			<ul>
				<li>b1</li>
				<li>b2</li>
				<li>b3</li>
			</ul>
		</li>
		<li>cc</li>
	</ul>
</body>
<script type="text/javascript">
 
</script>
</html>

（1）父子关系

node.parentNode 获得node的父节点
node.childNodes 获得node的所有子节点
node.firstChild 获得node下的第一个子节点
node.lastChild 获得node下最后一个子节点

（2）兄弟关系

node.preivousSibling: 返回当前节点的前一个兄弟节点
node.nextSibling: 返回当前节点的下一个兄弟节点
网页中的一切都是节点，包括换行和空字符。

Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中。因此，使用诸如 Node.firstChild 和 Node.previousSibling 之类的方法可能会引用到一个空白符文本节点，而不是使用者所预期得到的节点。

添加删除替换插入的方法:

1）创建、添加、移除、替换、插入
createElement() //创建
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

2）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

周朝兵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM

在介绍DOM之前，我们首先来看一下下面的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM第一次体验</title></head><body> <div></div...
复制链接

扫一扫

专栏目录