JS Dom 入门: 前端开发必备基础

2023-10-07 19:43:57

JS DOM 简介

DOM（Document Object Model），文档对象模型，是一种平台和语言独立的方式，用于访问和修改 HTML 文档的内容和结构。通过 DOM，我们可以使用 JavaScript 脚本访问 HTML 页面中的所有元素，对这些元素进行操作，例如更改其属性、添加或删除内容、绑定事件处理函数等。

DOM 基础概念

在 DOM 中，文档被表示为一个树形结构，称为 DOM 树。DOM 树的根节点是 Document 对象，它代表整个 HTML 文档。Document 对象包含了所有其他元素，包括 HTML 元素、文本节点、注释节点等。

DOM 树中的每个元素都是一个节点。节点有不同的类型，最常见的节点类型包括：

元素节点：代表 HTML 元素，如 <div>, <p>, <a> 等。
文本节点：代表元素中的文本内容。
注释节点：代表注释内容，通常用于代码注释。

每个节点都有自己的属性和方法。属性是节点的固有特性，如元素节点的 id、class 等属性。方法是节点可以执行的操作，如元素节点的 addEventListener() 方法用于添加事件处理函数。

DOM 操作

我们可以使用 JavaScript 代码来操作 DOM 树，对其中的元素进行增、删、改、查等操作。常见的 DOM 操作包括：

获取元素：我们可以使用 document.getElementById()、document.getElementsByClassName() 等方法获取元素。
创建元素：我们可以使用 document.createElement() 方法创建元素。
添加元素：我们可以使用 appendChild() 方法将元素添加到其他元素中。
删除元素：我们可以使用 removeChild() 方法删除元素。
更改元素属性：我们可以使用 setAttribute() 方法更改元素属性。
获取元素内容：我们可以使用 innerHTML、innerText 等属性获取元素内容。
绑定事件处理函数：我们可以使用 addEventListener() 方法将事件处理函数绑定到元素。

DOM 事件

DOM 事件是用户与网页交互时发生的事件，如点击、鼠标移动、键盘按下等。我们可以使用 JavaScript 代码来监听 DOM 事件，并在事件发生时执行相应的操作。

常见的 DOM 事件包括：