前端原生Js批量修改页面元素属性的2个方法

简介: 原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!

Coding-4.png

前言

嘿,朋友们!今天咱们来聊聊一个前端原生 JS 的小技巧。

今天在做一个 RPA 机器人时,碰到一个业务需求,网页上有两个日期控件元素,它们的输入框有 readonly 属性,只能通过选择的方式来输入日期,但需求要求能够手动输入日期,如:

<input readonly="readonly" placeholder="开始日期" type="text" class="t-date-picker">
<input readonly="readonly" placeholder="结束日期" type="text" class="t-date-picker">

现在需要通过 Js 获取这两个控件元素,删掉 readonly 属性,应该怎么做呢?有 2 个方法可以实现。

方法1:使用 getElementsByClassName

// 获取所有具有指定类名的 input 元素
const inputs = document.getElementsByClassName('t-date-picker');

// 循环遍历每个 input 元素并去掉 readonly 属性
for (let i = 0; i < inputs.length; i++) {
   
    inputs[i].removeAttribute('readonly');
    // 或者使用 inputs[i].readOnly = false;
}

方法2:使用 querySelectorAll

// 获取所有具有指定类名的 input 元素
const inputs = document.querySelectorAll('.t-date-picker');

// 使用 forEach 方法去掉 readonly 属性
inputs.forEach(input => {
   
    input.removeAttribute('readonly');
    // 或者使用 input.readOnly = false;
});

总结

到这里,我们已经成功地帮这两个日期控件 "解放" 出来了!那么,回顾一下这两个方法的特点:

  1. document.getElementsByClassName 返回一个类数组对象,这意味着它可以使用索引来访问,即使用 for 循环来遍历,但不能直接使用 forEach 循环。

  2. 相对而言,document.querySelectorAll 返回的是一个 NodeList 对象,操作时更加灵活,可以使用 forEach 方法遍历。

  3. 如果你知道某个控件元素是独一无二的,那么可以使用 getElementById(如果元素有 ID) 或 querySelector 更加高效。

往期精彩

  1. C# 静态类,高手不想让你知道的 15 个真相
  2. 封装一个 C# 范围判断函数,从此告别重复编写范围判断代码的烦恼
  3. 用 C# Stopwatch 计时,让代码性能飞起来!
  4. 轻装上阵,Visual Studio LocalDB:.NET 程序员的本地数据库神器
  5. 封装一个C#万能基础数据类型转换器,一招解决所有基础类型转换烦恼
  6. 闲话 .NET(7):.NET Core 能淘汰 .NET FrameWork 吗?
  7. 常用的 4 种 ORM 框架(EF Core,SqlSugar,FreeSql,Dapper)对比总结
  8. C# AutoMapper 10个常用方法总结
  9. C# 7个方法比较两个对象是否相等
  10. C# 去掉字符串最后一个字符的 4 种方法

我是老杨,一个执着于编程乐趣、至今奋斗在一线的 10年+ 资深研发老鸟,是软件项目管理师,也是快乐的程序猿,持续免费分享全栈实用编程技巧、项目管理经验和职场成长心得。欢迎关注老杨的公众号(名称:代码掌控者),更多干货等你来!

相关文章
|
4月前
|
JSON 前端开发 JavaScript
前端工具方法整理
前端工具方法整理
96 8
|
5月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
207 8
|
5月前
|
JavaScript 前端开发
|
5月前
|
存储 JavaScript 前端开发
|
5月前
|
移动开发 JavaScript 前端开发
|
5月前
|
存储 JavaScript 前端开发
|
5月前
|
JavaScript 前端开发
|
5月前
|
JavaScript 前端开发 开发者
|
JavaScript 前端开发 数据安全/隐私保护
|
JavaScript 前端开发 数据安全/隐私保护