8、文档对象

最新推荐文章于 2021-07-07 19:51:09 发布

青叶的全栈之路

最新推荐文章于 2021-07-07 19:51:09 发布

阅读量428

点赞数

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

本文链接：https://blog.csdn.net/dream_AI/article/details/106243879

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文档对象

关于DOM
Node对象
Document对象
Element对象
Attr对象
Text对象
Comment对象

一、关于DOM

1.1、什么是DOM？

DOM（document Object Model），文档对象模型，用于处理网页内容的一些方法和接口。

1.2、节点继承关系图

在这里插入图片描述

1.3、DOM树中的基本节点

Document：文档对象
Element：元素节点（标签）
Attr：属性节点（标签属性）
Text：文本（标签种包含的文本）
Comment：注释节点（标签中包含的注释）

二、Node对象

2.1、说明

Node节点是所有节点的根节点，Node节点的所有属性和方法都被其子节点所继承。

2.2、属性

parentNode：父节点，没有则为null
firstChild：第一个Node子节点（Node节点包括元素节点、属性节点、文本节点、注释节点等）
lastChild：最后一个Node子节点
nodeValue：Text或Comment节点的内容。
nodeName：当前节点的名称（小写），如document、div、input、text等。
nodeType：当前节点的类型（number），数值与节点类型的匹配关系如下：
- 1：Element
- 2：Attribute
- 3：Text
- 8：Comment
- 9：Document
innerText：返回/设置当前节点及其后代的文本内容。
innerHTML：返回/设置当前节点的HTML内容。

2.3、方法

appendChild（node）：在该元素的子节点列表末尾追加（并返回）一个子节点。
insertBefor（newNode，oldNode）：在指定节点前面插入（并返回）一个新节点。
removeChild（node）：删除（并返回）指定子节点。
replaceChild（newNode，oldNode）：替换（并返回）节点。
cloneNode（[boolean]）：复制（并返回）一个节点。默认复制当前节点，如果传入true，则递归复制所有子节点。

2.4、使用

//单独拿出来还真不好举例子

三、Document对象

3.1、说明

Document对象代表整个HTML，可以说是文档的根。

3.2、属性

3.3、方法

1）、获取节点

getElementById（id）：通过标签的id属性返回对应的Element对象
getElementsByName（name）：通过标签的name属性返回所有符合的Element对象集合。
getElementsByClassName（class）：通过标签的class属性返回所有符合的Element对象集合。
getElementsByTagName（标签名）：返回所有当前标签的Element对象集合。

html元素的id和name就像人的身份证号和名字一样，一人只有一个，但元素的class属却可以有多个值的(值与值之间用空格隔开)，且不同元素的可以有相同的class属性值。根据class匹配元素必须所有的class值都匹配，不能多或者少。例如：<img class="123 456 789">与document.getElementsByClassName("123 456")是不匹配的

2）、创建节点

createElement（标签名）：指定标签名，创建一个Element节点，返回Element对象
createTextNode（文本内容）：创建一个包含指定文本内容的Text节点，返回Text对象
createComment（注释内容）：创建一个包含指定注释内容的Comment节点，返回Comment对象
createAttribute（name）：创建指定名称的属性节点，返回Attribute对象

3.4、使用

1）、获取节点

<div class="divs" id="card">第一个盒子</div>
<div class="divs" >第二个盒子</div>
<div>第三个盒子</div>
<input type="text" name="txt">
<script>
    let div1 = document.getElementById("card");
	console.log(div1.id);//card
	let nameList = document.getElementsByName("txt");
	console.log(nameList[0].name)//txt
	let classList = document.getElementsByClassName("divs");
	console.log(classList[1].className)//divs
	let tagList = document.getElementsByTagName("div");
	console.log(tagList[2].tagName);//DIV
</script>