javascript - 元素属性什么时候可以用作 CSS 选择器(或者为什么 querySelector 找不到我的复选框)

Question

我正在尝试弄清楚何时可以将元素属性用于 CSS 选择器。例如，在以下代码片段中，value 属性存在于复选框元素中(checkbox.value 计算为 'on')，但不能'在我明确设置它的值之前，querySelector 不会使用它:

var checkbox = document.querySelector("INPUT[type='checkbox'][name='vehicle']");
var value= checkbox.value; // evaluates to: 'on'
try {
    // This try throws:
    document.querySelector("INPUT[type='checkbox'][name='vehicle'][value='" + value + "']").checked=true;
} catch (ex) {
    console.log(ex.message); // prints: 'Cannot set property 'checked' of null'
}

document.querySelector("INPUT[type='checkbox'][name='vehicle']").value=value;
// This try checks the checkbox:
document.querySelector("INPUT[type='checkbox'][name='vehicle'][value='" + value + "']").checked=true;

<form action="">
    <input type="checkbox" name="vehicle">I have a bike<br>
    <input type="checkbox" name="vehicle">I have a car<br>
</form>

编辑:

感谢评论者，我想我明白了 DOM 属性和标记属性之间的区别。现在，回到我原来的问题 - 我想知道，对于给定的元素，如何判断它的特定属性是否在标记中。

我的目标:我正在编写一个访问页面中所有元素的算法，然后我需要通过一组给定的属性找到一个特定的元素。我想先通过 CSS 查找元素，然后通过 DOM 属性继续过滤结果。我如何知道每个属性是否对 querySelector 有用？

Answer 1

document.querySelector 仅选择 DOM 中的元素。

当您执行 var value= checkbox.value; 时，它只是使用内部设置的值，它在解析时 不 在 DOM 中。尝试添加以下行，事情应该会起作用。它改变了 DOM，所以它会起作用。

checkbox.setAttribute("value", "on"); // it updates markup hence works

完整代码:

var checkbox = document.querySelector("INPUT[type='checkbox'][name='vehicle']");
var value= checkbox.value; // evaluates to: 'on'
checkbox.setAttribute("value", "on");
try {
    document.querySelector("INPUT[type='checkbox'][name='vehicle'][value='" + value + "']").checked=true;
} catch (ex) {
    console.log(ex.message);
}