javascript - 简单的 DOM 更改,非常奇怪的错误

标签 javascript html css dom

<分区>

问题是:

将下面的 3 个 div(它们不可见)更改为 50x50 红色方 block

<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>

我们正在更改的内置类:

<style media="screen">
  .red{
    width:50px;
    height:50px;
    background:red;
  }

此解决方案仅作用于第一个和最后一个 div,将中间部分排除在外:

let boxes = document.getElementsByClassName('empty');

function addThree(boxes) {
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].className = 'red';
 }
}
addThree(boxes);

适用于所有三个 div 的解决方案;

let boxes = document.getElementsByClassName('empty');

function addThree(boxes) {
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].classList.add('red');
 }
}
addThree(boxes);

不太确定这里有什么区别,如果有人能给出解释那就太棒了!

最佳答案

问题是 document.getElementsByClassName('empty') 返回 live HTMLCollection .这意味着它会在 DOM 更改时自动更新自身。所以当你赋值时(你擦掉了之前的类 empty)

boxes[0].className = 'red';

对于之前一直为empty的第一个元素,集合boxes不再是3元素,而是现在只有2个。

另一方面,boxes[i].classList.add('red')不会影响boxes集合长度,因为red 类被添加到元素(所以它变成空红色 - 仍然是),不会覆盖所有以前的类。

关于javascript - 简单的 DOM 更改,非常奇怪的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47274134/

相关文章:

JavaScript - 未捕获的类型错误 : Failed to execute 'getComputedStyle' on 'Window' : parameter 1 is not of type 'Element'

html - 你能创建一个 css "function"或包装器吗

css - 在输入末尾插入图标

Javascript - 悬停时 Bootstrap 下拉菜单打开子菜单的所有菜单级别

javascript - jQuery 切换不能与附近示例中的许多其他 JavaScript 一起使用

javascript - 为什么我的 Angular 元素UI在Windows操作系统和Mac操作系统中显示不同?

javascript - 映射数组到对象

html - 与 Telerik 控件的内置 javascript 函数相关的问题

css - Ionic 4 改变输入颜色

javascript - 是否可以在运行时迭代 Typescript 类抽象方法?