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

news2024/9/24 5:25:33

前言

嘿，朋友们！今天咱们来聊聊一个前端原生 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 更加高效。