Можно ли добавить элемент в список узлов JavaScript?

Я генерирую контент динамически, поэтому часто получаю documentFragments, который я запрашиваю, используя querySelectorAll или querySelector, возвращая nodeList элементов внутри моего documentFragment.

Время от времени я хотел бы добавить элемент в список, но я не могу найти ничего в Интернете о том, возможно ли это вообще.

Я пробовал это так:

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

и это:

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

Но оба не работают (как и ожидалось)

Вопрос.
Можно ли вручную добавлять элементы в NodeList? Наверное, нет, но все же спрашиваю.

Спасибо за некоторые идеи?

EDIT:
Итак, дополнительная информация: я создаю блок динамического контента, который хочу добавить на свою страницу. По умолчанию блок на английском языке. Поскольку пользователь просматривает страницу на китайском языке, я запускаю переводчик динамического фрагмента, ДО добавления его в DOM. На моей странице также есть элемент, скажем, заголовок, который должен меняться в зависимости от добавляемого динамического контента. Моя идея заключалась в том, чтобы сделать это за один шаг = попытаться добавить элемент в мой nodeList. Но написать это сейчас... Думаю, это невозможно :-)


javascript arrays append nodelist
person frequent    schedule 19.11.2013    source источник
comment
Что вы планируете делать с этим NodeList позже?   -  person VisioN    schedule 19.11.2013
comment
Вы пытаетесь создать узел на основе запроса?   -  person Ryan Stein    schedule 19.11.2013
comment
Ознакомьтесь с NodeList.js.   -  person Edwin Reynoso    schedule 08.08.2015

Ответы (5)


arrow_upward
21
arrow_downward

РЕДАКТИРОВАТЬ: Как упоминалось в @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
person Tibos    schedule 19.11.2013
comment
интересно. Не думал, что это возможно. - person frequent; 19.11.2013
comment
Полезный ответ и очень полезная техника. В современном JavaScript вы также можете использовать Array.from(document.querySelectorAll('div')), что более интуитивно понятно. Вы, наверное, догадываетесь, какой браузер его не поддерживает, хотя его легко полифилить: if(!Array.from) Array.From=function(data) { return Array.prototype.slice.call(data); }; - person Manngo; 03.07.2018

arrow_upward
11
arrow_downward

У меня есть другое предложение. Вы можете выбрать несколько узлов по разделителю запросов (,). Этот код сохранит все теги h2 и h3, сохраненные в переменной узлов:

var nodes = document.querySelectorAll('h2, h3');
person Amir Fo    schedule 26.08.2018

arrow_upward
7
arrow_downward

В отличие от ранее описанных методов выбора элементов, NodeList, возвращаемый querySelectorAll(), не является активным: он содержит элементы, соответствующие селектору на момент вызова метода, но не обновляется при изменении документа. [1]

NodeList в данном случае не является живым, поэтому если вы что-то добавите/удалите в/из него, то это никак не повлияет на структуру документа.

NodeList — это массивоподобный объект, доступный только для чтения. [1]

[1]: JavaScript: полное руководство, Дэвид Флэнаган

person Ibrahim Najjar    schedule 19.11.2013
comment
Я знаю это. У меня есть documentFragment, который я использую для QSA, чтобы получить свой список узлов. Этот список мне нужно перевести (см. комментарий выше), ПЛЮС мой элемент X, который не является частью фрагмента. Вопрос в том, как обращаться с X? - person frequent; 19.11.2013
comment
@frequent из той же ссылки, A NodeList is a read-only array-like object. - person Ibrahim Najjar; 19.11.2013

arrow_upward
0
arrow_downward

Чтобы не вдаваться в технические подробности о методах массива, иногда может быть более читабельно составить список имен узлов и зациклиться на списке.

В этом примере я назначаю один и тот же обработчик событий всем кнопкам в двух разных группах переключателей (где каждая кнопка в группе имеет одинаковое имя):

<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() в массив с использованием удобочитаемого кода.

person flodis    schedule 10.02.2018

arrow_upward
0
arrow_downward

Используйте набор ES6():

var elems = new Set([
    ...document.querySelectorAll(query1),
    ...document.querySelectorAll(query2)
]);
person Dmitry Shashurov    schedule 16.04.2020