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

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

javascript html class

在javascript中打印类的所有id名称,javascript,html,class,Javascript,Html,Class,我想打印每个类名为“test”的元素的Id。现在什么也没印。我想把这个打印出来 myAnchor SecondId 我在那里留下了我的评论，以显示如何通过访问Id名称打印Id 这是我的剧本 <!DOCTYPE html> <html> <body> <p><a id="myAnchor" class="test" href="http://www.w3schools.com/">W3Schools</a></p&g

我想打印每个类名为“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>




单击按钮以显示上面链接的id属性的值
试试看

函数myFunction（）{
//var x=document.getElementById（“myAnchor”）；
//document.getElementById（“demo”）.innerHTML=x.id；
var x=document.getElementByClassName（“测试”）；
用于（计数=0；计数

您刚刚遇到了几个基本的打字错误：

document.getElementByClassName（“测试”）

应该是

document.getElementsByClassName（“测试”）

document.getElementById（“demo”）.innerHTML=x.id

应该是

document.getElementById（“demo”）.innerHTML+=x[count].id

这是因为

getElementsByClassName

函数返回一个元素数组，因此需要从数组中获取每个元素，而不是数组本身

此外，您每次都会覆盖

demo

。使用

+=

运算符而不是

运算符将字符串连接到原始字符串的末尾，而不是将原始字符串设置为新字符串。

此处有一些更改：

使用（而不是getElementByClassName，它不是一个函数-除非您在某处定义它）

为了访问for循环中元素的id属性，请使用

x[count].id

，因为x是一个节点列表，我们需要在索引count处访问元素。但是为了更简单的方法，请使用（以及，因为元素列表是一个而不是一个本机实例）迭代元素列表。这样，可以通过

element.id

获得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元素的引用

使用运算符（即

+=

）向innerHTML（）属性添加（追加）

您可能希望将这些值分开（例如，使用空格，（即

）等）

demo.innerHTML+=element.id+'
；

请参阅下面实施的更改：

函数myFunction（）{
var demo=document.getElementById（“demo”）；
var testElements=document.getElementsByClassName（“测试”）；
Array.prototype.forEach.call（testElements、function（element）{
demo.innerHTML+=element.id+'
'；
});
}





单击按钮以显示上面链接的id属性的值
试试看

var x=document.getElementsByClassName（“test”）；

以及

document.getElementById（“demo”）.innerHTML=x[count].id；

可能需要

…innerHTML+=…

来连接所有id。您在每次迭代中都会覆盖

demo

。此外，在for循环中使用

var

，或者创建一个隐式全局变量。我不会进行向下投票，因为对正确答案进行向下投票并不好，但如果问题的答案是打字错误，则应该是clo相反，sed。如果在一段时间后，只有答案为向上投票的问题才有资格自动删除…

forEach

vs.

for

可以忽略不计，并且不回答OPs问题。请参见更新的解释-第2点中的推理

demo.innerHTML += element.id;

    demo.innerHTML += element.id + '<br />';