前言
嘿，朋友们！今天咱们来聊聊一个前端原生 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;
});
总结
到这里，我们已经成功地帮这两个日期控件 "解放" 出来了！那么，回顾一下这两个方法的特点：
document.getElementsByClassName返回一个类数组对象，这意味着它可以使用索引来访问，即使用for循环来遍历，但不能直接使用forEach循环。相对而言，
document.querySelectorAll返回的是一个 NodeList 对象，操作时更加灵活，可以使用forEach方法遍历。如果你知道某个控件元素是独一无二的，那么可以使用
getElementById（如果元素有 ID） 或querySelector更加高效。
往期精彩
- C# 静态类，高手不想让你知道的 15 个真相
- 封装一个 C# 范围判断函数，从此告别重复编写范围判断代码的烦恼
- 用 C# Stopwatch 计时，让代码性能飞起来！
- 轻装上阵，Visual Studio LocalDB：.NET 程序员的本地数据库神器
- 封装一个C#万能基础数据类型转换器，一招解决所有基础类型转换烦恼
- 闲话 .NET（7）：.NET Core 能淘汰 .NET FrameWork 吗？
- 常用的 4 种 ORM 框架（EF Core，SqlSugar，FreeSql，Dapper）对比总结
- C# AutoMapper 10个常用方法总结
- C# 7个方法比较两个对象是否相等
- C# 去掉字符串最后一个字符的 4 种方法
我是老杨，一个执着于编程乐趣、至今奋斗在一线的 10年+ 资深研发老鸟，是软件项目管理师，也是快乐的程序猿，持续免费分享全栈实用编程技巧、项目管理经验和职场成长心得。欢迎关注老杨的公众号（名称：代码掌控者），更多干货等你来！
