JavaScript -- DOM树

最新推荐文章于 2022-03-03 11:25:41 发布
最新推荐文章于 2022-03-03 11:25:41 发布
阅读量123 收藏
点赞数
分类专栏： JavaScript 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46370867/article/details/109256361
版权

下面是对JavaScript中DOM树的整理，希望可以帮助到有需要的小伙伴。
明天可能会有更多的困难和挑战，加油，你可以的。

JavaScript – DOM树

想要了解DOM树，先要了解几个JavaScript中的几个概念：文档、元素、节点
整个文档是一个文档节点
每个标签是一个元素节点
包含在元素中的文本是文本节点
每一个属性是一个属性节点
每一个注释是一个注释节点
DOM的结构就是由各种子节点组成的，以HTML Document为根结点，其余节点为子节点，就组成了一棵DOM树。
下面是一棵基本的DOM树
在这里插入图片描述

JavaScript里面的DOM操作：
首先要选中树上的某一个元素，
然后对选中的元素进行操作

举例：
在这里插入图片描述

weixin_46370867
关注
专栏目录
JavaScript之DOM树
憧憬是碎了满地凉凉的宝石
07-03 1781
一、什么是DOM树？ DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 DOM树是结构，所谓层级结构是指元素和元素之间的关系：父子，兄弟。 文档：DOM中的"D" 如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了。它把你编写的网页文档转换成为一个文档对象。 对象：DOM中的"O" 对象（object）是一种非常重要的数据类型。对象是自包含的数据集合，包含在对
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
DOM是一个树形结构，表示了文档的结构，并提供了编程接口来操作这个结构。在"JavaScript DOM编程艺术"这本书中，作者深入探讨了如何利用JavaScript有效地操纵DOM以实现动态网页效果。 首先，DOM的核心是将HTML或XML...
js DOM树
weixin_44154094的博客
01-15 201
DOM树 DOM，全称Document Object Model文档对象模型。 节点:Node ——构成HTML文档最基本的单元。 常用节点分为四类 一文档节点:整个HTML文档 一元素节点:HTML文档中的HTML标签 一属性节点:元素的属性 一文本节点:HTML标签中的文本内容 1. getElementById() 一通过id属性获取一个元素节点对象 2. getElementsByTagName() -通过标签名获取一组元素节点对
JavaScript.04.DOM树
Champion_me的博客
03-03 593
JavaScript.04.DOM树
掌握js的Dom树
weixin_43348064的博客
05-06 676
一、Dom树 什么是Dom树 其实网页中所有HTML内容在内存中都是保存在一棵树形结构上的，内存中这棵保存一个网页中所有内容的树形结构，就称为DOM树。 当浏览器扫描到一个.html文件，在将.html内容显示到浏览器窗口中给人看之前，都会在内存中自动创建一棵DOM树来保存HTML内容中每项细节。生活上的一个棵树是有树根的，那Dom树也有数根的。 根节点对象 当浏览器窗口扫描到一个.html...
一个html页面的生命周期,JS的页面生命周期事件
weixin_29698641的博客
06-09 622
今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在load事件里进行移除, 但是对其他的事件有点模糊了, 复习一下哦垃圾生命周期事件DOMContentLoaded, 浏览器完成HTML的加载, 并构建DOM树, 图片和样式等外部资源还没加载完成load, 浏览器加载完所有资源, 包括HTML文档, 图片, 样式等beforeunload, 用户即将离开, ...
JavaScript--更新DOM
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-14 2741
1. 更新DOM 1.1 更新节点 拿到一个DOM节点后，我们可以对它进行更新。 可以直接修改节点的文本，方法有两种： 一种是修改 innerHTML 属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： 使用innerHTML设置文本 <body> <div id="item"></div> </body> <script> let item = documen
JavaScript--插入DOM
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-15 6381
1. 插入DOM 111
JavaScript-dom继承树
wust_cyl的博客
04-17 1153
DOM document object mobleDOM 定义了表示和修改文档所定义的方法。DOM对象即宿主对象，由浏览器厂家商定义，用来操作HTML和XML功能的集合。也有人称dom为html和xml的接口。友情提示：因为所学知识有限，部分内容没有说明（比如XML)，以后会补充说明。1 document  HTMLDocument  Document的关系看如下操作:情况很明显了。documen...
JavaScript-UI-and-DOM:JavaScript UI和DOM课程作业
05-18
JavaScript UI和DOM是Web开发中的核心部分，它们构成了前端交互的基础。JavaScript是一种强大的脚本语言，主要用于网页动态效果和用户界面的控制。DOM（Document Object Model）是HTML和XML文档的结构化表示，允许...
学习Javascript-HTML-DOM：学习Javascript HTML DOM elzero
02-11
3. **DOM操作**：掌握选取元素（如`document.getElementById`，`querySelector`，`getElementsByTagName`等）、遍历DOM树、创建和移除元素的方法。 4. **事件处理**：学习如何绑定事件监听器，响应用户的点击、滚动...
javascript-manipulation-of-the-dom-document-object-Model:Dom文档对象模型课程的Java语言操作
03-30
本课程主要关注JavaScript如何与DOM交互，特别是使用Java语言进行操作，虽然JavaScript和Java名字相似，但它们是两种不同的编程语言。在Web开发中，我们通常所说的JavaScript DOM操作是指用JavaScript处理DOM。 一...
Javascript--DOM.rar_javascript
09-24
DOM是一个标准，定义了如何表示和访问这些文档的结构化表示，将其作为一个可操作的对象树。本篇文章将深入探讨JavaScript操作DOM的各种技术和实践。 一、DOM的基本概念 DOM是一个树形结构，每个节点代表HTML或XML...
JavaScript隐藏元素的5种方法~纯干货分享
热门推荐
weixin_46370867的博客
11-29 1万+
Hello ~ 可爱的小伙伴我们又见面啦。 下面是我和大家分享的JS隐藏元素的5种方法，希望可以帮助到有需要的小伙伴。 让我们一起来看看吧 GO！ 第一种 <!DOCTYPE html> <html lang="en"> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8">
报错：Uncaught TypeError: 获取的元素节点.setAttribute is not a function
weixin_46370867的博客
12-07 8773
我们在写代码的时候可能会遇到类似的报错： Uncaught TypeError: div1.setAttribute is not a function 源代码是这样的： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
window.onload()方法和window.onscroll()方法
weixin_46370867的博客
11-17 6890
也许你想成为太阳，可你却只是一颗星辰；也许你想成为大树，可你却是一棵小草。于是，你有些自卑。其实，你和别人一样，也是一片风景：做不了太阳，就做星辰，在自己的星座发光发热；做不了大树，就做小草，以自己的绿色装点希望…… 下面是对window对象中 window.onload()方法和window.onscroll()方法的整理，希望可以帮助到有需要的小伙伴 JavaScript window对象 BOM中最核心的对象就是Window对象 window对象是浏览器窗口中的顶级(全局)对象 window对象的属性
JS小案例-文本切换效果
weixin_46370867的博客
11-25 1781
下面是一个文本切换效果的小案例，希望可以可以帮助到有需要的小伙伴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本切换效果</title> </head&gt
DOM判断节点类型分分钟搞定
weixin_46370867的博客
11-29 1587
小编和你一起解锁DOM判断节点类型的秘密 Let’s GO ! ! ! Node对象中的nodeName获取指定节点的节点名称 Node对象中的nodeType获取指定节点的节点类型 nodeType 属性返回以数字值返回指定节点的节点类型 如果节点是元素节点，则 nodeType 属性将返回 1 如果节点是属性节点，则 nodeType 属性将返回 2 如果节点是文本节点，则 nodeType 属性将返回 3 Node对象中的nodeValue获取指定节点的值 在DOM树结构中，文本节点是元
DOM介绍~超好理解的哦
weixin_46370867的博客
12-04 1576
下面是对DOM的介绍，希望可以帮助到有需要的小伙伴，跟小编来看看吧~ 文章目录什么是DOMDOM的组成DOM解析过程：DOM树（一切都是节点）DOM的用处 什么是DOM DOM是文档对象模型，DOM把html文档结构化，定义了一个规范用来通过JS来操作html元素。 DOM的组成 DOM是由节点组成的。 DOM解析过程： html加载完毕后，浏览器会把html文档结构化生成一个DOM树 获取DOM的元素节点 操作该元素（改变该元素的属性或给该元素添加事件） DOM树（一切都是节点） 在HTML中，一切
JavaScript事件驱动与DOM解析
"本文档主要介绍了JavaScript中的事件驱动编程模型，以及与之相关的文档对象模型（DOM）和window对象的概念。事件驱动是JavaScript编程的重要特性，允许程序在用户交互或其他事件发生时执行特定代码。同时，DOM是...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值