DOM结构（DOM树）

最新推荐文章于 2022-12-13 15:51:26 发布
最新推荐文章于 2022-12-13 15:51:26 发布
阅读量7.2k 收藏 45
点赞数 7
分类专栏： HTML Javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41993503/article/details/98340920
版权
前端 同时被 3 个专栏收录
22 篇文章 0 订阅
订阅专栏
Javascript
8 篇文章 0 订阅
订阅专栏
HTML
5 篇文章 0 订阅
订阅专栏

DOM

文档类型DOM（Document Object Model）主要用于HTML文档和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过节点的操作，来实现对文档内容进行增删改查。

1.DOM（Document Object Model）：文档对象模型

  • 文档：HTML文档
  • 文档对象：页面中的元素
  • 文档对象模型：对象被组织在一个树形结构中，用来表示文档中对象的标准模型就叫DOM，目的为了让程序（js）去操作元素

2.DOM树

（1）DOM分为两种：元素树和节点树

  • 元素树：把文档中所有的标签看成是一棵树
  • 节点树：把文档中所有的内容看成是一棵树

（2）常见的三种DOM节点

  • 元素节点，如<html>，<a>，<body>等都是元素节点，即标签
  • 文本节点，向用户展示的内容，如<title>...</title>中的“文档标题”
  • 属性节点，元素的属性，如<a>中的href属性
  • 通过document.getElementById和document.body获取的元素就是获取元素的节点

3.操作

（1）查找节点

（2）创建节点

（3）删除节点

（4）添加新的节点

（5）修改节点

、

4.浏览器的工作过程

（1）从网络或者本地拿到HTML源代码

（2）浏览器将HTML源代码中的每个标签都实例化对应的对象

（3）在内存中形成一个DOM树

（4）将DOM树形成一个可视页面

（5）JS直接修改DOM树改变页面视图

远方_ry
关注
  • 7
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解析XML中的树形结构与DOM文档对象模型
09-24
主要介绍了XML中的树形结构与DOM文档对象模型,文中举了JavaScript解析DOM对象的例子,需要的朋友可以参考下
【 HTML 及浏览器 】DOM 树
最新发布
weixin_42132860的博客
03-07 1007
DOM（Document Object Model）树，是一个以树形结构呈现的HTML文档模型。它将网页构造成一个由节点构成的层级系统，就像家族谱一样，每个家庭成员在树状图中占有一席之地。首先我们介绍了 DOM 是如何生成的，然后又基于 DOM 的生成过程分析了 JavaScript 是如何影响到 DOM 生成的。因为 CSS 和 JavaScript 都会影响到 DOM 的生成，所以我们又介绍了一些加速生成 DOM 的方案，理解了这些，能让你更加深刻地理解如何去优化首次页面渲染。
DOM结构
hellotoyou9的博客
07-23 1833
首先，什么是DOM？DOM是Document Object Model（文档对象模型）的缩写。DOM是中立与平台和语言的接口，它允许程序或脚本动态地访问更新文档的内容、样式以及结构。DOM包含核心DOM、XML DOM和HTML DOM，我们这里讨论HTML DOM，HTML DOM是关于如何获取、添加、修改和删除HTML元素的标准。 在HTML DOM中HTML文档中所有内容都被视为节点，DO
Dom树 CSS树 渲染树(render树) 规则、原理
weixin_45820444的博客
10-11 1万+
  前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？ 首先你要了解浏览器渲染的顺序：   1.构建dom 树   2.构建css 树   3.构建渲染树   4.节点布局   5.页面渲染 什么是dom 树？   浏览器将HTML解析成树形的数据结构，简称DOM。   DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树
DOM（一）概述、dom树、查找元素
商务合作 | 共同学习 | 携手共进
09-20 2万+
JavaScript DOM：DOM概述、查找元素4种方式、购物车案例。
什么是DOM树
jidanguanbing1的博客
03-08 4073
Dom document object model 文档对象模型 它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构 在介绍 DOM 树之前，首先要清楚，DOM 规范中，对于文档的表示方法并没有任何限制，因此，DOM 树只是多种文档结构中的一种较为普遍的实现方式。 DOM结构构成的基本要素主要为节点，而文档的结构就是由层次化的节点组成。 DOM模型中节点的概念很广泛，比如整个文档就是一个节点，称为文档节点。 除此之外，还有元素节点，属性节点，注释节点等。 了解了 DOM 的结
什么是DOM?你了解DOM树吗？
热门推荐
wei1273356078的博客
06-04 3万+
在找工作的过程中，看到了招聘信息上有写这么一条信息： 掌握WEB前端开发技术：JavaScript(含ES6)、HTML、CSS、DOM等 看见这条信息我心里安心了不少，都是一些基础问题，但是乍一看DOM，脑子有点短路了，上网查了下脑子清醒了。 什么DOM DOM（Document Object Model）即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。
HTML-DOM树篇
muzili_henji的博客
07-28 4325
一、什么是DOM DOM（Document Object Model） 文档对象模型，是HTML和XML文档的编程接口 DOM 以树结构表达 HTML 文档，树的每个分支的终点都是一个节点，每个节点都包含着对象 DOM 将web页面与脚本或编程语言链接起来，可以通过DOM提供的方法改变节点的结构、样式或者内容。 二、为什么要介绍DOM树？ DOM树是浏览器标记内部的表示，浏览器接收到网络数据后的第一步就是 处理HTML标记并构建DOM树。 三、DOM树的构建 DOM树是一种有限层次的..
dom树的结构.doc
12-05
DOM（文档对象模型）是XML和HTML文档的一种标准表示方式，它将文档解析为一个可操作的树形结构，使得程序可以便捷地访问和修改文档的内容、结构和...理解DOM树的结构和节点类型对于有效地处理和解析XML文档至关重要。
基于网页DOM树节点路径相似度的正文抽取
10-16
由于人工抽取网页信息效率低、成本高，因此根据对大量网页结构的观察，提出基于网页文档对象模型DOM树节点路径相似度的正文抽取方法。依据同网站下的网页结构相同的特点去除网页噪声得到网页的主题内容，然后结合...
使用递归和dom遍历dom树形结构
09-28
使用递归和dom遍历dom树形结构 完整代码
c++ html dom 树
05-24
自己写的.本人水平有限，性能还有待提高.半结构化标签处理的还有点问题，但不影响使用。
DOM深入学习 --- DOM 树介绍，如何遍历 DOM 树节点（一）
秋天，黄叶坠地，凉风有信。
03-09 3648
DOM 树 HTML 文档的主干是标签（tag）。 根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。 所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。 例如，document.body 是表示 <body> 标签的对象。 运行这段代码会使 <body> 保持 3 秒红色状态: document.body.style.background = 'red'; /
浏览器-DOM树
natsu-cc的博客
05-19 2874
前言：
DOM算法系列001-DOM基础
林中路
12-13 766
DOM，全称 ，即 【文档对象模型】，顾名思义，它是一种把【文档】抽象为计算机程序语言中的 【对象】类型结构的方法。这里的【文档】特指 【网页文档】。这里的【对象】指的是计算机程序语言中的一种数据结构，它具有成员属性和成员方法，属性是其自身性状的描述，比如【人】这个对象，就具有 【身高】、【年龄】、【性别】这样的属性， 方法是对象可以执行的动作，比如【人】这个对象，就有【走路】、【吃饭】、【睡觉】这样的方法。而对应于网页文档，将其抽象为对象后，它可能会有【宽度】、【高度】、【背景颜色】等属性，会有【滚动】、
前端学习笔记04-JavaScript
abc_123_cba_123的博客
02-24 367
前端学习笔记04-JavaScript一、引入方式 一、引入方式 JS 有3种书写位置，分别为行内、内嵌和外部。 1.行内式 JS < input type=“button” value=“点我试试” οnclick=“alert(‘Hello World’)” /> 优缺点： 1.可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick。 2.注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号。 3.可读性差， 在ht
复习———DOM树
lass_huahua的博客
08-15 330
今天复习的DOM树的主要内容如下： 1.什么是DOM？ 2.DOM树 3.查找元素 一、什么是DOM呢？ DOM是document object model（文档对象模型）的简称，它是专门用来操作网页内容的一套函数和对象，也是由W3C制定的一个标准。 二、什么是DOM树 DOM树，集中保存一个网页中所有内容的树形结构，有明显的父子，兄弟关系。 怎样形成？ 当浏览器读取...
画 HTML的DOM树
05-25
例如，下面是一个简单的HTML文档的DOM树结构： ``` 标题 一级标题 段落 ``` 其中，html元素是DOM树的根节点，它有两个子元素head和body，head元素下面有一个子元素title，body元素下面有两个子元素h1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值