DOM 概念

DOM 全称是 Document Object Model（文档对象模型），它是 HTML 和 XML 文档的一种表示方法。DOM 将一个 HTML 文档视为一棵树状结构，其中每个节点代表文档中的一个部分，比如元素、属性或文本。

DOM 的核心概念

在 JavaScript 中，对象可以分为三类：

用户定义的对象：通过 new 关键字创建的普通对象

内建对象：如 Array、Date、Math 等内置的 JavaScript 对象

宿主对象：与 JavaScript 引擎相关的对象

DOM 的核心思想是通过 DOM 方法获取和操作文档中的元素、属性和文本。例如：

本网页由 JS 写成,期待您对其进行学习

在上述代码中，body 标签下的节点包括 h1、p 和 ul。ul 标签下的节点则是 li 标签。

在 DOM 中，节点可以分为三种类型：

元素节点 (Element Node)：如 HTML 标签 <div>、<p> 等

属性节点 (Attribute Node)：如 HTML 标签中的 title、class 等属性值

文本节点 (Text Node)：如 HTML 文本内容

以以下示例为例：

本网页由 JS 写成,期待您对其进行学习

获取 DOM 节点的方式主要有以下三种：

document.getElementById()：通过 id 属性快速获取元素

let eleNode = document.getElementById('classList');

document.getElementsByTagName()：通过标签名获取所有同一标签的元素

let oList = document.getElementsByTagName('li');

document.getElementsByClassName()：通过 class 属性值获取元素

let oItems = document.getElementsByClassName('item');

通过以上方法，可以轻松获取 DOM 中的各种节点，并根据需要进行操作。

在实际开发中，DOM 可用于以下操作：

元素的添加与删除：例如通过 appendChild() 和 removeChild() 方法

属性的设置与修改：通过 setAttribute() 和 removeAttribute() 方法

文本内容的修改：通过 textContent 和 innerHTML 属性

事件的绑定：通过 addEventListener() 方法

动态生成内容：通过 document.createElement() 方法创建新元素

通过合理运用 DOM 方法，可以实现对 HTML 文档的灵活操作，充分发挥 JavaScript 的优势。

转载地址：http://vjxnz.baihongyu.com/

你可能感兴趣的文章