【Web API DOM02】如何获取、操作DOM元素

一:获取DOM元素

1 根据CSS选择器获取

语法格式如下:

(1)选中一个DOM元素

document.querySeletor('CSS选择器')
<ul><li>1</li><li>2</li><li>3</li>
</ul>
document.querySelector('li')//只能获取第一个li

该选择器只能选中第一个DOM元素,因此选择时,要慎重选择对应的DOM元素;

选中的元素可以通过对象调用属性和方法的方式,修改元素的属性和方法

(2)可以选中多个DOM元素

document.querySelectorAll('CSS选择器')

 一次可选中HTML文档中的多个标签,并且返回该以该标签组成的伪数组

伪数组的特征:

  1. 有长度和索引值
  2. 没有pop()、push()等数组方法

二:操作DOM元素内容

1 对象.innerHTML属性

  1. 将文本内容添加/修改到任意标签位置
  2. 会解析标签,但多标签的情况下,建议使用模板字符串

2 对象.innerText属性

  1. 可以修改/添加标签中的文字内容
  2. innerText不会像引号、以及模板字符串中可以解析html的标签

三:操作DOM元素属性

1 操作元素常用属性

例如img的src属性、a的href属性

可以通过:对象.属性 = 值的方式修改

获取后:img.src = '....'

2 操作元素样式属性

  1. 通过style修改元素样式

    1. 语法格式:对象.style.属性 = '值'
    2. 对于CSS中background-color、margin-top等有短横线的,在JS中要修改成小驼峰的形式
    3. 生成的是行内样式表,权重比较高
  2. 通过className修改元素样式

    1. 语法格式:元素.classsName = '类名'
    2. 注意:
      1. 如果在原有类名的基础上添加类名,那么应保留在字符串中保留之前的类名,否则会覆盖之前的类名
      2. 这种方法常用于修改较多样式需要修改的情况
  3. 通过classList修改元素样式(重点)

    1. 为了解决className容易覆盖以前类名,可以通过classList方式追加和删除类名
    2. 语法格式
      1.  添加类名:元素.classList.add('类名')
      2. 删除类名:元素.classList.remove('类名')
      3. 切换类名:元素.classList.toggle('类名')
        1. 对于“切换类名”含义指,操作的元素“有括号内书写的类名”就删除掉该类名;元素上没有该类名就添加上该类名;

四:操作表单元素属性

1 常用操作表单元素属性

  • 利用value获取表单输入元素的值
  • 利用type修改表单元素的类型
  • checked(复选框是否被选中)、disabled(是否禁用某一按钮),checked和disabled都是默认为false

2 自定义元素属性

  • 在标签中一律以data-开头
  • 在DOM对象上一律以dataset对象方式获取

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

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

相关文章

Github上一款开源、简洁、强大的任务管理工具:Condution

Condution 是一款开源任务管理工具&#xff0c;它以简洁易用、功能强大著称。它旨在为用户提供一个简单高效的平台&#xff0c;帮助他们管理日常任务、提高工作效率。 1. Condution 的诞生背景 现如今&#xff0c;市面上存在着许多任务管理软件&#xff0c;但它们往往价格昂贵…

如何不用口吐莲花,照样成为社交达人

一、教程描述 每个人的一生&#xff0c;70%的时候都在沟通&#xff0c;与老板沟通、与家人沟通、与朋友沟通、与陌生人沟通&#xff0c;等等&#xff0c;但是你真的会沟通么&#xff1f;不论是工作上跟上司、同事和客户间的沟通&#xff0c;还是生活中与家人、朋友、伴侣间的沟…

[ICPC2024 Xi‘an I] ICPC2024 邀请赛西安站(7/8/13)

心得 [ICPC2024 Xian I] ICPC2024 邀请赛西安站重现赛 - 比赛详情 - 洛谷 7表示赛时ac了7个&#xff0c;8表示含补题总共ac数&#xff0c;13表示题目总数 题目 M. Chained Lights 打表&#xff0c;发现只有k1是YES //#include <bits/stdc.h> #include<iostream&…

Mysql 技术实战篇

命令行 导出 - -h localhost&#xff1a;指定MySQL服务器的主机地址为本地主机。如果MySQL服务器在其他主机上&#xff0c;请将localhost替换为相应的主机地址。 - -u username&#xff1a;指定连接MySQL服务器的用户名。将username替换为您的有效用户名。 - -p&#xff1a;提…

Makefile教程(附通用模板)

工程目录 工程目录如图&#xff0c;build文件夹是编译出来的 . ├── app │ ├── imx6ul.lds │ ├── main.c │ ├── makefile │ └── start.S ├── bsp │ ├── clk │ │ ├── bsp_clk.c │ │ └── bsp_clk.h │ ├── delay │…

软考 系统架构设计师系列知识点之SOME/IP与DDS(1)

本文内容参考&#xff1a; 车载以太网 - SOME/IP简介_someip-CSDN博客 https://zhuanlan.zhihu.com/p/369422441 什么是SOME/IP?_someip-CSDN博客 SOME/IP 详解系列&#xff08;1&#xff09;—— 概述_some ip-CSDN博客 深入浅出SOME/IP协议&#xff1a;基本概念和原理-…

天童教育:停止内耗放松身心

如果一个人经常从自己身上找原因&#xff0c;经常揽下他人的过错的责任&#xff0c;总是自我怀疑自我否定&#xff0c;认为自己不值得被爱。当被人误解时会在心里悄悄附和&#xff0c;责怪自己。缺乏自信&#xff0c;没办法和他人有正常的交往&#xff0c;长期处于身心疲惫的状…

Python与Python3的区别:深度剖析与全面解读

Python与Python3的区别&#xff1a;深度剖析与全面解读 在编程领域&#xff0c;Python和Python3是两个常被提及的版本&#xff0c;它们之间既存在相似之处&#xff0c;又有着显著的区别。本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;深入剖析Python与Python3之…

OJ3376无尽的石头问题

答案&#xff1a; #include<bits/stdc.h> using namespace std; const int N10e7; int fx(int n) {int sum0;while(n){sum(n%10);n/10;}return sum; } int main() {int t,n,x;cin>>t;while(t--){cin>>n;int count0;for(int i1;i<N;){if(in){cout<<…

在github上创建(上传、关联)自已的项目

目录 创建一个github项目并进行开发。 1.github创建空项目 2. git clone 项目 3. 将项目关联 创建一个github项目并进行开发。 1.github创建空项目 右边的New 然后按步创建就行 2. git clone 项目 复制这个连接 然后在终端&#xff1a;git clone [刚才复制的连接] 3. 将…

解读 Explainable Image Similarity Integrating Siamese Networks and Grad-CAM

给出论文&#xff08;Explainable Image Similarity Integrating Siamese Networks and Grad-CAM&#xff09;的内容解读、代码运行说明 论文链接&#xff1a;J. Imaging | Free Full-Text | Explainable Image Similarity: Integrating Siamese Networks and Grad-CAM (mdpi.c…

纯网络的系统能否定级备案?

很多单位想把网络基础设施进行定级备案和测评&#xff0c;但是不知道这样可否&#xff1f; 目前湖北省是可以的。因为根据《定级指南》的术语解释3.2对等级保护对象的定义是包括通信基础设施的&#xff0c;也就是网络基础设施。其他地区目前有的地方可以有的地方不行&#xff…

2024年武汉东湖高新中级职称报名时间是什么时候?

2024年武汉市东湖高新中级职称上半年批次报名已经截止了&#xff0c;下半年东湖高新至少还有一次报名机会&#xff0c;所以各位东湖高新区评职称的朋友们&#xff0c;不要错过这次了。 2024年武汉东湖高新区中级职称报名条件&#xff1a; 1.东湖高新区社保满足1年&#xff0c;近…

进口不锈钢气动输送泵-美国品牌

进口不锈钢气动输送泵是一种利用压缩空气为动力&#xff0c;通过气阀控制进行往复运动&#xff0c;将能量转换为泵的动能&#xff0c;从而实现对液体或固体物料输送的设备。以下是关于进口不锈钢气动输送泵的详细介绍&#xff1a; 一、产品特点 材质优良&#xff1a;主体部分…

seata源码分析(03)_创建代理的过程

seata提供了ProxyUtil工具类为事务组件创建代理对象&#xff0c;在spring环境中&#xff0c;seata提供了GlobalTransactionScanner类和SeataAutoDataSourceProxyCreator为组件创建AOP代理&#xff0c;本文重点分析这两个类。 ProxyUtil io.seata.integration.tx.api.util.Pro…

【中年危机】程序猿自救指南

中年危机&#xff0c;一个听起来就充满挑战的词汇&#xff0c;它不仅仅是一个年龄的标记&#xff0c;更是一个个人成长和职业发展的转折点。 构架个人品牌&#xff1a; 学会打造IP个人品牌是职业生涯中的重要资产。在中年时期&#xff0c;你已经积累了丰富的经验和知识&#x…

golang的http客户端封装

简介 net/http 是 Go 语言标准库的一部分&#xff0c;它提供了创建 HTTP 客户端和服务器的能力。这个包通过简化与 HTTP 协议的交互&#xff0c;让开发者能够方便地构建 HTTP 请求和响应&#xff0c;以及处理路由等任务。 本文以 net/http 包作为底层&#xff0c;封装一个包含…

HTCC电路板是什么,有哪些主要应用领域

HTCC英文名称是High-Temperature Co-Fired Ceramic&#xff0c;又称高温共烧多层陶瓷基板。因其具有导热系数高、耐热性好、热膨胀系数小、机械强度高、绝缘性好、耐腐蚀等优势&#xff0c;是保持高速增加的PCB线路板之一。 SPEA作为专业电路板测试设备方案服务商&#xff0c;公…

FY-SA-20237·8-WhyWeSpin

Translated from the Scientific American, July/August 2023 issue. Why We Spin (我们为什么旋转) Primates may play with reality by twirling around 翻译&#xff1a;灵长类动物有能力通过旋转或旋转运动来操纵或扭曲他们对现实的感知。 解释&#xff1a; “Primates”…

Java生成指定长度验证码

生成指定长度验证码的简单思路在Java中通常涉及以下几个步骤&#xff1a; 1、定义字符池&#xff1a; 首先&#xff0c;需要定义一个包含所有可能字符的字符串&#xff0c;这个字符池通常包括数字(0-9)、大写字母(A-Z)、小写字母(a-z)。 例如&#xff1a; String chars "…