JS笔记（3/8）之DOM,事件

最新推荐文章于 2023-11-18 08:23:10 发布

Pass.K

最新推荐文章于 2023-11-18 08:23:10 发布

阅读量183

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42103141/article/details/106045751

版权

DOM

DOM概述

DOM（Document Object Model), 全称为"文档对象模型".它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据DOM模型，将结构化文档（比如xml，html）解析成一系列的节点，再由这些节点组成一个树状结构（DOM tree). 所有的节点以及最顶层的树状节点，都有规范的对外接口。

通过这些接口，就可以对任一个节点进行操作，也就是DOM操作。

严格来说，DOM其实是一个接口规范，可以用任何语言实现。所以DOM不是JS语法的一部分，但DOM操作是JS最常见的任务，没有DOM，js就无法控制网页。另一方面，JS也是最常用于DOM操作的语言。

DOM节点类型

DOM最小组成单位叫做节点（node）

节点类型7种
文档节点Document：整个文档树的顶层节点
文档类型节点DocumentType：doctype标签（比如<!DOCTYPE html>）
元素节点Element：网页的各种HTML标签（比如<body>、<a>等）
元素属性节点Attr：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
文档片段节点DocumentFragment：文档的片段？？

浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。

节点树

DOM 树有一个顶层节点，下一层都是顶层节点的子节点，

浏览器原生提供document节点，代表整个文档。

文档的第一层有两个节点，第一个是文档类型节点（<!doctype html>），第二个是 HTML 网页的顶层容器标签。

后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。

除了根节点，其他节点都有三种层级关系。

父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点

DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。

Node接口

属性
Node.prototype.nodeType
Node.prototype.nodeName
Node.prototype.nodeValue
Node.prototype.textContent
Node.prototype.baseURI
Node.prototype.ownerDocument
Node.prototype.nextSibling
Node.prototype.previousSibling
Node.prototype.parentNode
Node.prototype.parentElement
Node.prototype.firstChild，Node.prototype.lastChild
Node.prototype.childNodes
Node.prototype.isConnected
方法
Node.prototype.appendChild()
Node.prototype.hasChildNodes()
Node.prototype.cloneNode()
Node.prototype.insertBefore()
Node.prototype.removeChild()
Node.prototype.replaceChild()
Node.prototype.contains()
Node.prototype.compareDocumentPosition()
Node.prototype.isEqualNode()，Node.prototype.isSameNode()
Node.prototype.normalize()
Node.prototype.getRootNode()

NodeList 接口； HTMLCollection 接口

DOM 提供两种节点集合，用于容纳多个节点：NodeList和HTMLCollection。

主要区别是，NodeList可以包含各种类型的节点，HTMLCollection只能包含 HTML 元素节点。
NodeList 接口
NodeList实例是一个类似数组的对象，它的成员是节点对象。通过以下方法可以得到NodeList实例。

Node.childNodes
document.querySelectorAll()等节点搜索方法

NodeList.prototype.length
length属性返回 NodeList 实例包含的节点数量

NodeList.prototype.forEach()
forEach方法用于遍历 NodeList 的所有成员。它接受一个回调函数作为参数，每一轮遍历就执行一次这个回调函数，用法与数组实例的forEach方法完全一致。

NodeList.prototype.item()
item方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。

NodeList.prototype.keys()，NodeList.prototype.values()，NodeList.prototype.entries()
这三个方法都返回一个 ES6 的遍历器对象，可以通过for…of循环遍历获取每一个成员的信息。区别在于，keys()返回键名的遍历器，values()返回键值的遍历器，entries()返回的遍历器同时包含键名和键值的信息。

HTMLCollection 接口
HTMLCollection是一个节点对象的集合，只能包含元素节点（element），不能包含其他类型的节点。它的返回值是一个类似数组的对象，但是与NodeList接口不同，HTMLCollection没有forEach方法，只能使用for循环遍历。

HTMLCollection.prototype.length
length属性返回HTMLCollection实例包含的成员数量。

HTMLCollection.prototype.item()
item方法接受一个整数值作为参数，表示成员的位置，返回该位置上的成员。

HTMLCollection.prototype.namedItem()
namedItem方法的参数是一个字符串，表示id属性或name属性的值，返回对应的元素节点。如果没有对应的节点，则返回null。

ParentNode 接口，ChildNode 接口

节点对象除了继承 Node 接口以外，还拥有其他接口。ParentNode接口表示当前节点是一个父节点，提供一些处理子节点的方法。ChildNode接口表示当前节点是一个子节点，提供一些相关方法。

ParentNode 接口
如果当前节点是父节点，就会混入（mixin）ParentNode接口。节点类型中，元素节点，文档节点，文档片段节点拥有子节点，因此只有这三类节点拥有ParentNode接口。

四个属性，两个方法
ParentNode.children
ParentNode.firstElementChild
ParentNode.lastElementChild
ParentNode.childElementCount
ParentNode.append()，ParentNode.prepend()

ChildNode 接口

如果一个节点有父节点，那么该节点就拥有了ChildNode接口。

四个方法
ChildNode.remove()
ChildNode.before()，ChildNode.after()
ChildNode.replaceWith()