JavaScript-DOM

DOM

全称:DOM(Document Object Model--文档对象类型) 

作用:用来操控网页类容的功能,开发网页特效和实现用户交互

DOM 结构

将HTML文档以树形结构表现出来称之为DOM树

获取DOM 

语法:document.querySelector('css选择器')

参数:包含一个或多个css选择器字符串

返回值:CSS选择器匹配的第一个元素,一个HTMLElement对象

  <div class="box">1</div><div>2</div><script>const box= document.querySelector('div');console.log(box);</script>

如果没有指明获取的是第几个div,那么默认为第一个 

 

修改DOM元素内容

想要修改DOM元素里面的内容,可以用以下两种元素属性来修改:

  • 对象名.innerText
  • 对象名.innerHTML 

元素innerText属性 

    作用:

  • 将文本内容增添/更新到标签的位置
  • 显示文本内容,并不解析标签
<div>1</div>
<div>2</div><script>const box= document.querySelector('div');console.log(box.innerText);</script>

显示第一个标签div的文本内容

更新标签文本的内容 

<body>
<div>1</div>
<div>2</div><script>const box= document.querySelector('div');console.log(box.innerText);box.innerText='first';console.log(box.innerText);</script>
</body>

 元素innerHTML属性

    作用:

  • 将文本内容增添/更新到标签的位置
  • 显示文本内容,会解析标签

将元素innerText和元素innerHTML做对比 

<body>
<div class="a">1</div>
<div class="b"></div><script>const box= document.querySelector('.a');const box1= document.querySelector('.b');box.innerText='<strong>first</strong>';box1.innerHTML='<strong>first</strong>';</script>
</body>

我们发现innerText只会显示将标签显示为文本内容,而innerHTML会解析标签 

修改DOM元素属性

我们可以同js来修改标签元素属性

常见的属性:href,title,src等

语法:对象名.属性=值 

​<body>
<img src="" alt=""><script>const img=document.querySelector('img');img.src='./img/durant.jpg'</script>
</body>​

修改元素样式属性

可以通过js来修改标签元素的样式属性

比如修改标签div的宽和高,更换背景颜色

 通过style修改样式

语法:对象名.style.属性名='值' 

<body>
<div></div><script>const box=document.querySelector('div');box.style.width='200px';box.style.height='200px';box.style.backgroundColor='black';box.style.border='2px solid red '</script>
</body>

通过类名(className)修改样式

如果修改的样式较多,可以用类名来修改

由于关键字是class,所以用className

语法:对象名.className='类名'

用className赋值时会用新值覆盖之前的值

<body>
<div class="b"></div><script>const box=document.querySelector('.b');box.className='box1';</script>
</body>

标签div的类名被修改为了box1 

 

通过classList来修改样式

由于className会覆盖掉原先的类名,所以HTML5新增了一个classList来增删类名

   语法:

  • 对象名.classList.add('类名')          ----增加一个类名
  •  对象名.classList.remove('类名')              ---删除一个类名
  • 对象名.classList.toggle('类名')                 ---切换一个类名,有就删除,没有就加上

追加一个类名,使这个元素拥有这个类名同样的效果 

  <style>div{width: 200px;height: 200px;}.red{background-color: red;}</style>
</head>
<body>
<div ></div><script>const box=document.querySelector('div');box.classList.add('red');</script>
</body>

标签div拥有两个类名 

操作表单元素属性

获取表单值:DOM对象.属性名

设置表单值:   DOM对象.属性名=值

将表单的文本类型转换为密码类型,将隐藏其内容 

<body>
<input type="text" value="durant"><script>const word=document.querySelector('input')word.type='password';</script>
</body>

 

表单中用布尔值表示了增删属性

true表示添加了该属性

false表示移除了该属性 

如:disabled , checked ,selected

<body>
<input type="checkbox"><script>const check=document.querySelector('input')check.checked=true;</script>
</body>

当checked为true时,就表示勾选,为false就取消勾选 

按钮的属性disabled,默认状态是不禁用为'false'

<body>
<button>按钮</button><script>const btn=document.querySelector('button')btn.disabled='true';</script>
</body>

按钮禁用之后变灰且按钮不能按 

自定义属性

标签有自带的属性,也有自定义属性

一个标签可以设置多个自定义属性

语法:<data-自定义属性名="值">

获取值的语法:对象名.dataset.自定义属性名

<body><div data-numbers="1" data-id="one">1</div><script>const num=document.querySelector('div');console.log(num.dataset.id);console.log(num.dataset);</script>
</body>

全部获取可以直接写对象名.dataset 

 

 

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

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

相关文章

AIGC实践|用AI制作视频短片创作全流程

前言&#xff1a; 在深入探讨了AI在动态有声绘本和小游戏开发的应用之后&#xff0c;本次我们将聚焦于视频创作领域。本篇文章将详细展示如何使用AI工具从概念构思到画面生成再到最终成片的全过程&#xff0c;涵盖剧本创作、分镜头设计、视觉效果生成及音乐配制等各个阶段。让…

B+索引的分裂及选择率和索引基数

1、B树索引的分裂 B树索引页的分裂并不总是从页的中间记录开始&#xff0c;这样可能会导致页空间的浪费。 例子 比如下面这个记录&#xff1a; 1、2、3、4、5、6、7、8、9 由于插入是以自增的顺序进行的&#xff0c;若这时插入第10条记录然后进行页的分裂操作&#xff0c;那…

鹧鸪云光伏业务管理系统,助力企业数智化发展

在当今数字化浪潮席卷全球的背景下&#xff0c;光伏行业作为绿色能源的重要组成部分&#xff0c;其业务管理的数智化转型显得尤为重要。鹧鸪云光伏业务管理系统&#xff0c;以其强大的功能和卓越的性能&#xff0c;正成为企业实现数智化转型的重要助力。 作为光伏行业的领军软…

Spring Boot:Java 应用开发高效之道

Spring Boot 是一种革命性的框架&#xff0c;旨在简化 Java 应用的创建和部署过程。通过自动化配置和简化项目搭建流程&#xff0c;Spring Boot 大大加速了开发周期&#xff0c;让 Java 应用开发变得更加高效和便捷。 核心优势&#xff1a; 快速启动和简化配置&#xff1a;Spr…

redis 笔记2之哨兵

文章目录 一、哨兵1.1 简介1.2 实操1.2.1 sentinel.conf1.2.2 问题1.2.3 哨兵执行流程和选举原理1.2.4 使用建议 一、哨兵 1.1 简介 上篇说了复制&#xff0c;有个缺点就是主机宕机之后&#xff0c;从机只会原地待命&#xff0c;并不能升级为主机&#xff0c;这就不能保证对外…

【python】docker-selenium 分布式selenium模拟浏览器 |可视化 或 后台运行selenium 部署与使用

一、分布式selenium 1、部署 docker-selenium Github官方地址如下&#xff1a; https://github.com/SeleniumHQ/docker-selenium?tabreadme-ov-file 执行安装指令&#xff1a; 1、这里可以将dashboard映射接口改为 14444&#xff08;记得开放安全组&#xff09; docker run …

macOS Sequoia 将 Mac 生产力与智能化提升至全新高度 (macOS 15 ISO、IPSW、PKG 下载)

macOS Sequoia 将 Mac 生产力与智能化提升至全新高度 (macOS 15 ISO、IPSW、PKG 下载) iPhone 镜像、Safari 浏览器重大更新、备受瞩目的游戏和 Apple Intelligence 等众多全新功能令 Mac 使用体验再升级 请访问原文链接&#xff1a;https://sysin.org/blog/macOS-Sequoia/&a…

细说ARM MCU的串口发送数据的实现过程

目录 1、条件及工程配置 2、实现串口发送的库函数 3、修改whlie(1)中的代码 4、修改回调函数 5、下载运行 前面的文章介绍了用串口的接收中断来接收数据&#xff0c;本文介绍通过串口从MCU向外发送数据。 1、条件及工程配置 文章依赖的硬件及工程配置同本文作者的其他文…

【Unity】Inspector排版扩展学习初探

一、简单的Unity Inspector扩展 [SerializeField] [SerializeField] 作用&#xff1a;让private属性也可以显示在面板上 [Range(x , y)] [Range(x , y)] 作用&#xff1a; 让参数从输入框变为范围滑条 [Header(" 标题 ")] [Header(" 标题 ")]作用&am…

如何选择合适的 AWS 区域对网站性能和成本?

选择合适的 AWS 区域对网站性能和成本都有很大影响,我们结合九河云的分析来总结一些主要考虑因素: 1. 地理位置和用户分布 最好选择靠近目标用户的区域,可以减少网络延迟,提高响应速度。如果用户分散在世界各地,可以考虑使用 AWS 的全球加速器或内容分发网络(CDN)服务。 2. …

docker 容器 network host 模式启动

docker 默认启动容器 network 是 bridge 模式&#xff0c;需使用 -p 映射端口实现容器与宿主机网络通信&#xff0c;较安全&#xff1b; 当使用 network host 模式&#xff0c;直接走宿主机网络通信&#xff0c;较不安全。 下面来一个 docker 容器 network host 模式启动 的 实…

SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?

一、简介 跨域资源共享&#xff08;CORS, Cross-Origin Resource Sharing&#xff09;是一个W3C规范&#xff0c;它定义了一种浏览器和服务器交互的方式来确定是否允许跨源请求。当一个资源&#xff08;如HTML页面、JavaScript文件、图片等&#xff09;从一个源&#xff08;ori…

GPT-4o更容易越狱?北航南洋理工上万次测试给出详细分析

卡奥斯智能交互引擎是卡奥斯基于海尔近40年工业生产经验积累和卡奥斯7年工业互联网平台建设的最佳实践&#xff0c;基于大语言模型和RAG技术&#xff0c;集合海量工业领域生态资源方优质产品和知识服务&#xff0c;旨在通过智能搜索、连续交互&#xff0c;实时生成个性化的内容…

CentOS7下快速升级至OpenSSH9.7p2安全版本

一、CentOS7服务器上编译生成OpenSSH9.3p2的RPM包 1、编译打包的shell脚本来源于该项目 https://github.com/boypt/openssh-rpms解压zip项目包 unzip openssh-rpms-main.zip -d /opt cd /opt/openssh-rpms-main/ vim pullsrc.sh 修改第23行为source ./version.env 2、sh pull…

知识图谱存在的挑战---商业模式相关和人才相关

文章目录 商业模式相关人才相关 商业模式相关 商业模式是通过协调关系&#xff0c;利用资源&#xff0c;获得价值和利益&#xff0c;将这些内容连接起来&#xff0c;从而形成一种企业满足消费者需求的动态系统。一种商业模式包含的要素很多导致商业模式的种类也很多&#xff0c…

比较市场上14款最佳的看板工具软件

文章对比了14款看板工具软件&#xff1a;PingCode、Worktile、Trello、Asana、Teambition、Monday、ClickUp、Wrike、Jira、Kanban Tool、MeisterTask、Teamhood、Leankit by Planview、ZenHub。 看板工具以其直观的设计和灵活性&#xff0c;成为团队协作和项目跟踪的首选。通过…

Java Collections集合的工具类使用方法

import java.util.*; public class test1 {public static void main(String[] args){// Collections集合的工具类使用方法/*1.Collections.addAll(list,l1,l2,l3...) 可变参数添加对象2.Collections.shuffle(list) 打乱集合中的元素顺序3.Collection.sort(list, new Comparator…

python3的基本语法说明二

一. 简介 前一篇文章简单学习了 python3 的一些基本语法&#xff0c;文章如下&#xff1a;python3的基本语法说明一-CSDN博客 本文继续学习 python3 的基本语法。 二. python3 的基本语法 1. 多行语句 Python 通常是一行写完一条语句&#xff0c;但如果语句很长&#xff0…

【阅读论文】-- LiveRAC:系统管理时序数据的交互式可视化探索

LiveRAC&#xff1a;系统管理时序数据的交互式可视化探索 摘要引言相关工作系统管理角色和活动当前工具的局限性 迭代设计方法参加者设计阶段 设计要求可视化解决方案设计原则LiveRAC 接口执行 纵向评价非正式纵向研究方法对设计的影响使用场景 结论致谢参考文献 摘要 我们介绍…

利用免费的可视化组件,零代码制作一个电商销量大屏居然这么简单!

每到一年一度的618和双十一时&#xff0c;由于各种平台的优惠力度&#xff0c;使人们纷纷清空购物车下单&#xff0c;而在这庞大的销售数据下&#xff0c;各大商家却能够在第一时间发布整体销售业绩和数额&#xff0c;在这高效且巨大的数据背后&#xff0c;你是否有了解过展示数…