可以将元素附加到JavaScript Nodelist？

Question

querySelectorAll

或

querySelector

在文档范围内返回

nodeList

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

我想不时地将项目添加到列表中，但是我在网上找不到有关这是否可能的任何东西。

我尝试过：

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

和此：

nodeList

但两者都不起作用（预期）

问题：

是否可以手动将元素添加到节点符中？我想，不只是问，但是

感谢一些见解？

eDit

：

因此，更多信息：我要生成一个动态内容，我想将其附加到我的页面上。默认情况下，该块是英文。由于用户正在以中文查看页面，因此在将其附加到DOM之前，我正在在动态片段上运行翻译器。在我的页面上，我还有一个元素，例如标题，该元素应该根据所添加的动态内容而更改。我的想法是在一个步骤中进行此操作=尝试在我的

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

中添加一个元素。但是现在写它...我想不可能:-)

Edit：正如@sniffer所述，Nodelists是只读的（长度属性和项目）。您可以操纵有关它们的所有其他所有内容，如下所示，但是如果您想操纵它们，最好将它们转换为阵列。

list = Array.prototype.slice(list)

Answer 1

将节点符转为数组（

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

）可能是一个更好的主意。

,

1。 DOM接近

我还有另一个建议。您可以通过查询分离器（

nodes

）选择多个节点，此代码将在

Answer 2

变量中保存所有H2和H3标签：

...

报名：

Mdn：verragy语法（...）

2。 ES6接近

如果您不使用DOM。您可以使用将

NodeList转换为Array

.

---

的ES6运算符。

var nodes = [
    ...document.querySelectorAll("h1"),
    ...document.querySelectorAll("h2")
];

3。 ES5接近

let h1s = Array.prototype.slice.call(document.querySelectorAll("h1"));
let h2s = Array.prototype.slice.call(document.querySelectorAll("h2"));
let nodes = h1s.concat(h2s)

以前描述了元素选择方法， 由QuerySelectorall（）返回的Nodelist不是Live：它保存匹配的元素 调用该方法时的选择器，但不会随着文档而更新 更改。

[1]

---

在这种情况下，

NodeList

没有活着，因此，如果您从中添加/删除任何内容，则不会对文档结构产生任何影响。

Answer 3

ANodelist是一个仅读取数组的对象。

[1]

[1]：

javaScript：确定的GUID，DavidFlanagan

^{使用es6 set（）：}

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

^{为了不使用数组方法进入技术性，有时可以更读取节点名称和循环列表。} 在此示例中，我将同一事件处理程序分配给两个不同的广播按钮组中的所有按钮（组中的每个按钮都有相同的名称）：

Answer 4

样品事件处理程序：

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

Answer 5

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

在任何情况下，您可以使用人类可读代码将其推向数组。

调整主义者是阅读的，因此我们不能直接将其突变。但是，这是您可以将新项目添加到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