是否可以将 append 元素添加到 JavaScript 节点列表？

Question

我正在动态生成内容，所以我经常以使用querySelectorAll或 querySelector 查询的documentFragments结束，或者querySelector返回我的nodeList中的元素节点列表。

有时我想将一个项目添加到列表中，但我在网上找不到任何关于这是否可能的信息。

我试过这样：

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

和这个：

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

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

问题：
是否可以手动将元素添加到 NodeList？ 我想，不是，而是问。

感谢您的一些见解？

编辑：
所以更多信息：我正在生成一个动态内容块，我想将其 append 到我的页面。 默认情况下，该块是英文的。 由于用户正在查看中文页面，因此我在动态片段上运行翻译器，然后将其附加到 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

我还有一个建议。 您可以通过查询分隔符 ( , ) 选择多个节点，此代码将保存所有保存在节点变量中的 h2 和 h3 标签：

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

Answer 3

与之前描述的元素选择方法不同，querySelectorAll() 返回的 NodeList 不是实时的：它保存在调用方法时与选择器匹配的元素，但不会随着文档的变化而更新。 ^[1]

在这种情况下， NodeList不是活动的，因此如果您向它添加/从中删除任何内容，那么它不会对文档结构产生任何影响。

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

^{[1]： JavaScript：权威指南，大卫·弗拉纳根}

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;
    });
});

在任何情况下，一旦您掌握了每个项目，就可以使用人类可读的代码将其 push() 到一个数组中。

Answer 5

使用 ES6 Set()：

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

Answer 6

NodeLists 是只读的，所以我们不能直接改变它。 但这里是如何将新项目添加到 NodeList。

let list = document.querySelector("#app").childNodes; // node list
list = list[0]; // selecting the first element in node list
list.parentNode.appendChild(/* new elements */); // adding to parent of current node