HTML Dom对象

本是古典何须时尚 2023-01-03 15:29 184阅读 0赞

# 什么是 DOM？ #

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

> "W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

W3C DOM 标准被分为 3 个不同的部分：

*  核心 DOM - 针对任何结构化文档的标准模型
 *  XML DOM - 针对 XML 文档的标准模型
 *  HTML DOM - 针对 HTML 文档的标准模型

**注：**DOM 是 Document Object Model（文档对象模型）的缩写。

### 什么是 HTML DOM？ ###

HTML DOM 是：

*  HTML 的标准对象模型
 *  HTML 的标准编程接口
 *  W3C 标准

HTML DOM 定义了所有 HTML 元素的*对象*和*属性*，以及访问它们的*方法*。

*换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。*

# HTML DOM 节点 #

## HTML DOM 节点 ##

--------------------

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

--------------------

## DOM Nodes ##

## DOM 节点 ##

根据 [W3C][] 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

*  整个文档是一个文档节点
 *  每个 HTML 元素是元素节点
 *  HTML 元素内的文本是文本节点
 *  每个 HTML 属性是属性节点
 *  注释是注释节点

--------------------

## HTML DOM 节点树 ##

HTML DOM 将 HTML 文档视作树结构。这种结构被称为**节点树**：

## HTML DOM 树实例 ##

![DOM HTML tree][]

## 节点父、子和同胞 ##

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

*  在节点树中，顶端节点被称为根（root）
 *  每个节点都有父节点、除了根（它没有父节点）
 *  一个节点可拥有任意数量的子节点
 *  同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

![Node tree][]

HTML 片段：

从上面的 HTML片段可以看出：

*  <html> 节点没有父节点；它是根节点
 *  <head> 和 <body> 的父节点是 <html> 节点
 *  文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

*  <html> 节点拥有两个子节点：<head> 和 <body>
 *  <head> 节点拥有一个子节点：<title> 节点
 *  <h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点
 *  <head> 元素是 <html> 元素的首个子节点
 *  <body> 元素是 <html> 元素的最后一个子节点
 *  <h> 元素是 <divl> 元素的第一个子节点
 *  <p>元素是 <body>元素的最后一个子节点

--------------------

### 获取元素节点的方法： ###

1.getElementById

格式：node.getElementById("ID")

功能：从node节点开始，通过ID查找节点。

2.getElementsByTagName

通过标签名查找节点

格式：node.getElementsByTagName("标签名");

3.getElementsByClassName

通过类名去查找节点

格式：node.getElementsByClassName("类名");

4.getElementsByName()

通过name属性值去获取节点

最常用在 表单元素中。

--------------------------------------------------

低版本的IE不支持。

4.querySelector()

格式：node.querySelector(css选择器)

返回值：

如果找到选择器匹配的元素，则返回第一个元素。

如果没找到，则返回null

5.querySelectorAll()

格式：node.querySelector(css选择器)

返回值：

如果找到选择器匹配的元素，则返回全部。

如果没找到，则返回null

nodelist 伪数组 常规的数组方法对伪数组是无效的  length  【下标】

【注意】嵌套获取节点时，不要使用getElementById。

[W3C]: https://www.w3cschool.cn/xuexiw3c/
[DOM HTML tree]: /images/20221119/cdc3686052b44e0abc54fad0733e9164.png
[Node tree]: /images/20221119/c457c58f42474c198b0a43e006abc0e1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML Dom对象

什么是 DOM？ DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： > "W3C 文档对象模型（DOM）是中立于平

本是古典何须时尚/ 2023年01月03日 15:29/ 0 赞/ 185 阅读

相关 DOM对象，控制HTML元素

以下内容，摘自慕课网将HTML代码分解为DOM节点层次图: ![Center][] 节点属性在文档对象模型（DOM）中，每个节点都是一个对象。DOM节点有

灰太狼/ 2022年07月16日 10:22/ 0 赞/ 192 阅读

相关 DOM对象，控制HTML元素 (2)

1 节点属性在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性： 1. nodeName : 节点的名称 2. nodeValue

àì夳堔傛蜴生んèń/ 2022年06月11日 03:23/ 0 赞/ 216 阅读

相关 DOM对象，控制HTML元素

1 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树

野性酷女/ 2022年06月11日 02:50/ 0 赞/ 183 阅读

相关 javascript对象、DOM对象、Browser对象、HTML对象

在前端中的一些对象的描述： 1、JavaScript对象：8个对象 Number String Boolean Array Date Re

不念不忘少年蓝@/ 2022年05月21日 22:51/ 0 赞/ 294 阅读

相关 HTML-JavaScript操作DOM对象

操作DOM DOM：Document Object Model（文档对象模型） ![70][] 节点和节点关系 ![70 1][] 访问节点： 1. 使用ge

叁歲伎倆/ 2022年05月12日 07:48/ 0 赞/ 213 阅读

相关 HTML DOM Image 对象

目录 Image 对象 Image 对象的属性标准属性 Image 对象事件编码示例常用操作事件操作 -------------------- Im

「爱情、让人受尽委屈。」/ 2022年04月17日 06:24/ 0 赞/ 206 阅读

相关 HTML DOM FileUpload 对象

`FileUpload` 对象在 HTML 文档中 `<input type="file">` 标签每出现一次，一个 `FileUpload` 对象就会被创建。该元

ゝ一世哀愁。/ 2021年06月26日 16:06/ 0 赞/ 360 阅读

相关 HTML DOM Event 对象

`Event` 对象 `Event` 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件

痛定思痛。/ 2021年06月26日 16:06/ 0 赞/ 450 阅读

相关 JavaScript HTML DOM 对象

除了内置的 `JavaScript` 对象以外，你还可以使用 `JavaScript` 访问并处理所有的 HTML DOM 对象。更多 `JavaScript` 对象点

约定不等于承诺〃/ 2021年06月26日 16:06/ 0 赞/ 432 阅读