Question

我想打印每个具有类名“test”的元素的Id。现在什么都没打印。我想要打印

myAnchor
SecondId

我在那里留下了我的评论，以显示如何通过访问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>

Answer 1

你刚刚得到了一些基本的拼写错误：

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

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

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

Answer 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元素的引用。
使用string运算符（即+=）向innerHTML（plus-equal）属性添加（追加）。
```
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>

在javascript中打印类的所有id名称

2 个答案: