dom的操作方法

dom的获取

  • document.getElementById(‘id’)
  • document.getElementsByClassName(‘class’)
  • document.getElementsByTagName(‘tag’)
  • document.getElementsByName(‘name属性’)
  • document.querySelect(‘选择器’)
  • document.querySelectAll(‘选择器’)

节点类型nodeType

标签:1 ,属性:2,文本:3

获取相邻的,或父子级的dom

  • 下一个元素 :nextSibling,nextElementSibling(不包含文本节点)
  • 上一个元素:previousSibling,previousElementSibling(不包含文本节点)
  • 父元素:parentNode
  • 子元素:childNodes,children(不包含文本节点)

增删改查

  • 创建元素:document.createElement('tag')
  • 添加dom元素:
    在父元素的最后添加document.body.append('tag')
    在父元素的中间插入document.body.insertBefore('要插入的标签','在谁之前')
  • 删除元素:
    在父元素中删除子元素:parent.removeChild(tag)
    直接删除元素本身:item.remove()
  • 克隆元素:tag.cloneNode(Boolean) 默认参数为false,不拷贝子节点
  • 获取自身属性:dom.style.prop
  • 设置自定义属性:dom.setAttribute("prop","value")
  • 获取自定义属性:dom.getAttribute("prop")
  • 获取页面最终显示样式:getComputedStyle(tag).prop

冒泡与捕获

  • 冒泡:事件由内向外传播
  • 捕获:事件由外向内传播

解决冒泡 event.stopPropagation() IEwindow.event,cancelBubble=true

浏览器默认事件

例:在form中按回车键就会提交表单;单击鼠标右键就会弹出context menu.

解决办法event.preventDefault(); IEwindow.event.returnValue = false;retrun false;

dom注册事件的几种方法

1、标签上直接绑定
<button onclick="aaa()">按钮<button>
2、获取dom,调取事件
document.getElement(id).onclick=function(){}
3、addEventListener绑定事件
dom.addEventListener('click',function(){},Boolean) 默认false(冒泡),true(捕获)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/511050.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云PolarDB开源数据库社区与 Tapdata 联合共建开放数据技术生态

简介&#xff1a;近日&#xff0c;阿里云PolarDB开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态。 近日&#xff0c;阿里云PolarDB开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态。在此之际&#xff0c;一直专注实时数据服务平台的 Tapdata &#xff0c…

要打造一款稳定顺滑、火遍全球的游戏?云将成为你的坚实后盾

简介&#xff1a;游戏上云&#xff0c;就选阿里云 从简单的棋牌游戏&#xff0c;到大型的角色扮演游戏&#xff0c;各式各样的游戏已经成为了互联网文娱产业的丰富内容生态。 游戏天然是一种线上内容消费&#xff0c;出海有着天然的优势&#xff0c;像《原神》等优质国产游戏…

阿里达摩院发布并开源“通义”大模型,AI底座之上促场景创新

2022 WAIC带上&#xff0c;达摩院发布并开源“通义”大模型&#xff0c;在国内率先构建了AI统一底座&#xff0c;在业界首次实现模态表示、任务表示、模型结构的统一。 9月2日&#xff0c;阿里巴巴达摩院主办世界人工智能大会“大规模预训练模型”主题论坛。会上&#xff0c;达…

EventBridge 与 FC 一站式深度集成解析

简介&#xff1a;本篇文章通过对 EventBridge 与 FC 一站式深度集成解析和集成场景的介绍&#xff0c;旨在帮助大家更好的了解面对丰富的事件时&#xff0c;如何使用 EventBridge 与 FC 的一站式集成方案&#xff0c;快速基于事件驱动&#xff08;EDA&#xff09;架构建云上业务…

“云上企业”是企业面向未来的战略选择

简介&#xff1a;随着越来越多的企业加入数字化转型的行列&#xff0c;每个企业都在期待着数字化能够为其带来二次增长。“云上企业”的规划与实施对于企业意味着技术升级、组织升级与战略升级的融合与叠加&#xff0c;对企业数字化转型的成功具有现实意义。 作者&#xff1a;…

react实现页面多个模块的切换

前言 这是做的一个多模块切换的一个案例&#xff0c;也是第一会这样大量的使用表单&#xff0c;大概有7&#xff0c;8个模块&#xff0c;这里用其中的一个模块来做展示 以下三张图片对应的就是三个模块了 这是第一个展示面这是第二个编辑页 这是呈现数据的页面 实现过程 …

使用 Serverless Devs 插件快速部署前端应用

简介&#xff1a; 近期函数计算和 serverless-devs/s 都更新了一系列的功能, 目前部署静态网站的步骤可以更为简洁了! 作者&#xff1a;邓超 Serverless Devs 开源贡献者 背景 我们在上文 [Aliyun] [FC] 如何使用 serverless-devs/s 部署静态网站到函数计算 中&#xff0c;…

基于 EventBridge 构建数据库应用集成

简介&#xff1a;本文重点介绍 EventBridge 的新特性&#xff1a;数据库 Sink 事件目标。 作者&#xff1a;赵海 引言 事件总线 EventBridge 是阿里云提供的一款无服务器事件总线服务&#xff0c;支持将阿里云服务、自定义应用、SaaS 应用以标准化、中心化的方式接入&#x…

如何合理使用 CPU 管理策略,提升容器性能?

简介&#xff1a;CPU Burst、拓扑感知调度是阿里云容器服务 ACK 提升应用性能的两大利器&#xff0c;它们解决了不同场景下的 CPU 资源管理&#xff0c;可以共同使用。点击下文&#xff0c;查看详情&#xff01; 作者&#xff1a;张佐玮&#xff08;佑祎&#xff09; 前言 在…

自己会用的一些网址

npm网址git网址谷歌插件查兼容的git教程廖雪峰vant官网vue3官网webpack官网iocnfont图标库猫云&#xff08;免费的前端开源项目&#xff09;javascript教程lodashreact官网智能PNG和JPEG压缩antd Ui插件chart 官网图标库css三角形产生器网易云Apinvm的安装教程

技术盘点:容器技术的演进路线是什么?未来有哪些想象空间?

简介&#xff1a;回顾2021年&#xff0c;云原生领域有哪些重要意义的事件&#xff1f; 回顾2021年&#xff0c;云原生领域有哪些重要意义的事件&#xff1f; 1. 基于容器的分布式云管理加速落地&#xff1a; 2021年5月阿里云峰会上&#xff0c;阿里云发布了一云多形态的部署…

技术盘点:2022年云原生架构趋势解读

简介&#xff1a;在云原生等技术的加持下&#xff0c;2022 年的架构领域有哪些值得关注的趋势&#xff1f;云原生如何撑起架构的未来&#xff1f; 作者&#xff1a;辛晓亮 采访嘉宾&#xff1a;至简、彦林 软件架构发展至今&#xff0c;经历了从单体架构、垂直架构、SOA 架构…

js组装知识(待续……)

object.assign() 这个方法回使源对象上的[[Get]]取得属性的值,然后使用目标对象上的[[Set]]设置属性的值 实际上对每个源对象执行的是浅复制,如果多个源对象都有相同的属性,则使用最后一个赋值的值 let obj1 {get a() {return aaa} } let obj2 {set a(val) {console.log(val)…

如何快速构建服务发现的高可用能力

简介&#xff1a;保障云上业务的永远在线&#xff0c;是 MSE 一直在追求的目标&#xff0c;本文通过面向失败设计的服务发现高可用能力的分享&#xff0c;以及 MSE 的服务治理能力快速构建起服务发现高可用能力的演示&#xff0c;模拟了线上不可预期的服务发现相关异常发生时的…

火山引擎发布新一代数智平台VeDI,以数据驱动企业数字化增长

数据是“新石油”&#xff0c;经过提炼加工才能创造价值。 9月2日&#xff0c;火山引擎数据智能科技峰会在杭州举办。会上&#xff0c;火山引擎发布新一代企业级数据产品——数智平台VeDI&#xff08;Volcengine Data Intelligence&#xff09;&#xff0c;包括数据引擎、数据…

阿里云服务网格 ASM 正式发布商业化版本

简介&#xff1a;为了更好地满足企业日益加深的大规模使用服务网格产品、服务多语言互通、服务精细治理等需求&#xff0c;2022 年 4 月 1 日起&#xff0c;阿里云服务网格产品 ASM 正式发布商业化版本&#xff0c;为企业在生产环境下大规模落地服务网格能力提供性能、安全、高…

组件通信之pubsub

pubsub 释&#xff1a;消息订阅与发布 点击进入gitee 消息订阅与发布机制 1,先订阅,在发布 2,使用于任意组件间通信 3,要在组件的componentWillUnmount中取消订阅 作用 使用于任意组件间通信 安装 yarn add pubsub-js 引入(每个组件使用时都需要) 使用es6引入&#xff1a…

Redis消息队列发展历程

简介&#xff1a;Redis是目前最受欢迎的kv类数据库&#xff0c;当然它的功能越来越多&#xff0c;早已不限定在kv场景&#xff0c;消息队列就是Redis中一个重要的功能。Redis从2010年发布1.0版本就具备一个消息队列的雏形&#xff0c;随着10多年的迭代&#xff0c;其消息队列的…

手机+卫星,到底有多难?

作者 | 小枣君来源 | 鲜枣课堂这几天&#xff0c;关于卫星手机的新闻又火了。根据媒体报道&#xff0c;9月6日即将发布的华为Mate 50系列手机&#xff0c;将具备“卫星通信能力”&#xff0c;在没有网络的地方&#xff0c;可通过卫星系统发送紧急短信。无独有偶&#xff0c;另有…