DOM的一些操作

最新推荐文章于 2024-07-18 10:24:18 发布
最新推荐文章于 2024-07-18 10:24:18 发布
阅读量344 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GWS1234567890/article/details/122285703
版权

1.document.getElementById

2.document.body

2.1 JS中获取的元素都是对象数据类型的(有自己对应的堆内存,堆内存中存储着很多内置的属性和方法,这些属性和方法就是用来操作DOM元素的)

+ id

+ className

+ tagName

+ innerHTML

+ innerText

+ style = 对象 操作当前元素的"行内"样式

+ onclick

+ ......

3.context.getElementsByTagName

获取到的是一个"类数组"元素集合 HTMLCollection

操作起来和数组类似(基于索引获取某一项以及循环操作等)

详细案例:

https://mp.csdn.net/mp_blog/creation/editor/122267995icon-default.png?t=LBL2https://mp.csdn.net/mp_blog/creation/editor/122267995

https://mp.csdn.net/mp_blog/creation/editor/122268416icon-default.png?t=LBL2https://mp.csdn.net/mp_blog/creation/editor/122268416

18年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue中操作dom
imkaifan的博客
04-15 1566
在vue中操作dom，要在mounted中使用，因为只有在执行mounted的时候，vue已经渲染了dom节点，这个时候是可以获取dom节点的，vue中尽量不去操作dom元素，选用ref操作属性获取 首先设置ref=“xxx” 然后等所有的dom加载完毕之后，使用this.$ref.btn来进行操作 <button ref="btn">获取ref</button> this.$refs.btn.style.backgroundColor="#ff0000" ...
DOM的操作
Mr_115的博客
11-01 2537
DOM的操作
DOM操作
WYF857446152的博客
05-09 3624
DOM操作实现百度换肤的效果
JavaScript DOM操作
好好学习天天向上
03-27 5105
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
常见的DOM操作有哪些
热门推荐
IT修真院：初学者转行到互联网的聚集地
05-16 2万+
这里是修真院前端小课堂，本篇分析的主题是 【常见的DOM操作有哪些】 这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【常见的DOM操作有哪些】 1.背景介绍 什么是DOM？简单地说，DOM是一套对文档的内容进行抽象和概念化...
DOM（操作）
weixin_45789701的博客
11-19 2453
前端笔记4 JavaScript - DOM
DOM元素操作
m0_56232007的博客
06-10 1219
01 什么是DOM？ 1、 DOM：document object model 文档对象模型。 DOM是由节点组成的。 2、节点的类型： 元素节点：HTML标签 文本节点：标签中的文字（包含空格和换行。） 属性节点：标签的属性 3、DOM可以做什么？ （1）可以操作HTML元素（增删改查） 增：添加，在一个DOM节点下添加一个子节点，相当于动态新增了一个HTML标签。 删：删除。将一个节点从HTML中删除，相当于删除了该节点的所有内容以及它包含的子节点。 改：改变。改变DOM节点中的内容，包含HTML
DOM 基础操作
程序员柒的博客
08-01 3939
本文是博主的一些笔记跟想法，如果觉得本文有点东西请个博主点个关注，你的支持是我更新的动力，先赞后看养成习惯。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。官方语言文档一个页面就是一个文档，DOM中使用document表示。...
js 原生dom 操作
SK_study的博客
03-26 3309
js 原生操作dom的方法
js中Dom操作
weixin_52346897的博客
04-07 5029
简单的Dom获取 什么是Dom操作？ 1.DOM使一个"使程序"和"脚本"有能力的"动态地访问"和"更新文档内容结构"，以及"样式"的平台和语言中立的接口. 2.在HTML和JavaScript的学习中，DOM操作可谓时重中之重. Dom树 //html dom树 如图： DOM节点的分类： DOM节点分为三大类： 1.元素（标签）节点， 2.属性节点， 3.文本节点； 查找dom节点: 1.通过id获取 <div id="box"></div> <script&
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
易语言DOM操作
08-20
易语言DOM操作源码系统结构:易语言DOM操作源码,DOM操作 ======窗口程序集1 || ||------_按钮1_被单击 || ||------_超文本浏览框1_状态文本被改变 || ||------_按钮2_被单击 || ||------_按钮3_被单击 |
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
javascript dom 基本操作小结
10-29
JavaScript DOM 基本操作小结 在网上找到很多 DOM 操作的例子，感觉不全且凌乱。以下是 JavaScript DOM 基本操作小结，总结了 DOM 元素的创建、插入、替换和删除等基本操作。 DOM 元素的创建 在 JavaScript 中，...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 775
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 422
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 336
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
最新发布
weixin_44565776的博客
07-18 135
只要掌握了这些react技能，基本就可以熟练使用react了
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 973
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
深入解析DOM操作的鲜为人知技巧：javascript篇
本文将深入探讨你可能尚未充分了解的JavaScript操作DOM（Document Object Model）的细节知识点。...无论是处理用户输入、修改页面布局还是应用CSS样式，熟练掌握DOM操作都是Web开发中至关重要的技能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

18年

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

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

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

打赏作者

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

抵扣说明：

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

余额充值