Question

我正在动态生成内容，所以我经常以documentFragments结尾使用querySelectorAll或querySelector来回复nodeList个元素我的documentFragment。

我不时会在列表中添加一个项目，但我无法在网上找到关于这是否可行的任何内容。

我试过这样：

 document.querySelectorAll(".translate").item(length+1) = document.createElement("div");

和此：

 document.querySelectorAll(".translate").shift(document.createElement("div"));

但两者都不起作用（如预期的那样）

问题：
是否可以手动将元素添加到NodeList？我猜，不过还是要求。

感谢您的一些见解？

修改：
更多信息：我正在生成一个动态内容块，我想将其附加到我的页面。默认情况下，该块为英文。由于用户正在用中文查看页面，我正在动态片段上运行翻译器，然后将其附加到DOM。在我的页面上，我还有一个元素，比如一个标题，它应该根据添加的动态内容而改变。我的想法是一步到位=尝试向我的nodeList添加元素。但是从现在开始编写...我想不可能： - ）

Answer 1

编辑：正如@Sniffer所提到的，NodeLists是只读的（长度属性和项目）。您可以操纵其他所有内容，如下所示，但如果您想操作它们，最好将它们转换为数组。

var list = document.querySelectorAll('div');
var spans = document.querySelectorAll('span');

push(list, spans);
forEach(list, console.log); // all divs and spans on the page

function push(list, items) {  
  Array.prototype.push.apply(list, items);
  list.length_ = list.length;
  list.length_ += items.length;
}

function forEach(list, callback) {
  for (var i=0; i<list.length_; i++) {
    callback(list[i]);
  }
}

将NodeList转换为数组（list = Array.prototype.slice(list)）可能更好。

var list = Array.prototype.slice.call(document.querySelectorAll('div'));
var spans = Array.prototype.slice.call(document.querySelectorAll('span'));

list.push.apply(list, spans);
console.log(list); // array with all divs and spans on page

Answer 2

与先前描述的元素选择方法不同， querySelectorAll（）返回的NodeList不是实时的：它包含匹配的元素调用方法时的选择器，但它不会更新为文档变化。 ^[1]

在这种情况下，NodeList不存在，所以如果您向/从中添加/删除任何内容，那么它将不会对文档结构产生任何影响。

NodeList是一个只读数组对象。 ^[1]

^{[1]： JavaScript：权威指导家David Flanagan}

Answer 3

我还有另一个建议。您可以使用,来选择具有多个选择条件的多个节点，例如：

nodes list = document.querySelectorAll('h2, h3');

此代码选择保存在h2中的所有h3和nodes。

Answer 4

为了不进入使用数组方法的技术细节，有时可以更加可读地制作节点名称列表并循环遍历列表。

在这个例子中，我将相同的事件处理程序分配给两个不同的单选按钮组中的所有按钮（组中的每个按钮具有相同的名称）：

<div>
    <input type="radio" name="acmode" value="1" checked="checked">Phase<br>
    <input type="radio" name="acmode" value="2">Ssr<br>
    <input type="radio" name="acmode" value="3">Relay<br>
</div>
<div>
    <input type="radio" name="powermode" value="0"  checked="checked">Manual<br>
    <input type="radio" name="powermode" value="1">Automatic<br>
</div>

示例事件处理程序：

var evtRbtnHandler =
    function rbtnHandler() {
        document.getElementById("response11").innerHTML = this.name + ": " + this.value;
    }

分配：

var buttongroup = ["acmode", "powermode"];
buttongroup.forEach(function (name) {
    document.getElementsByName(name).forEach(function (elem) {
        elem.onclick = evtRbtnHandler;
    });
});

无论如何，一旦你掌握了每一个项目，就可以使用人类可读的代码将它推到一个数组中。

Answer 5

使用ES6 Set（）：

var elems = new Set([
    ...document.querySelectorAll(query1),
    ...document.querySelectorAll(query2)
]);

是否可以将元素附加到JavaScript nodeList？

5 个答案: