JavaScript中Dom操作

最新推荐文章于 2024-08-16 19:02:09 发布
最新推荐文章于 2024-08-16 19:02:09 发布
阅读量48 收藏
点赞数
文章标签： javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74056313/article/details/128568856
版权
这篇文章详细介绍了如何使用DOMAPI进行HTML元素的操作，包括创建元素、添加和删除子元素、修改属性和内容，以及查询和定位元素。还涵盖了H5新增的方法和元素的样式、位置及尺寸获取，同时讨论了JavaScript中与事件相关的属性和方法。
摘要由CSDN通过智能技术生成
DOM元素的创建，增删改查和属性操作

创建：document.wirte、innerHTML、createElement

增加 ：appendChild insertBefore

删除 ：removeChild

修改

修改元素的属性：src、href、title等

修改普通元素内容：innerHTML、innerText

修改表单元素：value、type、disabled、checked等

修改元素样式：style、className

查询

DOM提供的API方法：getElementById、getElementsByTagName,

getElementByName,getElementByClassName

H5新增的方法：querySelector、querySelectorAll

document.body可以直接获取body

利用节点操作获取元素：

父 parentNode子 children 、

兄 弟 nextElementSibling\previousElementSibling

属性操作

setAttribute：设置dom的属性值

getAttribute：得到dom的属性值

removeAttribute移除属性

获取js元素的各种宽高

offset系列 经常用于获得元素位置 offsetLeft offsetTop

client经常用于获取元素大小 clientWidth clientHeight

scroll 经常用于获取滚动距离 scrollTop scrollLeft

javascript改变样式 （document.styleSheets）

事件对象属性方法

Dom鼠标事件

常先森的编程日常
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript DOM操作
好好学习天天向上
03-27 5137
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
js中的简单DOM操作
wdtn5656的博客
10-21 3285
js中的简单DOM操作&操作元素样式&操作元素的属性&操作元素的类名& 操作元素的内容&节点&获取可视窗口的尺寸&获取元素偏移值的方式&获取元素尺寸
JavaScript中DOM操作
10-12 3883
目录 DOM介绍 获取元素 操作元素 节点操作 DOM介绍 JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM，前面的文章已经讲过ECMAScrit了、这里是ECMAScript的链接：https://blog.csdn.net/HeZhiYing_/article/details/102218018 今天来将一下DO...
【JavaScript 】DOM操作快速入门
Joker_ZJN的博客
10-30 2307
相信我，十分钟，快速入门JavaScript dom操作。
JavaScript DOM—节点操作
Jin_Xiang123的博客
01-04 1458
文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。
JavaScript中DOM的操作方法
qq_57606640的博客
10-31 3341
1、获取元素 document.getElementById（） document.getElementsByClassName（）[0] document.getElementsByName（）[0] document.getElementsByTagName（）[0] document.querySelector（） document.querySelectorAll（）[0] 2、获取内容 alert(a.innerHTML);获取代码和内容，但只显示内容。 alert(a.in
JavaScript之DOM
qq_43751200的博客
06-05 1768
DOM
Javascript中的DOM操作事件
m0_56457325的博客
04-11 863
概念： DOM是指文档对象模型，是HTML和XML文档的编辑接口 HTMLDOM定义了访问和操作HTML文档的标准方法。 DOM以树结构表达HTML文档 Javascript分三个部分： ECMAScript标准：JS的基本的语法 DOM：documentobjectmodel文档对象模型操作页面的元素 BOM：BrowserobjectModel浏览器对象模型操作的是浏览器 DOM：文档对象模型 文档：把一个html文件看成是一个文档，由于万物皆对象...
JavaScript：DOM对象
盒马的博客
12-23 1303
讲解JavaScript中的DOM对象，并介绍其获取，修改方式
微信小程序骨架屏
最新发布
djjdjdjdjddjjdjd的博客
08-16 223
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 233
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【无标题】
weixin_42348009的博客
08-14 158
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 963
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 174
【代码】playwright链接本地浏览器，实现自动登录。
Vue中的路由与多种守卫常见问题及解决方案
zhaochen1127的博客
08-12 1121
Vue Router中的路由守卫主要分为三种类型：全局守卫、路由独享守卫和组件内守卫。全局守卫：作用于整个应用，包括beforeEach和afterEach。路由独享守卫：在路由配置中直接定义，只有进入该路由时才会触发，如。组件内守卫：定义在组件内部，包括和。路由守卫是Vue Router中一个强大的功能，能够帮助开发者在路由跳转前后执行重要的逻辑判断。然而，不当的使用和配置可能会引发一系列问题，如无限循环、守卫逻辑错误、守卫未正确触发以及异步处理不当等。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1036
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
高级java每日一道面试题-2024年8月12日-网络篇-说一下JSONP的实现原理?
qq_43071699的博客
08-12 613
JSONP是一种非官方的跨域数据交换协议，它允许在网页中通过标签的src属性从其他域名（网站）安全地获取数据。由于浏览器的同源策略限制，直接通过Ajax等方式跨域请求数据通常是不被允许的，而JSONP则巧妙地绕过了这一限制。
ECMAScript6中的模块：export导出、import导入
pan_junbiao的博客
08-12 881
早期的 JavaScript 程序很小，通常被用来执行独立的脚本任务，在 Web 页面中需要的地方提供一定的交互。随着 Web 应用程序变得越来越复杂，有必要考虑提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制，这就是模块化编程。模块化编程就是将一个复杂的程序根据一定的规则封装成一个或多个文件，并组合在一起。使用这种方式，可以将代码分解到多个文件中，每个文件都称为一个模块。一个模块通常是一个类或者多个函数组成的方法库。
uni-app 安卓禁用侧滑返回/虚拟返回(vue3 hook)
行如逆水行舟，不进则退
08-12 184
[TOC](uni-app 安卓禁用侧滑返回/虚拟返回(vue3 hook))
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值