在javascript中打印一個類的所有id名稱

-5

我想打印具有類名「test」的每個元素的Id。現在沒有什麼打印。我想這對打印在javascript中打印一個類的所有id名稱

myAnchor 
SecondId

我離開了我的意見在那裏展示如何的標識可以通過訪問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>

來源

2017-02-10 Jacob

'var x = document.getElementsByClassName（「test」）;'還有'document.getElementById（「demo」）。innerHTML = x [count] .id;' –

可能需要'... innerHTML + = .. .'連接所有的ID。 – RobG

每次迭代都覆蓋'demo'。另外，在for循環中使用'var'或者創建一個隱式的全局變量。 –

您已經只是得到了幾個基本的錯別字：

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

這是因爲getElementsByClassName函數返回元素的數組，所以你需要從數組，而不是數組本身獲得的每個元素。

此外，您每次都覆蓋demo。使用+=運算符而不是=運算符將字符串連接到原始文件的末尾，而不是將原始文件設置爲新字符串。

來源

2017-02-10 21:47:11 Toastrackenigma

我不會低調，因爲downvoting正確的答案不好，但如果問題的答案是一個錯字，它確實應該被關閉。 –

如果只有問題與upvoted答案將有資格在一段時間後自動刪除... –

一些變化在這裏：

（而不是getElementByClassName，這是不是一個功能 - 除非你是某處定義它）使用getElementsByClassName()。
爲了訪問元素在id屬性爲循環，使用x[count].id，因爲x是一個節點列表，我們需要在指數計數訪問元素。但是對於更簡單的方法，使用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 });

由於它與書面循環，你將需要訪問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（即 ）等

demo.innerHTML += element.id + ' ';

看到的變化如下實施：

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

<a id="myAnchor" class="test" href="http://www.w3schools.com/">W3Schools</a> <a id="SecondId" class="test" href="http://www.w3schools.com/">Second</a> Click the button to display the value of the id attribute of the link above. <button onclick="myFunction()">Try it</button> 

來源

2017-02-10 21:48:32

'forEach'與'for'是微不足道的，不回答OPs問題。 –

在更新後的解釋中查看推理 - 點＃2 –

在javascript中打印一個類的所有id名稱

回答

相關問題