在javascript中打印一个类的所有id名称[重复]答案

【问题标题】：Printing all the id names for a class in javascript [duplicate]在javascript中打印一个类的所有id名称[重复]
【发布时间】：2017-02-10 21:42:47
【问题描述】：

我想打印每个类名为“test”的元素的 ID。现在什么都没有打印。我想要这个打印出来

myAnchor
SecondId

我把我的 cmets 放在那里是为了展示如何通过访问 Id 名称来打印 Id

这是我的脚本

<!DOCTYPE html>
<html>
<body>

<p><a id="myAnchor" class="test" href="http://www.w3schools.com/">W3Schools</a></p>
<p><a id="SecondId" class="test" href="http://www.w3schools.com/">Second</a></p>

<p>Click the button to display the value of the id attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    //var x = document.getElementById("myAnchor");
    //document.getElementById("demo").innerHTML = x.id;
    var x = document.getElementByClassName("test");
    for(count = 0; count < x.length; count++){
        document.getElementById("demo").innerHTML = x.id;
    }
}
</script>

</body>
</html>

【问题讨论】：

var x = document.getElementsByClassName("test"); 还有document.getElementById("demo").innerHTML = x[count].id;
可能需要...innerHTML += ... 连接所有ID。
每次迭代都会覆盖demo。此外，在 for 循环中使用 var 或创建一个隐式全局变量。

标签： javascript html class

【解决方案1】：

你有几个基本的错别字：

document.getElementByClassName("test") 应该是 document.getElementsByClassName("test')
document.getElementById("demo").innerHTML = x.id 应该是 document.getElementById("demo").innerHTML += x[count].id

这是因为getElementsByClassName函数返回一个元素数组，所以需要从数组中获取每个元素，而不是数组本身。

另外，你每次都覆盖demo。使用 += 运算符而不是 = 运算符将字符串连接到原始字符串的末尾，而不是将原始字符串设置为新字符串。

【讨论】：

我不会投反对票，因为投反对票的正确答案不好，但如果问题的答案是拼写错误，则确实应该关闭它。
如果在一段时间后只有答案被赞成的问题才有资格被自动删除......

【解决方案2】：

这里有一些变化：

使用 getElementsByClassName()（而不是 getElementByClassName，这不是一个函数 - 除非您在某处定义它）。
为了在for循环中访问元素的id属性，使用x[count].id，因为x是一个NodeList，我们需要访问元素的索引计数。但是对于更简单的方法，使用Array.forEach()（以及function.call，因为元素列表是NodeList 而不是本机Array 实例）来迭代元素列表。这样 id 属性可以通过element.id 获得，而不是手动索引到元素数组中。此外，您不必担心增加循环变量。
```
var testElements = document.getElementsByClassName("test");
Array.prototype.forEach.call(testElements, function(element) {
    //access elements via callback argument element
});
```
由于它是用 for 循环编写的，因此您需要访问 x[count].id 才能获得 id 属性的值。
在循环外获取ID为demo的元素的引用，然后在添加到innerHTML属性时引用它。
```
var demo = document.getElementById("demo");
//in loop - refer to demo - e.g. demo.innerHTML
```
这样，每次添加 id 属性值时，它都不会获得对 DOM 元素的引用。
使用plus-equal 运算符（即+=）添加（附加）到innerHTML (string) 属性。
```
demo.innerHTML += element.id;
```
您可能希望分隔这些值（例如，使用空格、break tag（即<br />）等。
```
    demo.innerHTML += element.id + '<br />';
```

查看以下实施的更改：

function myFunction() {
  var demo = document.getElementById("demo");
  var testElements = document.getElementsByClassName("test");
  Array.prototype.forEach.call(testElements, function(element) {
    demo.innerHTML += element.id+'<br />';
  });
}

<p><a id="myAnchor" class="test" href="http://www.w3schools.com/">W3Schools</a>
</p>
<p><a id="SecondId" class="test" href="http://www.w3schools.com/">Second</a>
</p>


<p>Click the button to display the value of the id attribute of the link above.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

【讨论】：

forEach vs. for 可以忽略不计，不回答 OP 的问题。
在更新的解释中查看原因 - 第 2 点