javascriptdom树

最新推荐文章于 2024-03-06 17:10:22 发布
最新推荐文章于 2024-03-06 17:10:22 发布
阅读量123 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HeartCSDN/article/details/103833884
版权

javascript dom树

什么是DOM
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom</title>
</head>
<body>
	<div class = 'box1'>
		<p>
			<i>今天武汉下雨了</i>
		</p>
		<a>今天天气不太好</a>
	</div>
</body>
</html>

dom结构图
解析过程
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
上图可知，在HTML当中，一切都是节点：（非常重要）

元素节点：HMTL标签。

文本节点：标签中的文字（比如标签之间的空格、换行）

属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。
DOM可以做什么
找对象（元素节点）
所有的Node(元素、属性、文本)对象 都是document的子代节点
节点又分为三大类
节点类型nodeType值都为number
节点名nodeName
节点值nodeValue
设置元素的属性值

       设置元素的样式

       动态创建和删除元素

       事件的触发响应：事件源、事件、事件的驱动程序
       
       节点之间的关系
       ![dom](https://img-blog.c元素节点sdnimg.cn/20200104163040538.jpg)
Colorful? ?
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript之DOM树
憧憬是碎了满地凉凉的宝石
07-03 1732
一、什么是DOM树？ DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 DOM树是结构，所谓层级结构是指元素和元素之间的关系：父子，兄弟。 文档：DOM中的"D" 如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了。它把你编写的网页文档转换成为一个文档对象。 对象：DOM中的"O" 对象（object）是一种非常重要的数据类型。对象是自包含的数据集合，包含在对
javascript多叉树实现
winjo的博客
11-19 3502
多叉树可以实现复杂的数据结构的存储，通过遍历方法可以方便高效的查找数据，提高查找的效率，同时方便管理节点数据。javascript的DOM其实就是以多叉树的形式存储的。下面用javascript来实现多叉树的数据结构
DOM（一）概述、dom树、查找元素
商务合作 | 共同学习 | 携手共进
09-20 2万+
JavaScript DOM：DOM概述、查找元素4种方式、购物车案例。
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树
jidanguanbing1的博客
03-08 4086
Dom document object model 文档对象模型 它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构 在介绍 DOM 树之前，首先要清楚，DOM 规范中，对于文档的表示方法并没有任何限制，因此，DOM 树只是多种文档结构中的一种较为普遍的实现方式。 DOM结构构成的基本要素主要为节点，而文档的结构就是由层次化的节点组成。 DOM模型中节点的概念很广泛，比如整个文档就是一个节点，称为文档节点。 除此之外，还有元素节点，属性节点，注释节点等。 了解了 DOM 的结
DOM结构（DOM树）
侯阮悦的博客
08-03 7299
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标签或标签内的文本项。
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
10-18
主要介绍了JavaScript实现的DOM树遍历方法,结合实例形式详细分析了二叉DOM树、多叉DOM树的前序、中序与后序遍历,以及多叉树深度优先、广度优先等相关遍历操作实现技巧,需要的朋友可以参考下
JavascriptDom
02-21
- DOM树由多个节点构成，包括元素节点（如`<div>`）、属性节点（如`class`属性）、文本节点（页面中的纯文本）等。 - JavaScript可以通过DOM API访问和修改文档内容，实现动态更新、事件处理等功能。 2. **获取...
javascript先序遍历DOM树的方法
10-22
主要介绍了5种javascript先序遍历DOM树的方法，感兴趣的小伙伴们可以参考一下
javascript DOM笔记 1
08-08
然后，你可以使用`appendChild`、`insertBefore`或`insertAfter`方法将这个新元素添加到DOM树中。`appendChild`会将指定的节点添加到当前节点的末尾，而`insertBefore`则允许你在特定的现有子节点之前插入新节点。`...
HTML-DOM树篇
muzili_henji的博客
07-28 4438
一、什么是DOM DOM（Document Object Model） 文档对象模型，是HTML和XML文档的编程接口 DOM 以树结构表达 HTML 文档，树的每个分支的终点都是一个节点，每个节点都包含着对象 DOM 将web页面与脚本或编程语言链接起来，可以通过DOM提供的方法改变节点的结构、样式或者内容。 二、为什么要介绍DOM树？ DOM树是浏览器标记内部的表示，浏览器接收到网络数据后的第一步就是 处理HTML标记并构建DOM树。 三、DOM树的构建 DOM树是一种有限层次的..
DOM深入学习 --- DOM 树介绍，如何遍历 DOM 树节点（一）
秋天，黄叶坠地，凉风有信。
03-09 3673
DOM 树 HTML 文档的主干是标签（tag）。 根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。 所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。 例如，document.body 是表示 <body> 标签的对象。 运行这段代码会使 <body> 保持 3 秒红色状态: document.body.style.background = 'red'; /
js--DOM树简介
sinat_34896766的博客
03-06 551
DOM树将HTML文档以树状结构直管段表现出来，也称为节点树。
DOM算法系列001-DOM基础
林中路
12-13 780
DOM，全称 ，即 【文档对象模型】，顾名思义，它是一种把【文档】抽象为计算机程序语言中的 【对象】类型结构的方法。这里的【文档】特指 【网页文档】。这里的【对象】指的是计算机程序语言中的一种数据结构，它具有成员属性和成员方法，属性是其自身性状的描述，比如【人】这个对象，就具有 【身高】、【年龄】、【性别】这样的属性， 方法是对象可以执行的动作，比如【人】这个对象，就有【走路】、【吃饭】、【睡觉】这样的方法。而对应于网页文档，将其抽象为对象后，它可能会有【宽度】、【高度】、【背景颜色】等属性，会有【滚动】、
浏览器-DOM树
natsu-cc的博客
05-19 2886
前言：
复习———DOM树
lass_huahua的博客
08-15 377
今天复习的DOM树的主要内容如下： 1.什么是DOM？ 2.DOM树 3.查找元素 一、什么是DOM呢？ DOM是document object model（文档对象模型）的简称，它是专门用来操作网页内容的一套函数和对象，也是由W3C制定的一个标准。 二、什么是DOM树 DOM树，集中保存一个网页中所有内容的树形结构，有明显的父子，兄弟关系。 怎样形成？ 当浏览器读取...
Deep Coral源码（深度相关性学习）
最新发布
07-25
Deep Coral（深度相关性学习）迁移学习网络资源 Deep Coral是一种先进的迁移学习技术，专注于通过学习源域和目标域之间的相关性来提高模型的泛化能力。这种方法在处理不同数据分布的问题时表现出色，尤其是在无监督领域自适应的场景中。 Deep Coral网络核心特点： 相关性学习 - Deep Coral通过学习源域和目标域特征之间的相关性，减少领域差异，提高模型的泛化能力。 无监督学习 - 该方法无需目标域的标签信息，即可实现有效的领域自适应，适合标签稀缺的场景。 灵活性 - 该网络结构灵活，可以适用于多种不同的迁移学习场景，包括但不限于图像分类、语义分割等。
JavaScript DOM 高级编程指南
1. **DOM基础**：理解DOM模型，包括节点类型（元素节点、文本节点、属性节点等）、节点关系（父节点、子节点、兄弟节点）以及如何遍历DOM树。 2. **选择和访问元素**：使用`getElementById`、`getElementsByTagname...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值