DOM介绍

最新推荐文章于 2024-07-23 09:22:07 发布
最新推荐文章于 2024-07-23 09:22:07 发布
阅读量2.6k 收藏 3
点赞数
分类专栏： javascript 文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45116146/article/details/120443623
版权
DOM是文档对象模型，提供JS操作网页接口。它将网页转换为节点树结构，包括Document、Element等7种节点类型。节点间存在父、子、同级关系，DOM提供了appendChild、insertBefore等方法进行节点操作。
摘要由CSDN通过智能技术生成

DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。

DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。

DOM可以理解成网页的编程接口。

1.节点

DOM最小的单位叫做节点。文档的树形结构（DOM树），就是各种不同类型的节点组成的。

节点类型有七种：Document、DocumentType、Element、Text、Comment、DocumentFragment。

常用节点

文档节点（Document）

整个HTML文档document对象作为window对象的属性存在，不用获取直接使用

元素节点（Element）

HTML文档中的标签

属性节点（Attribute）

标签里面的属性，非元素节点的子节点，而是元素节点的一部分。

文本节点（Text）

HTML文档中的文本内容

其他节点

DocumentType

doctype标签（如<!DOCTYPE html>）。

Comment

注释

DocumentFragment

文档的片段

节点数

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM。

除了根节点外，其他节点对于周围的节点都存在三种关系：

1.父节点关系（parentNode）：当前元素的那个上级节点

2.子节点关系（childNode）：当前元素的下级节点

3.同级节点（sibling）：用有同一个父节点的节点

DOM提供操作接口，其中，子节点接口包括firstChild（第一个节点）和lastChild（最后一个节点）等属性，同级节点接口包括nextSibling（紧挨着在后面的那个同级节点）和previousSilbling（紧邻在前面的那个同级节点）属性。

2.Node类型

nodeType

nodeType属性返回一个整数值，表示节点的类型，如下图

节点类型 值 对应常量
文档节点（document） 9 Node.DOCUMEN
最低0.47元/天 解锁文章
勤劳的小钟
关注
专栏目录
DOM 是什么？
liuhao9999的博客
03-22 7260
DOM代表文档对象模型，是 HTML 和 XML 文档的接口(API)。当浏览器第一次读取(解析)HTML文档时，它会创建一个大对象，一个基于 HTM L文档的非常大的对象，这就是DOM。它是一个从 HTML 文档中建模的树状结构。DOM 用于交互和修改DOM结构或特定元素或节点。 假设我们有这样的 HTML 结构： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-...
DOM文档对象模型
Start_t的博客
03-10 523
DOM文档对象模型DOM：文档对象模型DOM选择器2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息3.navigator对象4.window.onscroll／onresize ／onload()事件 DOM：文档对象模型 作用: 使javascript有能力操作HTML文档（获取HTML标记元素，添加HTML标记元素，删除HTML标记元素等） ...
DOM概述
最新发布
ChangUng的博客
07-23 990
这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。该对象包含用户（在浏览器窗口中）访问过的 URL。3. 在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。
DOM
李刚的学习专栏
11-01 3492
下述内容主要讲述了《JavaScript高级程序设计（第3版）》第10章关于“DOM”。 DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次变化的节点树，允许开发人员添加、移除和修改页面的某一部分。###一、节点层次 在HTML页面中，文档元素始终都是``元素。 1. Node类型JavaScript中的所有节点类型都继承自Node类型，因此所有节
DOM的作用
Mr_Jin的博客
11-15 651
通过JS操作DOM对象实现在HTML页面的操作。 通过 document 对象调用对应的方法 例如：getElementById("元素的id的属性的值")--返回1个元素 getElementsByName("元素的name属性的值")--返回多个元素(用数组) getElementsByClassName("元素的class属性的值")--返回多个元素(用数组) getElementsByTagName("元素的标签名的值")--返回...
dom简介
minjiayanm的博客
12-14 403
DOM基本功能： ① 查询某个元素 ② 查询某个元素的祖先、兄弟以及后代元素 ③ 获取、修改元素的属性 ④ 获取、修改元素的内容 ⑤ 创建、插入和删除元素 按照不同的类型来分，dom有不同的节点：文档节点、元素节点、属性节点、文本节点、注释节点，如图： HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。 通过 DOM，可以访问所有的 HTML ...
DOM介绍.pdf
12-16
DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式。以下是DOM中的重要概念和方法的详细说明： 1. Document对象：代表整个网页文档，是整个DOM树的根节点。通过这个对象，我们可以访问到文档中的各种元素和...
Vue3虚拟DOM介绍
weixin_47042983的博客
02-03 2290
本章将从零介绍Vue中的虚拟DOM，从渲染函数带到mount函数以及最后的patch函数也都有具体的代码实现。
JS中dom0级事件和dom2级事件的区别介绍
10-22
接下来，我们来介绍DOM2级事件。这种事件处理方式支持为同一个事件添加多个事件监听器，并且监听器之间的调用顺序可以通过优先级来控制。DOM2级事件引入了`addEventListener`和`removeEventListener`方法，允许...
jQuery对象和DOM对象之间相互转换的方法介绍
10-24
在Web开发中，经常需要在jQuery对象和DOM对象之间进行转换，以便可以利用各自对象的方法优势进行高效编程。jQuery对象是包装了DOM对象的类数组对象，它们之间的转换虽然看似简单，但在实际操作中却非常重要。 首先...
DOM理论知识
liu537192的专栏
08-01 722
DOM:Document Object Model(文档对象模型) 用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。 封装成对象的目的是为了更为方便的操作这些文档以及文档中的所有内容。 因为对象的出现就可以有属性和行为被调用。 文档对象模型 文档：标记型文档。 对象：封装了属性和行为的实例，可以被直接调用。 模型：所有标记型文档都具备一些共
DOM的简介（个人理解）
Fancy_vae的博客
08-23 808
1 定义 HTML DOM是HTML Document Object Model的缩写，称为文档对象模型。 HTML DOM 定义了一系列标准的对象，以及访问和处理 HTML 文档的标准方法，将网页中的每个元素都看作一个对象 。 通过 HTML DOM， JavaScript可访问HTML文档的所有元素和属性。 2 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象 通过使用 Document 对象，脚本可以对 HTML 页面中的所有元素进行访问 – document
浅谈DOM的概念和作用
dongdihui9603的博客
08-27 930
首先呢，DOM在JS中就是 Document Object Model的缩写，简称就是文档对象类型，它给文档提供了一种结构化的表示方式，可以改变文档的内容和呈现方式。不过我们要关心的是DOM如何把网页和脚本以及其他的编程语言联系起来。DOM是以家族的形式描述HTML。父子节点，兄弟节点。 DOM中的选择器： 一、元素节点选择器：（id,class,name,tagname,高级,关系...
dom简介：
xiaozhang___的博客
06-01 471
DOM:dom简介：&lt;!-- DOM:文档对象模型--&gt;&lt;!-- DOM简介：1.DOM是文档对象模型，由W3C组织提出的标准2.DOM是一种XML文档的解析标准3.DOM的原理是将XML/XHTML文档装入的内容，已节点的形式进行解析-文档节点树4.DOM还提供了相应的API，可以对节点进行增删查改5.利用DOM可以让javascript对网页的袁术进行控制，实现动态页面的效果...
javascript (十四) dom
weixin_30556959的博客
04-10 119
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM （文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。 HTML DOM 树 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScri...
Dom简介
weixin_58821991的博客
08-01 160
Dom简介
DOM简介
qq_51088023的博客
07-15 1189
​​​​​DOM全称Document Object Model（文档对象模型）
JAVA DOM解析XML详解及常用API介绍
以下是对DOM解析XML的详细介绍： 1. 解析器工厂类：`DocumentBuilderFactory` `DocumentBuilderFactory` 是用来创建解析器实例的工厂类。通过调用静态方法 `newInstance()` 可以获取到一个解析器工厂对象，这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值