WEB:DOM (一)基础概念 —— 节点与选择

文章目录

  • 一、DOM 核心概念解析
    • 1.1 什么是 DOM?
    • 1.2 DOM 与 HTML 的关系
  • 二、DOM 节点(Node)详解
    • 2.1 节点类型
    • 2.2 节点的基本属性
    • 2.3 元素节点特有的属性和方法
  • 三、DOM 选择与访问
    • 3.1 传统选择方法
      • 3.1.1 getElementById()
      • 3.1.2 getElementsByTagName()
      • 3.1.3 getElementsByClassName()
    • 3.2 现代选择方法(CSS 选择器)
      • 3.2.1 querySelector()
      • 3.2.2 querySelectorAll()
    • 3.3 特殊元素的访问
    • 3.4 选择方法的对比与选择建议

DOM(Document Object Model,文档对象模型)是 JavaScript 操作网页的核心接口,也是前端开发中不可或缺的知识。本文将从 DOM 的基本概念出发,详细讲解 DOM 的结构、节点类型、操作方法。无论是前端初学者还是有经验的开发者,都能从本文中获得对 DOM 的深入理解。

一、DOM 核心概念解析

1.1 什么是 DOM?

DOM(Document Object Model) 是 W3C(万维网联盟)定义的一套标准,用于表示和操作 HTML、XML 文档的结构。它将文档视为一个树形结构,每个节点都是文档的一部分,通过 JavaScript 可以对这些节点进行增删改查等操作。

简单来说,DOM 的作用是在 JavaScript 和网页内容之间建立桥梁。当浏览器加载 HTML 文档时,会解析 HTML 并构建一个 DOM 树,开发者可以通过 JavaScript 访问和修改这棵树,从而实现动态更新网页内容、结构和样式的效果。

DOM 的本质:将文档转换为一个可编程的对象模型。

1.2 DOM 与 HTML 的关系

DOM 和 HTML 是两个不同的概念:

  • HTML 是用于描述网页结构的标记语言(文本形式)
  • DOM 是浏览器根据 HTML 解析生成的对象模型(内存中的树形结构)

举例来说,一段简单的 HTML:

DOCTYPE html>
<html>
  <head>
    <title>DOM示例title>
  head>
  <body>
    <h1>Hello DOM !h1>
  body>
html>

浏览器会将其解析为如下 DOM 树结构:

document
└── html (根元素)
    ├── head
    │   └── title
    │       └── "DOM示例" (文本节点)
    └── body
        └── h1
            └── "Hello DOM !" (文本节点)

可以看出,DOM 树完整保留了 HTML 的层级关系,同时将每个标签、文本、属性等都转换为可操作的对象。

二、DOM 节点(Node)详解

DOM 树由各种类型的节点(Node)组成,理解节点的类型和属性是掌握 DOM 操作的基础。

2.1 节点类型

根据 W3C 标准,DOM 节点主要分为以下几种类型:

节点类型 常量 描述 示例
元素节点 Node.ELEMENT_NODE HTML 或 XML 标签
,

,

文本节点 Node.TEXT_NODE 元素中的文本内容 Hello World
属性节点 Node.ATTRIBUTE_NODE 元素的属性 class="active", id="name"
注释节点 Node.COMMENT_NODE 文档中的注释

你可能感兴趣的:(WEB,前端)