前端【7】javascript-dom操作

已于 2025-11-06 11:08:00 修改
阅读量1.2k 收藏 13
点赞数 7
CC 4.0 BY-SA版权
分类专栏： # 前端 文章标签： 前端 javascript 开发语言
于 2025-01-21 19:49:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_73704268/article/details/145270714

目录

DOM 加载与脚本执行的时序问题

1. 将 <script> 标签放到 HTML 末尾

2.使用 defer 属性 

3. 使用 window.onload 

一、获取元素

1、getElementById

2、getElementsByClassName

3、getElementsByTagName

4、querySelector和querySelectorALL

5、对象的属性关系查找

二、修改元素

1、修改内容

2、修改属性

3、修改样式

三、添加元素

四、删除元素

DOM（文档对象模型）操作全称document object model,是指在浏览器中通过 JavaScript 动态修改、添加、删除和获取 HTML 元素的内容和结构。DOM 是浏览器对网页的内部表示，它把网页的每个元素视为一个对象，可以通过 JavaScript 访问和操作这些对象。这样就能在js里面用编程的方式对html里面的元素做处理了

DOM 加载与脚本执行的时序问题

        当 HTML 中需要操作的标签在 <script> 标签后面，导致 JavaScript 无法找到尚未生成的 DOM 元素时，可以通过以下三种方式解决问题：【否则会显示null】

了解本专栏 订阅专栏 解锁全文 超级会员免费看
＜前端路由原理＞react-router-dom入门级教程
Coding and studying
07-06 4189
1. 什么是路由？2. 路由分类前端路由依靠的是浏览器的BOM对象中的history，也就是浏览器的历史记录（history）。但我们一般不直接操作BOM身上的history，而是借助history.js去操作BOM。history模式的路由： hash模式的路由：（地址栏中带有 # 号） 浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。重要是事情说三遍。每当执行push操作时，都是将path推入栈顶，浏览
jquery--DOM操作
m0_74194490的博客
07-05 1546
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
React 之 react-router-dom
subsistent的博客
08-19 9242
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。
JavaScript-DOM-属性节点
十二的博客
04-27 2209
JavaScript-DOM-属性节点
JavaScript-DOM 学习（含案例源码）
weixin_45515107的博客
05-05 2224
1、DOM概念 文档对象模型（Document Object Model,简称DOM）,是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DPM接口，通过这些DOM接口可以改变网页的内容、结构和样式 1.1、DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 注意：DOM把
Javascript学习- DOM获取&属性操作
Java硬件工程师的博客
05-12 3871
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。
前端知识之--DOM
狂风的博客
12-04 9041
前端知识之--DOM1.什么是DOMHTML DOM 节点2.编程接口3. 查找元素4.HTML DOM 属性innerHTML 属性（获取）innerHTML 属性（替换）nodeName 属性childNodes 属性nodeValue 属性nodeType 属性5.操作文本内容1. 获取标签中间文本内容: innerText：2. 获取标签中间内容: innerHTML创建新的 HTML 元...
Vue 2.0中使用watermark-dom 添加水印
分享前端工程化、动效魔法与性能之舞！
12-10 7135
Watermark-dom是一个可以给网页添水印、移除水印的插件，并可以对水印的样式进行许多丰富的设置。 以下是在Vue中使用该插件的方式： <template> <!-- App.vue 文件--> <div id="app"> <router-view /> </div> </template> <script> // 安装文件,如果安装报错，可以用cnpm // npm
JavaScript 之 DOM 操作（一）
m0_73759720的博客
08-11 2472
本文主要讲了获取标签的方法、设置标签的样式、设置文本、标签操作及事件的一些操作。
前端javascript的DOM对象操作技巧，全场景解析
景天科技苑
03-09 3275
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。
前端开源库-html-dom-parser
08-30
7. **与其他库的集成**: html-dom-parser可以与其他前端库，如jQuery、React、Vue等无缝集成，提供更强大的HTML操作能力。例如，在React中，可以使用这个库解析HTML字符串，然后将得到的DOM节点插入到虚拟DOM中。 8...
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
此外，"JavaScript DOM编程艺术"可能还会涉及高级话题，如事件委托、动画效果、AJAX（异步JavaScript和XML）以及现代前端框架如何与DOM交互等内容。事件委托利用事件冒泡或捕获机制，只在父元素上设置一个监听器，...
JavaScript-DOM实战案例
09-18
通过这个实战案例，你不仅能够深入理解JavaScript与DOM的交互，还能掌握实际项目中常见的前端技巧，提升你的网页动态效果实现能力。无论是简单的页面交互还是复杂的动态应用，JavaScript DOM都是不可或缺的技能。
Javascript-dom-manipulation
05-01
在这个"Javascript-dom-manipulation"主题中，我们将深入探讨如何使用JavaScript有效地进行DOM操作。 1. **获取DOM元素** - `getElementById`: 通过ID查找唯一元素。 - `getElementsByClassName`: 获取指定类名的...
前端开源库-can-use-dom
08-30
`can-use-dom`是一个小巧而实用的前端开源库，它专门用于检测运行环境是否支持DOM操作，这对于跨平台的Web应用或者在非浏览器环境（如Node.js服务器端渲染）中进行前端开发至关重要。 首先，我们需要理解为什么在...
MySQLGraphQLAPI
2509_93945719的博客
11-22 314
另外，权限控制也得注意，GraphQL默认不限制查询，如果公开暴露，可能被恶意请求拖垮服务器。首先，你得安装必要的包，比如、，还有MySQL的连接器，比如。还有，如果数据库表结构复杂，有联表查询，GraphQL的schema也得相应设计成嵌套类型，resolver里用JOIN语句处理。这里，类型对应MySQL表的字段，定义了可用的查询操作，比如获取所有用户或根据ID查单个用户。注意，GraphQL的字段名可以用camelCase风格，和MySQL的snake_case不一样，这点在映射时要处理好。
Rust高性能Web后端服务开发与Actix-Web实战分享：零成本抽象、高并发处理与内存安全实践
最新发布
2501_94181083的博客
11-23 592
数据序列化使用bincode替代 JSON：节省 30% CPU对热点代码进行#[inline]展开Netty 式 Reactor 模型减少线程调度开销批量 DB 提交减少 IO 压力缓存热点业务路径到 Redis最终整个平台达成：单机 QPS：18 万P99 延迟 < 30msCPU 占用在可控范围内资源释放完全可预期，无内存泄漏风险高性能，无 GC 停顿编译期保证内存安全，避免线上事故Actix-Web 性能强劲，适合高并发系统适合对性能和稳定性要求极高的互联网生产环境。
父组件向子组件传递对象类型参数时，在子组件中修改对象的方法
SSHLY3的博客
11-20 310
Vue组件间对象参数传递规范 摘要：Vue中父组件向子组件传递对象参数时，禁止直接修改子组件Props（违反单向数据流）。推荐两种解决方案： 需同步父组件时：子组件通过defineEmits触发自定义事件，父组件监听事件并主动修改源数据； 仅子组件使用时：通过深拷贝创建对象副本进行本地修改。 对于表单场景，可使用v-model语法糖简化双向绑定。注意：嵌套对象修改需保持引用完整，深拷贝推荐JSON.parse(JSON.stringify)或lodash.clonedeep。始终遵循"子通知、父修
JavaScript课程
2509_93946088的博客
11-21 395
我记得我第一次做个简单的待办列表，用DOM添加任务项，再用事件处理删除功能，虽然代码写得丑，但成就感爆棚！JavaScript是单线程的，但通过回调函数、Promise和async/await，能处理异步任务，比如从服务器获取数据。对象呢，是键值对的集合，用来表示现实中的事物，比如一个用户对象，有名字、年龄等属性。学这些基础时，最好多写点小例子，比如用函数计算两个数的和，或者用对象模拟一个简单的购物车。学习资源方面，网上免费教程很多，但选个系统课程跟下来更好，比如一些实战项目驱动的课，能边学边做。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值