黄子涵

9.2 DOM的基础

9.2.1　标签、元素、节点

在对 HTML 以及 DOM 进行讨论时，我们常常会混用标签、元素、节点等术语。故在此再次对它们的定义进行确认。

标签

标签是一种用于标记的字符串，其作用为对文档的结构进行指定。通常都会有起始标签与结束标签。在结束标签中，有一些可以被省略，如 <p> 标签。同时也有一些标签不存在结束标签，例如 <input> 标签（代码清单 9.1）。说到底标签只是用于书写场合，在谈论 DOM 的话题时几乎不会使用。

代码清单 9.1 标签
<div> <!-- div的起始标签 -->
    <p> <!-- p的结束标签可以省略 -->
        <input type="button"> <!-- input只有起始标签而没有结束标签 -->
</div> <!-- div的结束标签 -->
元素、节点

比较容易产生混淆的是元素和节点的概念。元素和节点之间略有一些继承关系，其中节点是父类概念。节点具有 nodeType 这一属性，如果其值为 ELEMENT_NODE(1)，该节点则是一个元素。

表 9.5 总结了 HTML 文档常用的节点。

表 9.5　在 HTML 文档中使用的节点
节点 节点类型常量 节点类型的值 接口
元素节点 ELEMENT_NODE 1 Element
属性节点 ATTRIBUTE_NODE 2 Attr
文本节点 TEXT_NODE 3 Text
注释节点 COMMENT_NODE 8 Comment
文档节点 DOCUMENT_NODE 9 Document

9.2.2　DOM 操作

JavaScript 的作用是使网页能够执行某些功能。为了实现这些功能，必须对 DOM 进行操作。通过选择某个 DOM 元素并改写其属性，或创建一个新的 DOM 元素，就能够给予用户视觉反馈，以实现交互功能。之后，将从选择、创建、更改 与 删除 四个方面对 DOM 的相关操作进行说明。

9.2.3　Document 对象

Document 对象是 DOM 树结构中的根节点。虽然这是一个根节点，在 HTML 文档中却不用书写其对应的标签。例如，虽然 <html> 标签与 <body> 标签分别对应 Document 对象中的 documentElement 属性与 body 属性，但却没有与Document 对象自身相对应的标签。这是因为 Document 对象是一种用于表示整个 HTML 文档的对象。

可以通过 JavaScript 中的 document 这一全局变量来访问 Document 对象。准确地说，document 是 window 对象中的一个属性。不过，由于 window 对象是一个全局对象，因此在对其属性进行访问时可以将 window. 省略不写。

实际上，在通过 JavaScript 表示 HTML 文档时，所有的全局变量都是 window 对象的属性。可以通过下面的代码对此进行确认。

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
 
<body>
    <script>
        var hzh = '黄子涵';
        alert(window.hzh === '黄子涵');
    </script>
</body>
 
</html>

image

顺便提一下，window 对象并没有包含于 DOM 树结构之中。如前面所讲，Document 对象在 DOM 树结构中是根节点，因此也无法通过下面将要介绍的方法来取得 Document 对象的父节点。

posted @   黄子涵  阅读(29)  评论(0)  编辑  收藏  举报
相关博文：
·  9.1 DOM的定义
·  第9章 DOM
·  17 JavaScript DOM
·  2024-1-2 DOM概念以及部分用法
·  js基础_56、DOM简介
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手