百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

JavaScript正确操作DOM元素的方式

liuian 2024-12-30 05:16 32 浏览

根据css选择器操作DOM元素

  • 获取DOM元素就是利用JS原则页面中的标签元素
  • document.querySelector('CSS选择器')， 选择匹配第一个元素，只匹配一个元素
<body>
  <div id="box"> 123 </div>

  <script>
    const box = document.querySelector('#box')
    console.log(box);

  </script>
</body>
  • document.querySelectorAll('CSS选择器'),匹配多个元素,返回的是一个NodeList对象集合
<body>
  <div id="box"> 123 </div>
  <ul>
    <li> 测试1 </li>
    <li> 测试1 </li>
    <li> 测试1 </li>
  </ul>

  <script>
    const box = document.querySelectorAll('ul li')
    console.log(box);

  </script>
</body>
  • 通过DOM选择器改变ul li列表中的字体颜色
<body>
  <ul>
    <li> 测试1 </li>
    <li> 测试2 </li>
    <li> 测试3 </li>
  </ul>
  <script>
    const li = document.querySelectorAll('ul li')
    console.log(li.length);
    for (let index = 0; index < li.length; index++) {
      const element = li[index];
      element.style.color = 'blue'
    }
  </script>
</body>

操作元素内容

DOM对象都是根据标签生成的，所有操作标签，本质上就是操作DOM对象，如果想要修改标签元素里面的内容，可以使用两种方式

  • 对象.innerText 属性，将文本内容添加/更新到任意标签位置，显示纯文本，不解析标签
<body>
  <div> 呱呱小程序开发工作室 </div>
  <div class="box"> 我是div </div>
  <script>
    // 获取元素
    const box = document.querySelector('.box')
    // 修改文字内容
    box.innerText = '123'
  </script>
</body>
  • 对象.innerHTML属性，将文本内容添加/更新到任意标签位置，会解析标签，多标签建议使用模板字符串
<body>
  <div> 呱呱小程序开发工作室 </div>
  <div class="box"> 我是div </div>
  <script>
    // 获取元素
    const box = document.querySelector('.box')
    // 修改文字内容  对象.innerText 属性
    box.innerHTML = `<h1> 123 </h1>`
  </script>
</body>

操作元素属性

操作元素常用的属性

  • 可以通过JS设置/修改标签元素属性，比如通过 src 更换图片
  • 最常见的属性比如：href、title、src等
  • 语法：对象.属性 = 值

操作元素样式列表

  • 通过 style 属性操作css
  • 语法：对象.style.样式属性 = 值
  • 如属性有-字符，需要转换为小驼峰命名法
  • 赋值的时候，需要的时候不要忘记加css单位
  • 操作类名(className)操作css，如果修改的样式比较多，直接通过style属性修改比较繁琐，我们就可以借助于css类名的形式
  • 语法：元素.className = '类名'
  • 注意：由于class是关键字，所以使用className去代替，className是使用新值换旧值，新值覆盖旧值，如果需要添加一个类，需要保留之前的类名
<body>
  <div> 呱呱小程序开发工作室 </div>
  <script>
    // 获取元素
    const div = document.querySelector('div')
    div.className = 'box'
    // 如果两个 css 样式都需要多个类名，类名与类名之间必须要加空格
    div.className = 'nav box'
</script>
</body>
  • 通过 classList 操作类控制 css，为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
  • 追加一个类的语法：元素.classList.add('类名')
  • 删除一个类的语法：元素.classList.remove('类名')
  • 切换一个类的语法：元素.classList.toggle('类名')
<body>
  <div class="nav"></div>
  <script>
    // 获取元素
    const div = document.querySelector('.nav')
    // 追加一个元素
    div.classList.add('box')
    // 删除一个元素
    div.classList.remove('box')
    // 切换一个类
    div.classList.toggle('box')
  </script>
</body>

相关推荐

Python 中 必须掌握的 20 个核心函数——items()函数

items()是Python字典对象的方法，用于返回字典中所有键值对的视图对象。它提供了对字典完整内容的高效访问和操作。一、items()的基本用法1.1方法签名dict.items()返回：字典键...

Python字典:键值对的艺术_python字典的用法

字典(dict)是Python的核心数据结构之一，与列表同属可变序列，但采用完全不同的存储方式：定义方式：使用花括号{}（列表使用方括号[]）存储结构：以键值对(key-valuepair)...

python字典中如何添加键值对_python怎么往字典里添加键

添加键值对首先定义一个空字典1>>>dic={}直接对字典中不存在的key进行赋值来添加123>>>dic['name']='zhangsan'>>...

Spring Boot @ConfigurationProperties 详解与 Nacos 配置中心集成

本文将深入探讨SpringBoot中@ConfigurationProperties的详细用法，包括其语法细节、类型转换、复合类型处理、数据校验，以及与Nacos配置中心的集成方式。通过...

Dubbo概述_dubbo工作原理和机制

什么是RPCRPC是RemoteProcedureCall的缩写翻译为:远程过程调用目标是为了实现两台(多台)计算机\服务器,互相调用方法\通信的解决方案RPC的概念主要定义了两部分内容序列化协...

再见 Feign!推荐一款微服务间调用神器，跟 SpringCloud 绝配

在微服务项目中，如果我们想实现服务间调用，一般会选择Feign。之前介绍过一款HTTP客户端工具Retrofit，配合SpringBoot非常好用！其实Retrofit不仅支持普通的HTTP调用，还能...

SpringGateway 网关_spring 网关的作用

奈非框架简介早期(2020年前)奈非提供的微服务组件和框架受到了很多开发者的欢迎这些框架和SpringCloudAlibaba的对应关系我们要知道Nacos对应Eureka都是注册中心Dubbo...

Sentinel 限流详解-Sentinel与OpenFeign服务熔断那些事

SentinelResource我们使用到过这个注解，我们需要了解的是其中两个属性：value：资源名称，必填且唯一。@SentinelResource(value="test/get&#...

超详细MPLS学习指南 手把手带你实现IP与二层网络的无缝融合

大家晚上好，我是小老虎，今天的文章有点长，但是都是干货，耐心看下去，不会让你失望的哦！随着ASIC技术的发展，路由查找速度已经不是阻碍网络发展的瓶颈。这使得MPLS在提高转发速度方面不再具备明显的优势...

Cisco 尝试配置MPLS-V.P.N从开始到放弃

本人第一次接触这个协议，所以打算分两篇进行学习和记录，本文枯燥预警，配置命令在下一篇全为定义，其也是算我毕业设计的一个小挑战。新概念重点备注为什么选择该协议IPSecVPN都属于传统VPN传统VP...

MFC -- 网络通信编程_mfc编程教程

要买东西的时候，店家常常说，你要是真心买的，还能给你便宜，你看真心就是不怎么值钱。。。----网易云热评一、创建服务端1、新建一个控制台应用程序，添加源文件server2、添加代码框架#includ...

35W快充?2TB存储?iPhone14爆料汇总，不要再漫天吹15了

iPhone14都还没发布，关于iPhone15的消息却已经漫天飞，故加紧整理了关于iPhone14目前已爆出的消息。本文将从机型、刘海、屏幕、存储、芯片、拍照、信号、机身材质、充电口、快充、配色、价...

SpringCloud Alibaba(四) - Nacos 配置中心

1、环境搭建1.1依赖<!--nacos注册中心注解@EnableDiscoveryClient--><dependency><groupI...

Nacos注册中心最全详解(图文全面总结)

Nacos注册中心是微服务的核心组件，也是大厂经常考察的内容，下面我就重点来详解Nacos注册中心@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合集》里面。微服务注册中...

网络技术领域端口号备忘录，受益匪浅 !

你好，这里是网络技术联盟站，我是瑞哥。网络端口是计算机网络中用于区分不同应用程序和服务的标识符。每个端口号都是一个16位的数字，范围从0到65535。网络端口的主要功能是帮助网络设备（如计算机和服务器...

一周热门
最近发表
标签列表