【前端教程】DOM基础：探索文档对象模型的核心概念

什么是DOM？

DOM（Document Object Model，文档对象模型）是一种用于表示和操作HTML、XML文档的编程接口。它将文档结构化为一个树形模型，其中每个节点代表文档中的一个部分，使开发者能够通过编程语言（如JavaScript）对文档内容、结构和样式进行动态操作。

DOM的核心概念

DOM的核心思想是将文档表示为一个树形结构（DOM树），开发者可以通过操作这棵树上的节点来改变文档的内容和呈现方式。

• 元素：可以理解为节点、对象或HTML标签
• DOM树：由多个标签（对象、元素）组成的层级结构
• 节点：DOM树的基本组成单位，包含各种类型

节点的分类

DOM中的节点主要分为三大类：

1. 元素节点：HTML中的各种标签（如<div>、<p>等）
2. 属性节点：每个标签中包含的属性（如class、id等）
3. 文本节点：标签中间的文本内容

重要关系：节点包含标签，标签不包含节点

要操作DOM中的内容，首先需要获取DOM中的节点。

获取DOM元素节点的四种方式

获取元素节点的代码要么写在文档的最后，要么包裹在window.onload()中，以确保DOM加载完成：

1. 通过ID获取

   document.getElementById("ID名称");
   

   • 获取的内容只有一个，如果存在多个相同ID，获取的是第一个

2. 通过标签名称获取

   document.getElementsByTagName("标签名称");
   

   • 可以获取多个内容，返回一个类数组对象
   • 可以通过数组的下标来访问特定标签

3. 通过name属性获取

   document.getElementsByName("name名称");
   

4. 通过类名获取

   document.getElementsByClassName("类名称");
   

提示：大部分元素节点都可以使用这四种方式获取

操作节点的方式

获取到节点之后，可以通过以下方式操纵节点：

• 修改节点属性
• 改变节点内容
• 调整节点样式
• 为节点添加事件

节点的属性

每个节点都有以下属性用于描述其特性：

1. nodeType：节点的类型

   • 1：代表元素节点
   • 2：代表属性节点
   • 3：代表文本节点
   • 用途：判断节点类型，如if(i.nodeType == 3){}

2. nodeName：节点的名称

   • 元素节点：大写标签名称（如"DIV"）
   • 属性节点：小写名称（如"class"）
   • 文本节点：“#text”

3. nodeValue：节点的内容

   • 元素节点：null
   • 属性节点：属性值
   • 文本节点：具体的文本内容

节点关系与导航

获取子节点

// 得到所有子节点的数组，包含文本节点
element.childNodes;// 获取某标签下的所有元素节点，返回类数组
element.children;// 获取某元素节点下的所有属性节点，返回类数组
element.attributes;

获取首尾节点

// 获取第一个子节点，包含文本节点
element.firstChild;// 获取第一个元素节点
element.firstElementChild;// 获取最后一个子节点，包含文本节点
element.lastChild;// 获取最后一个元素节点
element.lastElementChild;

获取父节点和兄弟节点

// 获取父节点
node.parentNode;// 获取上一个兄弟节点(包含文本节点)
node.previousSibling;// 获取上一个兄弟元素(不包含文本节点)
// 注意：S要大写
node.previousElementSibling;// 获取下一个兄弟节点(包含文本节点)
node.nextSibling;// 获取下一个兄弟元素(不包含文本节点)
node.nextElementSibling;

掌握这些DOM基础知识是进行前端开发的重要基石，它们为后续学习更复杂的DOM操作和交互效果奠定了基础。通过熟练运用这些方法，你可以开始创建动态、交互式的网页内容。