DOM 介绍

最新推荐文章于 2025-02-05 10:11:23 发布
最新推荐文章于 2025-02-05 10:11:23 发布
阅读量8k 收藏 9
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mystonelxj/article/details/87204954

DOM概念

DOM全称 Document Object Model，即文档对象模型，DOM是针对XML但经过扩展用于HTML的应用程序编程接口（API Application Programming Interface）。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。DOM是万维网联盟（W3C The World Wide Web Consortium）组织推荐的处理可扩展标志语言的标准编程接口。

DOM由来

最初的互联网是基于HTML静态页面的，在不同的浏览器（Internet Explorer4.0和Netscape Navigator4.0）支持不同形式的页面的动态调用（DHTML），造成开发人员无法只编写一个页面用于多个浏览器。为促进浏览器之间的兼容，W3C规划推出了相关的DOM标准，

DOM作用

web页面最终是按照HTML标准进行展示的。DOM的提出就是提供一个与HTML标签交互的接口，供JavaScript 语言来使用，JavaScript可以通过DOM标准规定的各类属性、方法、事件来访问、创建HTML标签。

DOM版本

时间版本发布

2015/11/19

Document Object Model (DOM) Level 4 多媒体同步规范
2015/2/3服务发送事件规范
2008/12/22元素遍历规范
2004/4/7Document Object Model (DOM) Level 3 加载和保存规范
2004/4/7Document Object Model (DOM) Level 3 核心规范
2004/1/27Document Object Model (DOM) Level 3 验证规范
2003/1/9Document Object Model (DOM) Level 2 HTML 规范
2000/11/13Document Object Model (DOM) Level 2 核心规范
2000/11/13Document Object Model (DOM) Level 2 事件规范
2000/11/13Document Object Model (DOM) Level 2 样式规范
2000/11/13Document Object Model (DOM) Level 2 遍历和范围规范
2000/11/13Document Object Model (DOM) Level 2 视图规范
1998/10Document Object Model (DOM) Level 1核心规范
1998/10Document Object Model (DOM) Level 1 HTML 规范

   注：DOM0级只是DOM历史坐标中的一个参考点而已，具体说来，DOM0指的是Internet Explorer4.0和Netscape Navigator4.0最初支持的DHTML，而不是W3C推出的标准。

 

很啰嗦，再次总结 DOM
读心悦
05-17 1839
DOM（文档对象模型）是用于HTML和XML文档的编程接口，将文档解析为树状结构，允许动态访问和修改内容、结构和样式。DOM的核心特点包括树形结构、平台和语言无关性以及动态交互。节点类型包括元素节点、文本节点、属性节点、文档节点和注释节点。DOM树结构展示了节点之间的关系，如父节点、子节点、兄弟节点等。JavaScript中可以通过ID、标签名、类名或选择器访问DOM元素，并操作其内容、属性、样式，创建、修改或删除元素，以及处理事件。为优化性能，建议减少DOM操作、使用事件委托和缓存DOM引用。
什么是React的虚拟DOM（Virtual DOM）？它的作用是什么？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-21 1042
基本概念与作用虚拟DOM定义为什么需要虚拟DOM？React中的虚拟DOM实现创建虚拟DOM节点示例一：创建虚拟DOM节点更新虚拟DOM示例二：更新虚拟DOM虚拟DOM的优化技巧批量更新`shouldComponentUpdate`生命周期方法示例三：使用`shouldComponentUpdate``React.memo`和`PureComponent`示例四：使用`React.memo`结合实际经验拓展思考在前端开发领域，React框架因其高效和灵活性而备受推崇。
DOM简介
m0_71858636的博客
08-02 264
DOM简介
DOM介绍
qq_34318751的博客
09-27 356
1. 概念     DOM(文档对象模型)是针对HTML和XML的一个API（应用程序编程接口）。     1998年10月DOM1级规范成为W3C的推荐标准。     本章主要讨论与浏览器HTML页面相关的DOM1级特性和应用，以及JavaScript对DOM1级的实现。     注意：IE中的所有DOM对象都是以COM对象的形式实现的，所以很多DOM行为跟其他浏览器不一致 2.  节...
dom简介：
xiaozhang___的博客
06-01 525
DOM:dom简介：<!-- DOM:文档对象模型--><!-- DOM简介：1.DOM是文档对象模型，由W3C组织提出的标准2.DOM是一种XML文档的解析标准3.DOM的原理是将XML/XHTML文档装入的内容，已节点的形式进行解析-文档节点树4.DOM还提供了相应的API，可以对节点进行增删查改5.利用DOM可以让javascript对网页的袁术进行控制，实现动态页面的效果...
DOM的简介（个人理解）
Fancy_vae的博客
08-23 883
1 定义 HTML DOM是HTML Document Object Model的缩写，称为文档对象模型。 HTML DOM 定义了一系列标准的对象，以及访问和处理 HTML 文档的标准方法，将网页中的每个元素都看作一个对象 。 通过 HTML DOM， JavaScript可访问HTML文档的所有元素和属性。 2 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象 通过使用 Document 对象，脚本可以对 HTML 页面中的所有元素进行访问 – document
DOM介绍.pdf
12-16
DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式。以下是DOM中的重要概念和方法的详细说明： 1. Document对象：代表整个网页文档，是整个DOM树的根节点。通过这个对象，我们可以访问到文档中的各种元素和...
JS中dom0级事件和dom2级事件的区别介绍
10-22
接下来，我们来介绍DOM2级事件。这种事件处理方式支持为同一个事件添加多个事件监听器，并且监听器之间的调用顺序可以通过优先级来控制。DOM2级事件引入了`addEventListener`和`removeEventListener`方法，允许...
JavaScript之DOM介绍
不头冷，无程序
02-05 1348
DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它将文档解析为一个由节点和对象组成的结构，开发者可以通过JavaScript操作这些节点和对象，从而动态地改变文档的内容、结构和样式。DOM的核心思想是将文档视为一个树形结构，每个节点代表文档中的一个部分，如元素、属性、文本等。通过这种树形结构，开发者可以方便地遍历和操作文档的各个部分。DOM是Web开发中不可或缺的一部分，理解DOM的工作原理和操作方法对于前端开发者来说至关重要。
jQuery对象和DOM对象之间相互转换的方法介绍
10-24
在Web开发中，经常需要在jQuery对象和DOM对象之间进行转换，以便可以利用各自对象的方法优势进行高效编程。jQuery对象是包装了DOM对象的类数组对象，它们之间的转换虽然看似简单，但在实际操作中却非常重要。 首先...
DOM（一）——简介
maomaolaoshi的博客
09-19 719
最近快要去找实习了，准备复习一波DOM，同时整理一下资料，希望对大家也有帮助。DOM是什么？document object model又称为DOM，意思是文档模型。我们编写的HTML都是通过构造一颗树的层次结构（DOM Tree），然后通过呈现树（Render Tree）使之可视化的。 浏览器在加载HTML文档时，会先解析这一层次结构并创建一颗节点对象树，从而模拟这些标记文本的封装方式。
dom介绍
l_y_h___的博客
09-13 373
document:Document 对象是 Window 对象的一部分，Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 Element:Element 对象表示 HTML 元素。creatElement()：创建元素节点 textNode:文本。creatTextNode():创建文本节点 comment:注释。creatComment()：创建注释字节 属性 1.nodeType:表示节点类型 2.nodeName:返回节点名称 3.nodeValue:是
javascript基础：DOM1简介
gongwutianya的博客
07-02 1240
一、DOM介绍 DOM(Document Object Model)即文档对象模型 ，主要是用来操作整个网页页面上的文档的。 DOM 中的三个字母： D(文档)可以理解为整个 Web加载的网页文档; O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象; M(模型)可以理解为
DOM
weixin_30546189的博客
08-13 108
DOM document Object Model文档对象模型功能：用来控制页面中的内容。本质：将html文档中的所有内容封装成对象。<html> <head> <title>ceshi</title> </head> <body> <div>ceshi&...
DOM 简介
weixin_48376132的博客
07-05 9987
DOM 简介 1. DOM 概念 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。 它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。 DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。 总结：W3C 已经定义了一系列
请介绍一下DOM
最新发布
04-01
<think>好的，用户想了解DOM的基本概念和用法，我需要根据提供的引用资料来整理回答。首先，DOM的定义是什么？根据引用[1]，DOM是文档对象模型，通过JavaScript操作HTML元素和内容的结构。接下来要解释DOM的结构，引用[4]提到DOM是树状结构，根节点是html，包含head和body子节点。需要说明节点之间的关系，比如父节点、子节点和兄弟节点。 然后，操作方法部分，用户可能想知道如何选择元素、修改内容等。引用[3]提到getElementById()方法，可以举例说明如何获取元素。引用[2]中的textContent属性，可以用来展示如何获取或设置文本内容。此外，还需要补充其他常用方法，比如createElement、appendChild等，但要注意现有的引用是否提到这些。引用[1]提到了修改、添加、删除元素，可以结合这些点说明。 关于DOM的应用场景，引用[1]提到的功能可以作为例子，比如动态更新页面内容。还要确保回答结构清晰，分点解释基本概念、结构和操作方法。最后生成相关问题，可能需要包括DOM节点类型、与其他方法的区别、事件处理等。检查是否需要使用LaTeX格式，但用户问题中没有数学内容，可能不需要。但根据系统指令，所有行内数学表达式需要用$...$，这里可能用不上。最后确认引用标识是否正确添加，比如每个引用来源的末尾加上[^1]等。</think>### DOM 基本概念与用法 #### 1. DOM 的定义 DOM（文档对象模型）是表示网页结构和内容的树状接口，允许开发者通过 JavaScript 动态操作 HTML 元素、属性和内容。其核心是将 HTML 文档解析为节点对象，形成可编程的层次结构。 #### 2. DOM 结构 - **树状层级**：DOM 以 `<html>` 为根节点，包含 `<head>` 和 `<body>` 两个子节点[^4]。 - **节点关系**： - **父节点**（如 `<body>` 是 `<div>` 的父节点） - **子节点**（如 `<span>` 是 `<div>` 的子节点） - **兄弟节点**（同级元素，如两个相邻的 `<p>` 标签） #### 3. 常见 DOM 操作方法 ##### (1) 元素选择 - **通过 ID 选择**：`getElementById()` 返回唯一元素节点[^3]。 ```javascript var intro = document.getElementById("intro"); // 获取 id="intro" 的元素 ``` ##### (2) 内容操作 - **获取文本内容**：`textContent` 返回节点及其后代的纯文本[^2]。 ```javascript var divText = document.getElementById("d1").textContent; // 输出 "Hello JavaScript DOM" ``` - **修改 HTML 内容**：`innerHTML` 可读写包含标签的文本。 ```javascript document.getElementById("intro").innerHTML = "修改后的内容"; ``` ##### (3) 结构操作 - **创建元素**：`createElement()` 生成新节点。 - **添加子节点**：`appendChild()` 将节点插入父元素末尾。 ```javascript var newDiv = document.createElement("div"); document.body.appendChild(newDiv); ``` #### 4. 应用场景 - 动态更新页面内容（如实时显示数据） - 响应用户交互（如点击按钮修改样式） - 表单验证与数据处理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mystonelxj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值