JavaScript—DOM理解

简介: DOMDocumentObjectModel文档对象模型。也就是JavaScript将HTML文档的各个组成部分封装为对象。

@[TOC]

什么是DOM

DOM:Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM的作用

作用:
JavaScript 通过 DOM, 就能够对 HTML进行操作了
改变 HTML 元素的内容
改变 HTML 元素的样式(CSS)
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM相关概念

DOM 是 W3C(万维网联盟)定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分:

  1. 核心 DOM:针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准

Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象

  1. XML DOM: 针对 XML 文档的标准模型
  2. HTML DOM: 针对 HTML 文档的标准模型

该标准是在核心 DOM 基础上,对 HTML 中的每个标签都封装成了不同的对象
例如: 标签在浏览器加载到内存中时会被封装成 Image 对象,同时该对象也是 Element 对象。
例如: 标签在浏览器加载到内存中时会被封装成 Button 对象,同时该对象也是
Element 对象。

相关文章
|
8天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
8 1
js之DOM 文档对象模型
|
9天前
|
XML JavaScript 前端开发
JavaScript中的DOM解析器DOMParser api的讲解
`DOMParser`能将XML或HTML源码字符串解析成DOM `Document`。通过`new DOMParser()`创建实例,使用`.parseFromString(string, type)`方法进行解析,其中`string`为待解析的字符串,`type`指定解析类型如`text/html`或`text/xml`等,返回一个`Document`对象。例如,可解析包含`<p>666</p>`的字符串并获取其文本内容`666`。
14 1
|
5天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
8天前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
16 0
|
2月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
1月前
|
JavaScript
js HTML字符串转DOM节点,DOM节点转HTML字符串
js HTML字符串转DOM节点,DOM节点转HTML字符串
23 2
|
2月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
26 1
|
2月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
29 2
|
1月前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
14 0
|
1月前
|
JavaScript 前端开发
JavaScript 遍历DOM
JavaScript 遍历DOM
20 0