DOM介绍

原创 于 2022-11-17 21:12:08 发布 · 127 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

本文介绍了文档对象模型（DOM）的基本概念及其在处理可扩展标记语言中的作用，并详细解释了DOM树的结构，包括文档、节点和标签节点等关键组成部分。

一、什么是DOM

        文档对象模型(DOM),是W3C组织推荐的处理可扩展标记的语言的标准程序接口。

二、DOM树

        

 DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

  • 文档：一个页面就是一个文档，DOM中使用document表示

  • 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示

  • 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

什么是React的虚拟DOM（Virtual DOM）？它的作用是什么？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-21 1156
基本概念与作用虚拟DOM定义为什么需要虚拟DOM？React中的虚拟DOM实现创建虚拟DOM节点示例一：创建虚拟DOM节点更新虚拟DOM示例二：更新虚拟DOM虚拟DOM的优化技巧批量更新`shouldComponentUpdate`生命周期方法示例三：使用`shouldComponentUpdate``React.memo`和`PureComponent`示例四：使用`React.memo`结合实际经验拓展思考在前端开发领域，React框架因其高效和灵活性而备受推崇。
dom实例
meconsea留痕
01-18 1985
Dom解析xml可以分为三步：       1、创建DocumentBuilderFactory 。DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();DocumentBuilderFactory用来创建DocumentBuilder对象。       2、创建DocumentBuilder。   
DOM
wushen的博客
01-09 1082
文章目录Document Object ModelDOM树查找元素元素树按HTML特征查找:按HTML特征查找 & 按选择器查找 查找时的优化总结：查找元素 Document Object Model 什么是: 专门操作网页内容的一套对象和函数的标准 为什么: ES标准仅仅定义了js语言的语法规则(怎么写对怎么写错！)，但是没有提供操作网页内容的任何函数和对象 何时: 只要操作网页内容...
dom介绍
l_y_h___的博客
09-13 392
document:Document 对象是 Window 对象的一部分，Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 Element:Element 对象表示 HTML 元素。creatElement()：创建元素节点 textNode:文本。creatTextNode():创建文本节点 comment:注释。creatComment()：创建注释字节 属性 1.nodeType:表示节点类型 2.nodeName:返回节点名称 3.nodeValue:是
DOM的介绍
ahhhhhhlzc的博客
10-26 354
JS中节点的操作
DOM简介
qq_44039897的博客
03-08 339
2.1.1 DOM简介 1、DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。 2、DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点，DOM中使用node表示 2.1.2 获取元素 1、根据ID获取：使用getElementById()方法可以获取带有ID的元素对象 <div id="time">2022-3-5</div>
DOM介绍.pdf
12-16
DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式。以下是DOM中的重要概念和方法的详细说明： 1. Document对象：代表整个网页文档，是整个DOM树的根节点。通过这个对象，我们可以访问到文档中的各种元素和...
JS中dom0级事件和dom2级事件的区别介绍
10-22
接下来，我们来介绍DOM2级事件。这种事件处理方式支持为同一个事件添加多个事件监听器，并且监听器之间的调用顺序可以通过优先级来控制。DOM2级事件引入了`addEventListener`和`removeEventListener`方法，允许...
jQuery对象和DOM对象之间相互转换的方法介绍
10-24
在Web开发中，经常需要在jQuery对象和DOM对象之间进行转换，以便可以利用各自对象的方法优势进行高效编程。jQuery对象是包装了DOM对象的类数组对象，它们之间的转换虽然看似简单，但在实际操作中却非常重要。 首先...
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
09-28
由于SVG是html的元素，所以支持普通的DOM操作，又由于SVG本质上是xml文档，所以也有一种特殊的DOM操作，大多称之为SVG DOM,本文将详细介绍下SVG中的DOM操作，感兴趣的朋友可不要错过哦
文档树生成方法
夏2同学的博客
07-12 2810
简介 文档树，是用来描述文档目录结构的工具，常见于Github的项目布局中。 例如下图是Github著名项目mall-admin-web的文档树 那么有没有什么便捷的方式生成文档树呢，答案是肯定的。 甚至有的操作系统自带生成文档树的工具，例如window。 实战 使用tree /f > list.txt 生成文档树 补充 对于Mac OS或者Linux系统，可以通过以下命令安装tree这个生成插件，打开终端并输入：（没有安装brew请先输入brew install） brew install tr
DOM（文档对象模型）
mengfanshaoxia的博客
02-15 2890
1、DOM是什么 DOM（Document Object Model，文档对象模型），是用来呈现以及与任意 HTML 或 XML文档 交互的API（Application Program Interface，应用程序接口）。DOM 是载入到浏览器中的文档 模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或 注释等等）。 DOM 是万维网上使用最为广泛的 API 之一，它允许运行在浏览器中的代码访问文件中的节点并 与之交互。节点可以被创建，移动或修改
DOM与Jquery方法对照表（versions：Itcast）
angpengze8512的博客
01-03 135
DOM 用途说明 Jquery document.createElement(TagName) 创建元素 $("TagName") parentElement.appendChild(Element) 附加子节点 $parentElement.Append() $Element.AppendTo(parentElem...
【JS】文档树部分知识
changyme的博客
08-24 352
DOM树简介 根据DOM，每个HTML标签都是一个对象，嵌套的标签是闭合标签的子标签，标签内的文本也是一个对象。标签被称为元素节点，元素内的文本形成文本节点， 特殊之处： DOM中表格永远有 注释也会成为DOM的一部分 与控制台的交互，详情查看: https://zh.javascript.info/dom-nodes 遍历DOM 对DOM的所有操作都是以document对象开始，它是DOM的主入口点，从它可访问任何结点。 最顶层： <html>=document.documentEle
html文档树的概念
weixin_30294709的博客
06-16 393
html即超文本标记语言，超文本：指页面内可以包含图片、链接、甚至音乐、程序等非文字元素；标记语言：标记（标签）构成的语言 静态网页：返回不需要操作的文本（小说） 标签分类：闭合标签、自闭和标签（meta） 转载于:https://www.cnblogs.com/jintian/p/11034595.html...
HTML文档结构与文档树
Cherish1ove的博客
09-23 5482
HTML文档结构HTML文档树 HTML文档实际上类似一个XML文档，完整的HTML文档包含根元素&lt;html&gt;，然后在&lt;html&gt;中包含&lt;head&gt;,&lt;body&gt;等元素，下面是一个典型的HTML文档。 &lt;html&gt;&lt;head&gt;&lt;title&gt;The Dormouse's story&lt;/title&a
文档树——节点内容
qq_46273905的博客
04-11 436
文档树——节点内容 本文此次分享运用BeautifulSoup获取节点内容。 一、获取直接子节点 import requests#爬虫库 from bs4 import BeautifulSoup#解析库 headers={'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like...
♥️Javascript之DOM♥️
欢迎
09-10 2332
目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM T...
js的dom介绍下
最新发布
11-18
JavaScript中的DOM（Document Object Model）即文档对象模型，是用于操作HTML和XML文档的编程接口。 ### DOM版本 浏览器的DOM目前经历了以下版本： - DOM1：制定了最基本的节点操作，包括增删改查，主要定义了HTML和XML文档的底层结构[^1]。 - DOM2和DOM3：对DOM1进行扩展，增加了更多的交互操作和错误检测机制，方便开发人员与HTML和XML的交互[^1]。 ### DOM与文档的关系 HTML文档和DOM树是一一对应的，当DOM树被改变时，与之对应的HTML文档也会随之改变。当需要对HTML中的内容进行动态改变时，可以使用DOM进行操作。DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件。树上的每一个节点都是一个DOM对象，树的顶层为document对象，表示整个文档[^2]。 ### XML DOM与HTML DOM的关系 XML DOM定义了访问和处理XML文档的标准方法。由于HTML文档格式符合XML语法标准，所以可以使用XML DOM API。在XML DOM中，每个元素都会被解析为一个节点Node，而常用的节点类型又分为元素节点Element、属性节点Attr、文本节点Text、文档节点Document[^3]。 ### DOM操作示例 #### 查询操作 可以使用`getElementsByNamse(name属性值)`根据name属性值获取元素对象们，返回数组[^5]。 #### 元素创建与添加 以下是创建一个`<option>`元素并添加到`<select>`元素中的示例代码： ```javascript // 创建一个option元素 var option = document.createElement("option"); option.innerText = "广西"; // 获取select元素 var select = document.getElementById("s"); // 将option元素添加到select元素中 select.appendChild(option); ``` #### 样式操作 可以用DOM操作获取到元素对象之后，使用JS对元素的样式（大小、颜色、位置等）进行操作。常用方式有： - 通过`element.style`开始对`style`（样式）的内容进行操作。 - 通过`element.className`对类名进行样式操作[^4]。 #### 删除操作 可以使用`remove`方法来删除元素。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值