JS笔记 ( 二十 ) DOM 的基本操作

最新推荐文章于 2024-08-07 17:12:09 发布

leon9dragon

最新推荐文章于 2024-08-07 17:12:09 发布

阅读量147

点赞数

分类专栏： JavaScript 基础文章标签： javascript js

本文链接：https://blog.csdn.net/leon9dragon/article/details/104031625

版权

JavaScript 基础专栏收录该内容

32 篇文章 3 订阅

订阅专栏

文章目录

1. DOM 的定义
2. 对节点的增删查改

博主的 Github 地址

1. DOM 的定义

(1) DOM 的全称是 Document Object Model, 即文档对象模型
(2) DOM 定义了表示和修改文档所需的方法. Dom 对象即为宿主对象, 由浏览器厂商定义.
用来操作 html 和 xml 功能的一类对象的集合, 也有人称 DOM 是对 HTML 以及 XML 的标准编程接口

2. 对节点的增删查改

[1] 查看元素节点

document 代表整个文档

单独的写 document 代表整个文档
若在<HTML>标签之上, 可以再套一层标签的话, 那这层标签则应该是<document>
<html>标签代表的是文档的根目录, document 则代表的是整个文档本身,
因此可以说, document 是整个文档在 js 中的表现形式

document 对象中的获取 / 查看元素的方法

1) document.getElementById()

作用: 根据元素的 ID 来获取目标元素

2) document.getElementsByTagName()

作用: 根据标签名来获取一组元素, 并将元素存入一个数组之中
备注: 存放元素的数组是一个类数组, 若想取得特定对象则在返回的类数组进行操作
示例
将页面中节点树上的第一个 div 选出来

document.getElementByTagName('div')[0]

选出页面所有元素中的第一个元素

document.getElementByTagName('*')[0]

3) document.getElementsByClassName()

作用: 根据标签内所使用的 class 来获取一组元素, 并将元素存入一个数组之中
即选择使用了该 class 的元素, 并装入类数组之中

4) document.getElementsByName()

作用: 根据标签内的 name 属性进行选出元素组
备注: 只有部分标签的 name 属性是可以生效的在旧版本浏览器当中
有 name 属性的一些标签: 表单, 表单元素, img, iframe

5) document.querySelector()

作用: 参数可以直接用 css 选择器对元素进行选择

6) document.querySelectorAll()

作用: 与上面方法相同, 但选择的是一组元素, 并符合要求的元素存于类数组当中
备注:
但这两个方法所选择的元素并不是实时的,
在页面被动态修改后, 用该方法进行选取元素并不能获取的到新元素,
同时若旧元素被删除, 用该方法却依旧认为这些元素没被删除, 还可以对其进行获取,
因此这两个方法并不推荐使用

[2] 遍历节点树

1) parentNode

定义: 父节点, 最顶端的父节点是#document
作用: 以 Node 对象的形式返回指定节点的父节点, 如果指定节点没有父节点, 则返回 null

2) childNodes

定义: 子节点们
作用: 返回指定节点下的子节点们, 存入一个类数组之中
备注: 子节点包含所有节点类型

3) firstChild 和 lastChild

定义: 第一个 / 最后一个子节点
作用: 返回指定节点下的第一个 / 最后一个子节点

4) nextSibling 和 previousSibling

定义: 下一个 / 上一个兄弟节点
作用: 返回指定节点的下一个 / 上一个兄弟节点

[3] 基于元素节点树的遍历

1) parentElement

作用: 返回当前元素的父元素节点

2) children

作用: 返回当前元素的元素子节点们

3) childElementCount

作用: 当前元素节点的子元素的个数
备注: 等同于调用 children.length

4) firstElementChild 和 lastElementChild

作用: 返回当前元素下的第一个 / 最后一个元素子节点

5) nextElementSibling 和 previousElementSibling

[4] 节点的四个属性

1) nodeName

作用: 返回元素的标签名, 以大写形式表示, 只读, 不可修改

2) nodeValue

作用: Text 节点或 Comment 节点的文本内容, 可读写

3) nodeType

作用: 返回节点的类型, 只读
节点的类型分类
(1) 元素节点 -------- 返回值 1
(2) 属性节点 -------- 返回值 2
(3) 文本节点 -------- 返回值 3
(4) 注释节点 -------- 返回值 8
(5) document -------- 返回值 9
(6) DocumentFragment -------- 返回值 11

4) attributes

作用: 返回element节点的属性集合, 并将节点的属性全部装入类数组当中
备注: 可以通过调用属性集合去修改节点的属性值, 但属性的名字是修改不了的

5) 节点的一个方法 Node.hasChildNodes()

作用: 判断该节点下有无子节点, 返回 true/false

[5] DOM 结构树

在这里插入图片描述

DOM 元素的最终父类也是 Object

注意事项

1) getElementById 方法定义在 Document.prototype 上, 即 Element 节点上不能使用
**2) getElementsByTagName 方法定义在 Document.prototype 和 Element.prototype 上 **
3) getElementsByName 方法定义在 HTMLDocument.prototype 上,
即非 HTML 中的 document 不能使用 (xml, document, Element)
4) HTMLDocument.prototype 定义了一些常用的属性,
body 和 head 分别指代 HTML 文档中的 <body> <head>标签
5) Document.prototype 定义了 documentElement 属性, 指代文档的根元素,
在 HTML 文档中, 它总是指代<HTML>元素
6) getElementsByClassName, querySelector, querySelectorAll 这几个方法
在 Document.prototype 和 Element.prototype 中均有定义