Question

我使用getElementsByClassName()使用JavaScript执行一个小文本，但我收到了一些不需要的结果。我希望脚本将每个CSS类更改为一个新类。问题是每个其他班级只会改变......

我想使用纯js来解决这个问题，因为它是出于练习目的。

首先想到的是白色空间，但是当它移除时并没有任何不同。

有人能指出我做错了吗？

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="default.css">
    </head>
    <body>
        <div class="block-default">BLOCK1</div>
        <div class="block-default">BLOCK2</div>
        <div class="block-default">BLOCK3</div>
        <div class="block-default">BLOCK4</div>
        <div class="block-default">BLOCK5</div>
        <div class="block-default">BLOCK6</div>
        <div class="block-default">BLOCK7</div>
        <div class="block-default">BLOCK8</div>
        <script>

    var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;

    blockSet[0].className = "block-selected";
    blockSet[1].className = "block-selected";
    blockSet[2].className = "block-selected";
    blockSet[3].className = "block-selected";
    blockSet[4].className = "block-selected";
    blockSet[5].className = "block-selected";
    blockSet[6].className = "block-selected";
    blockSet[7].className = "block-selected";   

        </script>
    </body>
</html>

CSS类：

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }

Answer 1

因为您更改了.className的{{1}} blockSet。当元素遭受某些更新时，具有相同类（block-default）的元素的集合将发生变化。

换句话说，当您更改元素的.className时，集合将排除该元素。这意味着HTMLCollection的大小将减少。如果将具有该类的元素添加到DOM中，大小将增加。

要解决此问题，您始终只能更改第一个元素.className。

for(var i = 0; i<blockSetLength; i++)
{
    blockSet[0].className = "block-selected";
}

注意：逐个元素更改类的Intead，您可以使用for遍历元素并更改.className。

＆＃13;

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

console.log(blockSet);

for(var i = 0; i<blockSetLength; i++)
{
    blockSet[0].className = "block-selected";
}

＆＃13;

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }

＆＃13;

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

＆＃13;

如果在DOM（非集合）中添加新项目，则大小将增加，如下例所示。

＆＃13;

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

alert("Current size: " + blockSet.length);
document.body.innerHTML += '<div class="block-default">BLOCK9</div>';
alert("After adding an element in DOM size: " + blockSet.length);

＆＃13;

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }

＆＃13;

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

＆＃13;

Answer 2

不使用 getElementsByClassName() ，而是返回直播 HTMLCollection ，它将更改为{{1改变，
您可以使用querySelectorAll()，非实时 NodeList 。

className具有比querySelectorAll()更好的IE支持（IE8 +与IE9 +）它也更加灵活，因为它支持CSS选择器（IE8 +的CSS2和IE9 +的CSS3）。

但是，getElementsByClassName() 比<{1}}慢。如果您正在处理数千个DOM元素，请记住这一点。

<强>段

＆＃13;
＆＃13;
querySelectorAll()
＆＃13;
getElementsByClassName()
＆＃13;
var blockSet = document.querySelectorAll(".block-default"); var blockSetLength = blockSet.length; blockSet[0].className = "block-selected"; blockSet[1].className = "block-selected"; blockSet[2].className = "block-selected"; blockSet[3].className = "block-selected"; blockSet[4].className = "block-selected"; blockSet[5].className = "block-selected"; blockSet[6].className = "block-selected"; blockSet[7].className = "block-selected";
＆＃13;
＆＃13;
＆＃13;

Answer 3

通过为.className分配值，您可以覆盖该元素上的每个类。您可能需要查看的是.classList属性。

删除课程：

blockSet[0].classList.remove('block-default');

添加新课程：

blockSet[0].classList.add('block-selected');

一个好的开始，当你尝试做的事情，jQuery通常为你做的时候，是http://youmightnotneedjquery.com/

Answer 4

你已经有了一些很好的解决方案。

我认为最好的是来自里克希区柯克的那个。

但是我经常使用的解决方案是，在做这样的事情时要安全，就是向后移动集合

var nmax = blockSet.length - 1;
for (var n=nmax; n>=0; n--) {
    blockSet[n].className = 'block-selected';
}

将您与集合中的更改隔离开来

Answer 5

document.getElementsByClassName返回一个HTMLCollection对象， live

HTML DOM中的HTMLCollection是实时的;它会自动更新当基础文档发生变化时。

所以当你打电话

blockSet[0].className = "block-selected";

您更改了基础文档，该项目不再出现在集合中（blockSet [0]现在是原始选择中的第二项）。

Answer 6

发生此错误是因为blockSet是HTMLCollection，是“实时”。 HTMLCollections更新为页面上的元素更新。

每次换className时，您都会逐一缩短blockSet。

要解决此问题，请改为：

for (var i = 0; i < 8; i += 1) {
    blockSet[ 0 ].className = "block-selected";
}

通过这种方式，您可以逐个将HTMLCollection分块。

迭代1：[ div1, div2, div3, div4, div5, div6, div7, div8 ]

迭代2：[ div2, div3, div4, div5, div6, div7, div8 ]

迭代3：[ div3, div4, div5, div6, div7, div8 ]

迭代4：[ div4, div5, div6, div7, div8 ]

迭代5：[ div5, div6, div7, div8 ]

迭代6：[ div6, div7, div8 ]

迭代7：[ div7, div8 ]

迭代8：[ div8 ]

希望有所帮助！

Answer 7

最简单的方法是使用以下代码：

while(blockSetLength--){ 
    //this will change the class of n-1 dom object 
    blockSet[blockSetLength].className='block-selected';
}

Answer 8

这对我有用

var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }

<div class ="block-default">BLOCK1</div>
<div class ="block-default">BLOCK2</div>
<div class ="block-default">BLOCK3</div>
<div class ="block-default">BLOCK4</div>
<div class ="block-default">BLOCK5</div>
<div class ="block-default">BLOCK6</div>
<div class ="block-default">BLOCK7</div>
<div class ="block-default">BLOCK8</div>

Answer 9

此错误是因为您需要执行

blockSet[0].className = 'block-selected'

你不要写blockSet [1]，blockSet [2] ......

你可以这样做：

for (var s=0;s<blockSetLength;s++) {
  blockSet[0].className = 'block-selected';
}

Answer 10

发生错误是因为.className返回实时HTMLCollection。所以当你做这样的事情时：

blockSet[0].className = "block-selected";

您的收藏集blockSet[0]将成为blockSet[1]。所以当你执行这行时：

blockSet[1].className = "block-selected";

您不能更改您认为的blockSet[1]，但更改了起始blockSet[2]。

所以你可以这样做：

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
for(var i=0;i<blockSetLength;i++){
    blockSet[0].classList.add('block-selected'); //add the new class first
    blockSet[0].classList.remove('block-default'); //delete the old one
}

http://jsfiddle.net/94dqffa7/

我认为这是最好的方法。因为classList.add()和classList.remove()会帮助你改变你的课程，而不会在你的div上有你的其他课程（如果你有的话）。此外，您需要在删除旧版本之前添加新版本，否则您将遇到与以前相同的问题。

Answer 11

function change() {
  var blockSet = document.getElementsByClassName("block-default");
  var blockSetLength = blockSet.length;

  for (var i = 0; i < blockSetLength; i++) {

    blockSet[0].className = "block-selected";
  }
}

.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}

<button onclick="change()">change</button>

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

你做错了是每次更改类时，colllection会重新评估并减小大小。

Answer 12

First, the below code should do the trick in the simplest way.

var blockSet = document.getElementsByClassName("block-default").className = "block-selected";

Next what goes wrong with your code, or rather what is the interesting thing that is happening:

blockSet[0].className = 'block-selected';

makes the first block set element no longer a block set element. That leaves you with 7 remaining. Now,

blockSet[1].className = 'block-selected';

Selects the second one of the remaining ones. Which would be the third one of your complete list. Now you have 6 remaining.

blockSet[2].className = 'block-selected';

This makes the third one among the remaining, which would be your BLOCK5 into a block selected. And results in you having 5 remaining.

blockSet[3].className = 'block-selected';

This again finds your fourth one which is BLOCK7 when you count to the fourth among your remaining. And now you have 4 remaining.

blockSet[4] onwards find no such element and fail to execute. This is what happens with your code. Quite interesting. :).

Here is a jsfiddle alerting you the values as they run: https://jsfiddle.net/xz7h57jv/

Answer 13

定义和用法

getElementsByClassName（）方法返回all的集合具有指定类名的文档中的元素，作为 NodeList对象。
NodeList对象表示节点的集合。节点可以可以通过索引号访问。索引从0开始。

由于性能原因，不鼓励使用此属性含义（由于实时DOMCollection所做的任何更改）文档必须立即反映在返回的对象上）和复杂性（从文档中删除元素将导致立即改变收藏品。）

只需添加blockSet[0].className = "block-selected";并点击按钮，每次点击就会对每个div进行校对，因此我们需要点击8次才能为所有div着色并查看下面的实例

function myFunction() {
  var blockSet = document.getElementsByClassName('block-default');

  blockSet[0].className = "block-selected";

}

.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}

<button onclick="myFunction()">change</button>

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

通过仅添加var blockSet = document.getElementsByClassName('block-default'); alert("Length are: " + blockSet.length + "\nFirst Item is: " + blockSet[0].childNodes[0].nodeValue);而不添加其余内容，它会发出警告

长度为：8
第一项是：block1

如下面的实例：

function myFunction() {
  var blockSet = document.getElementsByClassName('block-default');

  /*
      blockSet[0].className = "block-selected";
      blockSet[1].className = "block-selected";
      blockSet[2].className = "block-selected";
      blockSet[3].className = "block-selected";
      blockSet[4].className = "block-selected";
      blockSet[5].className = "block-selected";
      blockSet[6].className = "block-selected";
      blockSet[7].className = "block-selected";*/

  alert("Length are: " + blockSet.length + "\nFirst Item is: " + blockSet[0].childNodes[0].nodeValue);
}

.block-default {

  width: 100px;

  height: 50px;

  background-color: green;

  border: 1px solid red;

  padding: 10px;

}

.block-selected {

  width: 100px;

  height: 50px;

  background-color: blue;

  border: 1px solid white;

  padding: 10px;

}

<button onclick="myFunction()">change</button>

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

或者我们可以使用document.getElementsByClassName与for loop一起使用，因此Rick Hitchcock回答的是querySelectorAll。它

function myFunction() {
  var blockSet = document.querySelectorAll('.block-default');
  blockSet[0].className = "block-selected";
  blockSet[1].className = "block-selected";
  blockSet[2].className = "block-selected";
  blockSet[3].className = "block-selected";
  blockSet[4].className = "block-selected";
  blockSet[5].className = "block-selected";
  blockSet[6].className = "block-selected";
  blockSet[7].className = "block-selected";
}

.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}

<button onclick="myFunction()">change</button>

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

我希望我的帖子有所帮助，如果您有任何疑问，请与我联系。

Answer 14

你可以在这里找到工作代码

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>


var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

for (i = 0; i < blockSetLength; i++) {
    blockSet[0].className = "block-selected";
}

演示链接http://jsfiddle.net/patelmit69/9koxfaLq/1/

Answer 15

将此用于您的JavaScript代码。这将解决您的错误

<script>
    var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;

    for (var i = blockSet.length - 1; i >= 0; i--) {
        blockSet[i].className = "block-selected";
    };
</script>

className只更改每个其他类

15 个答案: