DOM树的理解【面试常问】

最新推荐文章于 2024-03-07 08:45:00 发布
最新推荐文章于 2024-03-07 08:45:00 发布
阅读量1.8k 收藏 7
点赞数
分类专栏： 面试常问 文章标签： 面试 前端 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42961150/article/details/120133198
版权

前言

  • vue和react框架被广泛应用，封装了DOM操作
  • 但是DOM操作一直都是前端工程师的基础、必备知识
  • 只会vue而不懂DOM操作的程序员，不会长久

DOM

全称为文档对象模型（Document Object Model）。有这几个概念：

  • 文档、元素、节点
  • 整个文档是一个文档节点
  • 每个标签是一个元素节点
  • 包含在元素中的文本是文本节点
  • 元素上的属性是属性节点
  • 文档中的注释是注释节点

DOM树

DOM树是一种结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可识别的树模型，有了树模型，就有了层级结构，层级结构是指的是元素和元素之间的关系父子、兄弟。

更加形象的图解

<html>
	<head>
		<meta charset="utf-8">
		<title>标题</title>
	</head>
	<body>
		<h1>我的标题</h1>
		<a href="">我的链接</a>
	</body>
</html>

image

上网的虫不叫网虫
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript之DOM树
憧憬是碎了满地凉凉的宝石
07-03 1696
一、什么是DOM树？ DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 DOM树是结构，所谓层级结构是指元素和元素之间的关系：父子，兄弟。 文档：DOM中的"D" 如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了。它把你编写的网页文档转换成为一个文档对象。 对象：DOM中的"O" 对象（object）是一种非常重要的数据类型。对象是自包含的数据集合，包含在对
DOM树的理解[图]
09-14
DOM树的理解[图],很好理解,呵呵,分享了!
深度解析虚拟DOM树（VUE、React、Angular）
weixin_54165147的博客
07-26 837
虚拟DOM的一个示例是React框架中的使用。在React中，每个组件都有自己的虚拟DOM树，当组件的状态变化时，React会根据新的状态生成一个新的虚拟DOM树，并通过Diff算法计算出需要更新的部分，然后将这些更新应用到真实DOM上。虚拟DOM（Virtual DOM）是一种将真实DOM（Real DOM）的层次结构以JavaScript对象的形式表示的概念。Diff算法：当应用程序的状态发生变化时，会生成一个新的虚拟DOM树，然后通过比较新旧两棵虚拟DOM树的差异来计算出最小的更新量。
【 HTML 及浏览器 】DOM 树
最新发布
weixin_42132860的博客
03-07 906
DOM（Document Object Model）树，是一个以树形结构呈现的HTML文档模型。它将网页构造成一个由节点构成的层级系统，就像家族谱一样，每个家庭成员在树状图中占有一席之地。首先我们介绍了 DOM 是如何生成的，然后又基于 DOM 的生成过程分析了 JavaScript 是如何影响到 DOM 生成的。因为 CSS 和 JavaScript 都会影响到 DOM 的生成，所以我们又介绍了一些加速生成 DOM 的方案，理解了这些，能让你更加深刻地理解如何去优化首次页面渲染。
深入解析DOM树的加载
lq_1999的博客
11-21 1098
DOM树 在介绍 DOM 树之前，首先要清楚，DOM 规范中，对于文档的表示方法并没有任何限制，因此，DOM 树只是多种文档结构中的一种较为普遍的实现方式。 DOM 结构构成的基本要素是 “节点“，而文档的结构就是由层次化的节点组成。在 DOM 模型中，节点的概念很宽泛，整个文档 （Document） 就是一个节点，称为文档节点。除此之外还有元素（Element）节点、属性节点、Entity节点、注释（Comment）节点等。 了解了 DOM 的结构是由各种的子节点组成的，那么以 HT...
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 3953
Dom document object model 文档对象模型 它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构 在介绍 DOM 树之前，首先要清楚，DOM 规范中，对于文档的表示方法并没有任何限制，因此，DOM 树只是多种文档结构中的一种较为普遍的实现方式。 DOM结构构成的基本要素主要为节点，而文档的结构就是由层次化的节点组成。 DOM模型中节点的概念很广泛，比如整个文档就是一个节点，称为文档节点。 除此之外，还有元素节点，属性节点，注释节点等。 了解了 DOM 的结
DOM结构（DOM树）
侯阮悦的博客
08-03 7039
DOM 文档类型DOM（Document Object Model）主要用于HTML文档和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过节点的操作，来实现对文档内容进行增删改查。 1.DOM（Document Object Model）：文档对象模型 文档：HTML文档 文档对象：页面中的元素 文档对象模型：对象被组织在一个树形结构中，用来表示文档中对象的标准模型就叫DO...
什么是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 4099
一、什么是DOM DOM（Document Object Model） 文档对象模型，是HTML和XML文档的编程接口 DOM 以树结构表达 HTML 文档，树的每个分支的终点都是一个节点，每个节点都包含着对象 DOM 将web页面与脚本或编程语言链接起来，可以通过DOM提供的方法改变节点的结构、样式或者内容。 二、为什么要介绍DOM树？ DOM树是浏览器标记内部的表示，浏览器接收到网络数据后的第一步就是 处理HTML标记并构建DOM树。 三、DOM树的构建 DOM树是一种有限层次的..
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
10-18
主要介绍了JavaScript实现的DOM树遍历方法,结合实例形式详细分析了二叉DOM树、多叉DOM树的前序、中序与后序遍历,以及多叉树深度优先、广度优先等相关遍历操作实现技巧,需要的朋友可以参考下
javascript先序遍历DOM树的方法
10-22
主要介绍了5种javascript先序遍历DOM树的方法，感兴趣的小伙伴们可以参考一下
基于网页DOM树节点路径相似度的正文抽取
10-16
由于人工抽取网页信息效率低、成本高，因此根据对大量网页结构的观察，提出基于网页文档对象模型DOM树节点路径相似度的正文抽取方法。依据同网站下的网页结构相同的特点去除网页噪声得到网页的主题内容，然后结合...
DOM.rar_DOM_HTML dom_dom树解析
09-21
DOM文档解析说明，对处理树文件的朋友提供参考。
DOMParse()手动解析DOM树
qq_58062502的博客
08-30 898
使用DOMParser的parseFromString(fragment, mineType)方法需要传两个参数，第一个是DOM字符串，第二位用于确定方法返回的类型。这里给大家介绍一个浏览器API，我们都知道浏览器在渲染时，DOM文档会被解析生成DOM树，而此过程它就需要靠DOMParse这个API来完成。使用默认浏览器打开实践操作部分新建和编写的程序，就会发现程序已经在控制台获取，并打印了parseTagContent函数解析的DOM字符串的纯文本，效果如下图所示。是这样定义的，DOMParser。
DOM深入学习 --- DOM 树介绍，如何遍历 DOM 树节点（一）
秋天，黄叶坠地，凉风有信。
03-09 3609
DOM 树 HTML 文档的主干是标签（tag）。 根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。 所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。 例如，document.body 是表示 <body> 标签的对象。 运行这段代码会使 <body> 保持 3 秒红色状态: document.body.style.background = 'red'; /
DOM算法系列001-DOM基础
林中路
12-13 702
DOM，全称 ，即 【文档对象模型】，顾名思义，它是一种把【文档】抽象为计算机程序语言中的 【对象】类型结构的方法。这里的【文档】特指 【网页文档】。这里的【对象】指的是计算机程序语言中的一种数据结构，它具有成员属性和成员方法，属性是其自身性状的描述，比如【人】这个对象，就具有 【身高】、【年龄】、【性别】这样的属性， 方法是对象可以执行的动作，比如【人】这个对象，就有【走路】、【吃饭】、【睡觉】这样的方法。而对应于网页文档，将其抽象为对象后，它可能会有【宽度】、【高度】、【背景颜色】等属性，会有【滚动】、
vue面试常问问题及答案
04-05
以下是一些常见的Vue面试问题及其答案： 1. 什么是Vue.js？ Vue.js是一个用于构建用户界面的渐进式JavaScript框架。 2. Vue.js的主要特点是什么？ Vue.js的主要特点包括： - 双向数据绑定 - 组件化开发 - 虚拟DOM - 模板语法 - 生命周期 - 插件系统 3. Vue.js与React的区别是什么？ Vue.js与React的区别包括： - Vue.js有更简单的模板语法，React则使用JSX语法 - Vue.js有更好的文档和教程 - Vue.js的学习曲线更平滑 - Vue.js的性能比React更好 4. 什么是Vue.js的双向数据绑定？ 双向数据绑定是指当数据发生变化时，视图也会随之更新；反之，当视图发生变化时，数据也会随之更新。Vue.js使用v-model指令实现双向数据绑定。 5. 什么是Vue.js的组件化开发？ 组件化开发是指将页面拆分成多个组件进行开发，每个组件都有自己的状态和行为，可以独立地进行开发和测试。Vue.js使用组件化开发可以提高代码复用性和可维护性。 6. 什么是Vue.js的虚拟DOM？ 虚拟DOM是指在内存中创建一个虚拟的DOM树，当数据发生变化时，Vue.js会先通过diff算法计算出需要更新的部分，然后只更新这些部分，从而提高性能。 7. Vue.js的生命周期是什么？ Vue.js的生命周期包括： - beforeCreate - created - beforeMount - mounted - beforeUpdate - updated - beforeDestroy - destroyed 8. 什么是Vue.js的插件系统？ 插件系统是指可以通过编写插件来扩展Vue.js的功能。插件可以添加全局方法或者组件、混入等。Vue.js的插件系统使用Vue.use方法来安装插件。 以上是一些常见的Vue面试问题及其答案，希望能对您有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

上网的虫不叫网虫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值