Узел Array в DOM JS, как это работает? - PullRequest
Новая
       17

Узел Array в DOM JS, как это работает?

0 голосов
/ 08 января 2019

Я только открываю DOM как новичка, и теперь я немного растерялся.

Я читал в одной статье, что nodeList - это просто элемент, похожий на массив - он отображается в консоли как массив, но на нем невозможно использовать методы массива (например, forEach или map). Но когда я попробовал это (в таблице, сделанной с помощью JS, функция table ()): 

let node = document.querySelectorAll('td')

node.forEach(function(node){
  node.style.border = 'thin solid #000';
  node.textContent = 'cell';
console.log(node);
})

Он работал как я хотел - как массив.

Кроме этого, этот код создал только пустой массив, без nodeList внутри: 

 let node = document.querySelectorAll('td')
 let nodeToArray = Array.apply(node);

 console.log(nodeToArray);

Я пытался спред оператора: 

let nodeToArray = [document.querySelectorAll('td')]

И он превратил nodeList в массив, но только с одним числом - может быть, это вызвано созданием тд с циклом?

И, конечно, метод forEach не работал с "Невозможно установить свойство 'border' для undefined." 

let nodeToArray = [document.querySelectorAll('td')]
  nodeToArray.forEach(function(nodeToArray){
    nodeToArray.style.border = 'thin solid #000';
    nodeToArray.textContent = 'cell';
console.log(nodeToArray);

Итак, как я могу изменить nodeList на массив? Или можно больше работать с nodeList, так как это был массив? (Я хочу создать шахматную доску, и поэтому мне нужно использовать этот массив для условного оператора if-else для создания нечетных / четных ячеек.)

Ответы [ 2 ]

0 голосов
/ 08 января 2019

В своем ответе я подумал, что я бы включил несколько подходов, смесь ES5 и ES6, вот несколько простых способов, которыми вы можете достичь этого.

Как указано в MDN документах , если вы хотите иметь любую поддержку IE, вы захотите использовать первую предоставленную мной реализацию, если вы ' Вы больше не беспокоитесь о поддержке старых браузеров, поэтому вы можете легко использовать любое из предложенных мной решений ES6.

Лично я предпочитаю использовать подход деструктурирующий , но каждый свой. 

// ES5
var notArray = document.querySelectorAll("input");
var array = Array.prototype.slice.call(notArray);

// ES6 
const notArray1 = document.querySelectorAll("input");
const array1 = [...notArray1];
const array2 = Array.from(notArray1);

// Tests
console.log(Array.isArray(array));
console.log(Array.isArray(array1));
console.log(Array.isArray(array2));

console.log(Array.isArray(notArray));
console.log(Array.isArray(notArray1));
<input>
<input>
<input>
<input>
<input>
<input>
0 голосов
/ 08 января 2019

Вам необходимо преобразовать node в фактический объект массива . Вы можете использовать Array.from , чтобы сделать это: 

const nodes = document.querySelectorAll('div')
const nodesArray = Array.from(nodes)
nodesArray.forEach(console.log)

Если сомневаетесь, вы можете использовать Array.isArray , чтобы проверить, является ли объект массивом: 

const nodes = document.querySelectorAll('div')
console.log(Array.isArray(nodes)) // false

const nodesArray = Array.from(nodes)
console.log(Array.isArray(nodesArray)) // true
...