javascript - document.querySelectorAll("[value='a']") 的返回值在元素值被修改后不会改变

Question

元素值修改后，无论浏览器修改还是javascript修改，返回值document.querySelectorAll("[value='a']")都不会改变。

我在客户端上运行 Windows 10 和 chrome 73。下面是演示：

var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
var select = document.getElementById("select");
var modify = document.getElementById("modify");

select.addEventListener("click", function () {
    console.log("text1.value: " + text1.value);
    console.log("text2.value: " + text2.value);
    console.log(document.querySelectorAll("[value='a']"));
});

modify.addEventListener("click", function () {
    text1.value = "a";
});

<input type="text" id="text1">
<input type="text" id="text2" value="a">
<input type="button" id="select" value="select">
<input type="button" id="modify" value="modify">

1. 单击select按钮我NodeList [input#text2]登录浏览器控制台。
2. 点击modify按钮或直接修改text1数值。
3. 单击select我得到NodeList [input#text2]的按钮，但我希​​望输出是NodeList(2) [input#text1, input#text2]。

看起来选择器仅适用于初始 html 值。我试过谷歌这个问题，但那里没有任何线索。

1. 如果这种行为是标准行为，目的是什么？
2. 如果我想要预期的返回值，是否有解决方法NodeList(2) [input#text1, input#text2]？

标签： javascripthtmldomselectors-api