笔记六、DOM操作、事件

m0_69224248

已于 2023-10-12 09:48:01 修改

阅读量68

点赞数

文章标签：笔记前端 javascript

于 2023-10-07 11:55:11 首次发布

本文链接：https://blog.csdn.net/m0_69224248/article/details/133634853

版权

一、DOM操作

HTML DOM主要定义了用于 HTML中的一系列标准对象以及访问和处理 HTML 文档的标准方法。

通过 DOM 可以访问所有的 HTML 元素，连同它们所包含的文本和属性，还能够对其中的内容进行修改和删除，同时也可以创建新的元素。

在 DOM 中，每个HTML元素都可以当作节点（Node），如:

元素节点：所有的 HTML 元素都是元素节点；
属性节点：所有 HTML 属性都是属性节点；
文本节点：插入到 HTML 中的文本元素是文本节点；
注释节点：注释则是注释节点。

（一）节点层次

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。每个节点都拥有各自的特点、数据和方法，同时也与其他节点存在某种关系。

HTML文档层次结构如下：

文档节点（Document）：HTML文档的根节点。

文档元素（html）：文档节点只有一个子节点，即<html>元素，我们称为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中，每个文档只能有一个文档元素。

1.Node 类型

JavaScript 所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。除了 IE 之外，在其他所有浏览器中都可以访问到这个类型。

2.Node 对象属性

（1）nodeType（节点类型）

每个节点都有一个 nodeType ，是只读属性，用于表明节点的类型。

常用的节点类型主要有：

元素节点：1（获取元素属性节点，需要通过 getAttributeNode(name: string) 方法来获取）
属性节点：2
文本节点：3
注释节点：8
文档节点：9

（2）nodeName（节点名称）

节点的名称，也是只读属性。属性的值完全取决于节点的类型。

不同类型节点的节点名称是不一样的：

元素节点 ==> 元素名称（ <p> 属性的 nodeName 就是 P）
属性节点 ==> 属性名称（ id 属性的 nodeName 就是 id， class的就是 class）
文本节点 ==> #text
文档节点 ==> #document

（3）nodeValue（节点值）

不同类型节点的节点值如下：

元素节点的 nodeValue 是 null 或者 undefined
属性节点的 nodeValue 是属性的值
文本节点的 nodeValue 是文本自身

3.节点操作

(1) 获取节点

Node.childNodes //获取子节点列表NodeList

(2) 新增节点

createElement() // 按照指定的标签名创建一个新的元素节点

(3) 替换节点

parentNode.replace(newNode, targetNode); //使用newNode替换targetNode

(4) 移除节点

parentNode.removeChild(childNode); // 移除目标节点
node.parentNode.removeChild(node); //在不清楚父节点的情况下使用

(5) 修改DOM属性节点的方法

Node.getAttribute(attributename) // 获取
Node.setAttribute(attributename,attributevalue) // 设置
Node.removeAttribute(attributename) // 移除
Node.attribute // 获取DOM全部属性

二、Document对象

（一）常用的Document对象属性

1、title：该属性可返回当前文档的标题；

2、URL：该属性可返回当前文档的 URL；

3、domain：该属性可返回当前文档的服务器域名，是一个只读的字符串，包含了载入当前文档的 web 服务器的主机名；

4、cookie：该属性可设置或查看与当前文档相关的所有 cookie，是一个可读可写的字符串，可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作；

（二）常用的Document对象方法

1.getElementById()

此方法可返回拥有指定 ID 的第一个对象的引用，通过此方法来查找文档中的一个特定的元素。

2.getElementsByClassName()

此方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表，我们可通过节点列表中的节点索引号来访问列表中的节点(索引号从0开始)，即使用 数组元素访问方式来访问列表中的元素。当然也可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，可以通过循环各个元素来获取我们需要的元素.

参数：

variable:在每次迭代中，将不同属性的值分配给变量。
iterable:被迭代枚举其属性的对象。

3.getElementsByName()

此方法可返回带有指定名称的节点列表（NodeList）

4.getElementsByTagName()

此方法可返回带有指定标签名的对象的集合（HTMLCollection）。需要注意的是：

返回元素的顺序是按照它们在文档中的顺序的;
传递给 getElementsByTagName() 方法的字符串不区分大小写;
如果我们想要获取所有元素，则把 * 传递给 getElementsByTagName() 方法即可，它将会返回文档中元素的顺序返回所有元素的列表，与Document对象的all属性类似。

5.querySelector()

此方法 返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement 对象。如果找不到匹配项，则返回 null。

语法：element = document.querySelector(selectors);

三、事件

事件是文档或者浏览器窗口中发生的，特定的交互瞬间，通常是用户或浏览器自身执行的某种动作，是 javaScript 和 DOM 之间交互的桥梁。

（一）事件传播

事件传播分成三个阶段：

① 第一阶段：从window对象传导到目标节点，称为 “捕获阶段”（capture phase）。

② 第二阶段：在目标节点上触发，称为 “目标阶段”（target phase）。

③ 第三阶段：从目标节点传导回window对象，称为 “冒泡阶段”（bubbling phase）。

1.冒泡型事件

从 最特定的事件目标到最不特定的事件目标，即从DOM树的叶子节点到根节点

2.捕获型事件

从最不特定的事件目标到最特定的事件目标，即从 DOM 树的根节点到叶子节点。

3.事件流模型

事件流包括三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。
① 首先发生的是事件捕获，为截获事件提供了机会。
② 然后是实际的目标接收到事件。
③ 最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

（二）绑定事件

1. HTML标签的 `on-属性`

HTML语言允许在元素标签的属性中，直接定义某些事件的监听代码。违背了HTML与JavaScript代码相分离的原则

2. Element节点的事件属性

Element节点对象有事件属性，同样可以指定监听函数。同一个事件只能定义一个监听函数

3. addEventListener()

addEventListener方法，也可以定义事件的监听函数。用法如下：

// 使用格式
elementObject.addEventListener(eventName, handle[, useCapture]);

优点：

可以针对同一个事件，添加多个监听函数。
能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发回监听函数。
除了DOM节点，还可以部署在window、XMLHttpRequest等对象上面，等于统一了整个JavaScript的监听函数接口。

注意：

上图中的eventName，即事件名称，并没有“on”，例如鼠标单击事件click ，鼠标双击事件doubleclick ，鼠标移入事件mouseover，鼠标移出事件mouseout等：
addEventListener方法可以针对同一个事件添加多个监听函数。先添加先触发。
如果对同一个事件多次添加相同监听函数，该函数只会执行一次，多余的添加将自动被去除