JavaScript DOM操作笔记记录回忆总结

一、什么是DOM?

       1、通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

       2、当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)

二、操作DOM

        1、在操作DOM之前,我们需要先获取到被操作的对象属性,然后再操作

              a、通过 id 找到 HTML 元素     document.getElementById()

              b、通过 类名 找到 HTML 元素     document.getElementClassName()

              c、通过  标签名 找到 HTML 元素     getElementsByTagName

              d、匹配指定 CSS 选择器的一个元素    document.querySelector()

              e、获取文档中某个元素的匹配列表   document.querySelectorAll()

        2、创建一个DOM

              例:页面上添加一个“你好”        

<div><h1>Hello, world!</h1>
</div>
<script>const title = document.createElement('h1');//添加一个h1标签title.textContent = '你好';//设置h1标签的文本内容document.querySelector('div').appendChild(title);//将h1标签添加到div标签中
</script>

        

        此时会发现该标签已经添加成功,原理就是先通过选择器找到div,然后再给div添加一个h1标签节点

        3、通过选择器修改某个元素的属性

              例:修改div标签的样式属性

<div class="box"></div><script>const box = document.querySelector('.box');//通过class类获取属性名为box的div元素的属性box.style.backgroundColor = 'blue';//修改box操作对象的backgroundColor属性box.style.width = '300px';//宽度属性</script><style>.box {width: 200px;height: 200px;background-color: red;}</style>

    运行之后在页面或者元素操作台可以看到:            

        4、通过选择器给元素添加方法

              例:给div添加一个点击事件

              

             在页面点击或者事件侦听器上看到click事件   

至此。

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

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

相关文章

DOM 创建节点、添加节点和删除节点

创建元素节点 document.createElement(‘标签名’) 创建文本节点document.createTextNode ( 内容 ) 根据传入的标签名创建出一个空的元素对象创建出来的默认不显示&#xff0c;要成为别人的子元素才能显示&#xff0c;所以要结合appendChild使用 添加节点&#xff08;后面&am…

【复现】蓝凌OA SQL注入漏洞_61

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 蓝凌智能OA是由深圳市蓝凌软件股份有限公司开发&#xff0c;是一款针对中小企业的移动化智能办公产品&#xff0c;融合了钉钉数字…

C习题002:澡堂洗澡【仅供参考】

问题 输入样例 在这里给出一组输入。例如&#xff1a; 2 5 1 3 3 2 3 3 输出样例 在这里给出相应的输出。例如&#xff1a; No代码长度限制 16 KB 时间限制 400 ms 内存限制 64 MB 栈限制 8192 KB 代码 #include<stdio.h> int main() {int N,W,s,t,p;int arr_s[…

递归算法题练习(数的计算、带备忘录的递归、计算函数值)

递归的介绍 概念:递归是指函数直接或间接调用自身的过程。 解释递归的两个关键要素: 基本情况(递归终止条件):递归函数中的一个条件&#xff0c;当满足该条件时&#xff0c;递归终止&#xff0c;避免无限递归。可以理解为直接解决极小规模问题的方法。递归表达式(递归调用):递…

网络安全攻防演练:企业蓝队建设指南

第一章 概述 背景 网络实战攻防演习是当前国家、重要机关、企业组织用来检验网络安全防御能力的重要手段之一,是对当下关键信息系统基础设施网络安全保护工作的重要组成部分。网络攻防实战演习通常是以实际运行的信息系统为攻击目标,通过在一定规则限定下的实战攻防对抗,最…

认识通讯协议——TCP/IP、UDP协议的区别,HTTP通讯协议的理解

目录 引出认识通讯协议1、TCP/IP协议&#xff0c;UDP协议的区别2、HTTP通讯协议的讲解 Redis冲冲冲——缓存三兄弟&#xff1a;缓存击穿、穿透、雪崩缓存击穿缓存穿透缓存雪崩 总结 引出 认识通讯协议——TCP/IP、UDP协议的区别&#xff0c;HTTP通讯协议的理解 认识通讯协议 …

第九届数学与人工智能国际会议 (ICMAI 2024)即将召开!

2024年第九届数学与人工智能国际会议将于2024年5月10-12日在中国北京召开。本届会议由北京工业大学主办&#xff0c;旨在促进应用逻辑、算法与复杂性研究&#xff0c;使用数学的方法促进人工智能理论与应用发展&#xff0c;加深学术交流与合作。我们热忱欢迎从事相关技术研究的…

开源WIFI继电器之使用说明

1、设备说明 1.1外观 1.2供电 100~240V交流输入&#xff0c;Lin接火线&#xff0c;Nin接零线。 1.3连接负载 输出信号为继电器无源信号&#xff0c;用于信号的导通和断开控制&#xff0c;最大可通过10A负载电流&#xff0c;COM为继电器公共端&#xff0c;NO为继电器常开端&a…

蓝牙耳机推荐高性价比,五大超好用蓝牙耳机推荐,赶紧上车!

​随着技术的不断进步&#xff0c;蓝牙耳机的性能和配置也在不断提升&#xff0c;各大品牌都在推出具有各种特色的产品。其中&#xff0c;音质是很多消费者最为关注的一点。因此&#xff0c;我在这里为大家推荐几款音质表现还不错的几款蓝牙耳机&#xff0c;供大家参考。 一、挑…

Java毕业设计 基于SSM SpringBoot vue购物比价网站

Java毕业设计 基于SSM SpringBoot vue购物比价网站 SSM vue 购物比价网站 功能介绍 首页 图片轮播 商品 商品分类 商品详情 评论 收藏 商品攻略 商品信息 公告栏 在线反馈 登录 注册 个人中心 我的收藏 后台管理 登录 注册商品户 个人中心 修改密码 个人信息 商品户管理 用户…

IDC 中搭建 Serverless 应用平台:通过 ACK One 和 Knative 玩转云资源

作者&#xff1a;元毅、庄宇 如何打造云上&#xff08;公共云&#xff09;、云下&#xff08;IDC 数据中心&#xff09;统一的云原生 Serverless 应用平台&#xff0c;首先我们来看一下 ChatGPT 4 会给出什么样的答案&#xff1a; 如何打造云上、云下统一的云原生 Serverless…

【CesiumJS-3】加载倾斜模型数据(3DTilest)以及修改位置

引入倾斜模型数据 // 加载3DTiles数据let tileset;try {tileset await Cesium.Cesium3DTileset.fromUrl("/api/3DTiles/b3dm_qx/tileset.json");viewer.value.scene.primitives.add(tileset); // 倾斜模型添加到场景中viewer.value.zoomTo(tileset); // 视角定位到倾…

【音视频处理】使用ffmpeg实现多个视频合成一个视频(按宫格视图)

先上结果 环境 硬件&#xff1a;通用PC 系统&#xff1a;Windows 测试有效 软件&#xff1a;ffmpeg 解决 0、命令 ffmpeg.exe -i input1.mp4 -i input2.mp4 -i input3.mp4 -i input4.mp4 -filter_complex "[0:v]scaleiw/2:ih/2,pad2*iw:2*ih[a]; [1:v]scaleiw/2:ih/2…

BioTech - 大分子药物设计 概述

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/136302202 大分子药物设计领域主要包括3个方面&#xff0c;即大环类药物设计、蛋白质与多肽类药物设计、核酸药物设计等&#xff0c;具体如下&…

DolphinScheduler——奇富科技的调度实践

目录 一、技术架构 二、业务挑战 2.1 调度任务量大 2.2 运维复杂 2.3 SLA要求高 三、调度优化实践 3.1 重复调度 3.2 漏调度 3.3 Worker服务卡死 3.4 任务重复运行 四、服务监控 4.1 方法耗时监控 4.2 任务调度链路监控 五、用户收益 原文大佬的这篇调度系统案例…

nginx使用详解--缓存

Nginx 是一个功能强大的 Web 服务器和反向代理服务器&#xff0c;它可以用于实现静态内容的缓存&#xff0c;缓存可以分为客户端缓存和服务端缓存。 客户端缓存 客户端缓存指的是浏览器缓存, 浏览器缓存是最快的缓存, 因为它直接从本地获取(但有可能需要发送一个协商缓存的请…

【XR806开发板试用】全网首发,对接腾讯云平台的血泪史

1.前面的话 在上次连夜肝出了华为云平台的帖子:https://aijishu.com/a/1060000000287434 之后,论坛里的反响平平,好评没有,点赞更无,抱着已完成任务成功白嫖一块板子的心态,把板子收在了盒子里,第二天,助手小姐姐跟我说为何不把腾讯云的做了,对于这个要求我其实是拒绝的,但是小…

Three.js-04轨道控制器

1.导入 说明&#xff1a;相机围绕目标进行轨道运动。也就是可以通过鼠标拖拽进行移动视角。 import { OrbitControls } from three/addons/controls/OrbitControls.js; 2.使用 说明&#xff1a;构造controls对象&#xff0c;再调用update方法&#xff1b;为了使效果更为明显…

十二、Qt自定义Widget组件、静态库与动态库

一、自定义Widget组件 1、自定义Widget组件 使用步骤采用提升法&#xff08;promotion&#xff09;重新定义paintEvent事件 2、实现程序 &#xff08;1&#xff09;创建项目&#xff0c;基于QWidget &#xff08;2&#xff09;添加类&#xff0c;为Widget组件提升类 #inclu…

Vue3 在SCSS中使用v-bind

template 先创建一个通用的页面结构 <template><div class"v-bubble-bg"></div> </template>js 在JS中先对需要用的数据进行定义&#xff1a; 可以是参数&#xff0c;也可以是data <script setup>const props defineProps({bgCol…