DOM（节点、Node类型、Document类型、Element属性、Text类型、Comment类型）

最新推荐文章于 2022-06-10 09:30:10 发布

Feather_74

最新推荐文章于 2022-06-10 09:30:10 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44997147/article/details/104228386

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

节点

DOM将任何HTML和XML文档描绘成一个由多层节点构成的结构。
节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。
文档节点是每个文档的根节点。
1、文档元素
文档节点只有一个子节点，称之为文档元素。每个文档只能有一个文档元素。在HTML页面中，文档元素始终是<html>元素。在XML中，任何元素都有可能成为文档元素。

Node类型

DOM1级定义了一个Node接口
JavaScript所有的节点类型都继承自Node类型，因此所有节点类型都共享者相同的基本属性和方法。

if(document.nodeType==9){
	console.log(111)
}

所有节点共有的属性

1、nodeName和nodeValue
对于元素节点，nodeName始终是元素的标签名，nodeValue的值始终为null
2、NodeList对象
每个节点都有一个childNodes属性，其中保存着NodeList对象。
NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。可以通过方括号语法访问NodeList值，也存在length属性，但是它不是Array实例，会基于DOM结构动态执行查询的结果。
3、parentNode属性
每个节点都有一个parentNode属性，该属性指向文档树中的父节点。childNodes列表中的所有节点具有相同的父节点，每个节点相互之间都是同胞节点。
4、previousSibling属性和nextSibling属性
当列表中只有一个节点，previousSibling属性和nextSibling属性都为null
5、firstChild属性和lastChild属性
父节点的firstChild属性和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点。
6、ownerDocument属性
直接访问文档节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="fan">111</div>
		<script type="text/javascript">
			var fan=document.getElementById("fan")
			if(document.nodeType==9){
				console.log(fan.nodeName)
				console.log(fan.nodeValue)
				console.log(fan.childNodes)
				console.log(fan.parentNode)
				console.log(fan.previousSibling)
				console.log(fan.nextSibling)
				console.log(fan.firstChild)
				console.log(fan.lastChild)
				console.log(fan.ownerDocument)
			}
		</script>
	</body>
</html>

在这里插入图片描述

操作节点的方法

1、appendChild()
向childNodes列表的末尾添加一个节点
2、insertBefore()
把节点放在childNodes列表中某个特定的位置。接受两个参数：要插入的节点和作为参照的节点。插入后，被插入的节点成为参照节点的前一个同胞节点。
3、replaceChild()
接收两个参数：要插入的节点和要替换的节点。被替换的节点仍存在文档中，但指向该节点的所有关系指针都会被替换的节点复制过去。
4、removeChild()
移除节点，接收一个参数，即要被移除的节点。被删除的节点仍存在文档中。
5、cloneNode()
创建一个完全相同的副本，只接受一个布尔值参数，true表示深复制，复制节点以及整个子节点树；false表示浅复制，只复制节点本身。
6、normalize()
处理文档树的文本节点，将相邻文本节点合并

Document类型

JavaScript通过Document类型表示文档。document对象是HTMLDocument的一个实例，表示整个html页面
1、documentElement属性
始终指向HTML页面的<html>元素，可以快速访问其字节点

var html=document.documentElement

2、body属性
直接指向<body>元素

var body=document.body

3、doctype属性
通常将<!DOCTYPE>标签看成一个与文档其他部分不相同的实体

var doctype=document.doctype

4、title属性
包含<title>元素中的文本

5、URL属性、domain属性、referrer属性
URL属性:包含页面完整的URL
domain属性:包含页面的域名
referrer属性:链接到当前页面的那个页面的URL
只有domain可以修改。通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。

6、getElementById()
表单字段的name属性最好不与其他元素的ID相同

7、getElementByTagName()
返回包含零或多个元素的NodeList
PS: 在Element属性中，只返回当前元素的后代

8、namedItem()
通过元素的name属性获得集中的项

9、getElementByName()
返回带有给定name属性的所有元素

Element属性

表示XML或HTML元素，提供对元素标签名、子节点、特性的访问。Element属性是使用attribute属性的唯一一个DOM节点类型。
1、getAttribute()
操作DOM时，getAttribute在取得自定义特性值的情况下用的比较多，一般只是用对象的属性

2、setAttribute()
接收两个参数：要设置的特性名和特性值。如果特性已存在，会替换原有的值，不存在会创建该特性并设置值

3、removeAttribute()
彻底删除元素的特性

4、NamedNodeMap对象
attribute属性包含一个NamedNodeMap对象，与NodeList类似。有以下方法：

getNamedItem(name)
removeNamedItem(name)
setNamedItem(name)
item(pos)：返回数字pos位置处的节点

var fan=document.getElementById("fan")
//等价的
console.log(fan.getAttribute("id"))
console.log(fan.attributes.getNamedItem("id").nodeValue)

5、createElement()
创建新元素，只接受一个参数，即标签名，不区分大小写

Text类型

1、操作节点中的文本

appendData(text)
deleteData(offset,count)
insertData(offset,text)
replaceData(offset,count,text)
splitText(offset)：分成两个文本节点
substringData(offset,count)

2、createTextNode()
创建新文本节点，只接受一个参数，即要插入节点中的文本

Comment类型

Comment类型与Text类型继承自相同的积累，它拥有除了splitText()之外的所有字符串操作方法

Feather_74

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM（节点、Node类型、Document类型、Element属性、Text类型、Comment类型）

节点DOM将任何HTML和XML文档描绘成一个由多层节点构成的结构。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。文档节点是每个文档的根节点。1、文档元素文档节点只有一个子节点，称之为文档元素。每个文档只能有一个文档元素。在HTML页面中，文档元素始终是<html>元素。在XML中，任何元素都有可能成为文档元素。Node类型DOM1级定...
复制链接

扫一扫