javascript - Javascript - 遍历 HTML 集合

问题描述

我正在尝试从 DOM 中删除整个 HTML 集合。我使用 Array.from 来创建 HTML 集合的数组。当我尝试遍历数组时，它显示为空白。我的期望是它通过循环显示每个单独的节点，以便我可以单独删除每个节点。

我的第一个问题是为什么我不能像往常一样访问数组。第二个问题是遍历 HTML 集合的最佳实践。我的代码在下面列出。谢谢

**更新 - 为澄清起见，当用户单击“维度选择”时，我试图删除 id 为“网格”的 div 上的所有 div。此时，用户可以输入新的尺寸并重新填充网格。

有问题的特定代码块

    if (button.className == undefined || button.className == false) {
        button.className = 'true';
    } else if (button.className == 'true') {
        let divList = document.querySelectorAll('.divs');
        let arrayList = Array.from(divList);
        console.log('array List', arrayList)
        console.log('arrayList[0]', arrayList[0]);
        for (i = 0; i < arrayList.length; i++) {
            console.log(arrayList[i]);
        }
    }

    gridSize = prompt('What grid size would you like?')
    fillGrid(gridSize);
})

const body = document.getElementById('body');
const sketchPad = document.getElementById('etch-a-sketch');
const button = document.getElementById('userSelection');
const grid = document.getElementById('grid');

button.addEventListener("click", (e) => {

    if (button.className == undefined || button.className == false) {
        button.className = 'true';
    } else if (button.className == 'true') {
        let divList = document.querySelectorAll('.divs');
        let arrayList = Array.from(divList);
        console.log('array List', arrayList)
        console.log('arrayList[0]', arrayList[0]);
        for (i = 0; i < arrayList.length; i++) {
            console.log(arrayList[i]);
        }
    }

    gridSize = prompt('What grid size would you like?')
    fillGrid(gridSize);
})

function createGrid(gridFill) {

    grid.setAttribute('style', `display: grid; grid-template-columns: repeat(${gridFill}, 1fr); height: 100%; width: 100%;
    background-color: white;`);
}

function fillGrid(gridSize) {

    createGrid(gridSize)

    for (i = 0; i < gridSize * gridSize; i++) {
        let div = document.createElement('div');
        div.classList.add('divs');
        grid.appendChild(div);
    }

}

grid.addEventListener("mouseover", (e) => {
    function random256() {
        return Math.floor(Math.random() * 257);
    }
    function color() {
        return `rgb(${random256()},${random256()},${random256()})`;
    }
    color();
})

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="etch-a-sketch.css" />
    <link rel="shortcut icon" href="#" />
  </head>
  <body id="body">
    <h1 id="title">Etch-A-Sketch</h1>
    <button id="userSelection">Dimensions Choice</button>
    <div id="etch-a-sketch">
      <div id="grid"></div>
    </div>
  </body>
  <script src="etch-a-sketch.js"></script>
</html>

CSS

body,
html {
  box-sizing: border-box;
}

#title {
  text-align: center;
}

#userSelection {
  display: block;
  margin: 0 auto;
}

#etch-a-sketch {
  width: 640px;
  height: 640px;
  border: 2px solid black;
  margin: 0 auto;
  margin-top: 2rem;
  box-sizing: border-box;
}

.divs {
  border: 1px solid black;
  box-sizing: border-box;
}

标签： javascript

function refresh() { let divs = document.querySelectorAll('.divs'); for (i = 0; i < divs.length; i++) { divs[i].remove() } } button.addEventListener("click", (e) => { refresh() gridSize = prompt('What grid size would you like?') fillGrid(gridSize); })

javascript - Javascript - 遍历 HTML 集合

问题描述

解决方案

推荐阅读