getElementsByClassNameを使用して特定のクラスのすべてのタグを取得するにはどうすればよいですか？このコードリターンの

-1

<!DOCTYPE html> 
<html> 
<body> 
    <div class="dropdowntextbox"> 
     <input type="text" class="dropdowntext"> 
     <div class="dropdown-content"> 
      <a href="#">Hi again</a> 
      <a>Hi again</a> 
     </div> 
    </div> 

    <div class="dropdowntextbox"> 
     <input type="text" class="dropdowntext"> 
     <div class="dropdown-content"> 
      <a href="#">Hi again</a> 
      <a>Hi again</a> 
     </div> 
    </div> 
    <script> 
     alert(document.getElementsByClassName("dropdowntextbox")); 
     for (div in document.getElementsByClassName("dropdowntextbox")){ 
      alert(div.toString()); 
     } 
    </script> 
</body> 
</html>

警告：getElementsByClassNameを使用して特定のクラスのすべてのタグを取得するにはどうすればよいですか？このコードリターンの

[object HTMLCollection] 
0 
1 
length 
item 
namedItem

私は警告が私に[object HTMLCollection]を与え、その後class="dropdowntextbox"を持っているだけで2つの<div>要素と予想。この行動の理由は何ですか？

出典

2017-11-03 Sahand

（divのdocument.getElementsByClassName（ "dropdowntextbox"））{ console.log（div、document。getElementsByClassName（ "dropdowntextbox"）[div]）; }この出力の意味を確認してください。あなたのことを繰り返す –

サイドノート：あなたが学ぶなら、あなたは自分自身[巨大な好意]（https://stackoverflow.com/questions/8203473/why-is-console-log-considered-better-than-alert）をやるでしょう。アラートの代わりに[コンソール]（https://webmasters.stackexchange.com/questions/8525/how-do-i-open-the-javascript-console-in-different-browsers）をデバッグ用に使用する方法。 – JJJ

for..inは、特定のオブジェクトのプロパティを反復します。つまり、HTMLCollectionのプロパティを繰り返しています。

for(let el of Array.from(document.getElementsByClassName("dropdowntextbox"))) { 

}

出典

2017-11-03 10:35:49

：あなたはES2015 +環境にある場合も

Array.from(document.getElementsByClassName("dropdowntextbox")).forEach(el => { 

})

、あなたがfor..ofを使用することができます。

あなたは、通常の配列にHTMLCollection全体を変換するためにArray.fromを使用してArray.prototype.forEachを使用する必要がありますループのfor..inを使用しています。これは、のオブジェクトの列挙可能なプロパティ名を繰り返します。これにより、すべてのプロパティが得られます。オブジェクトF、この場合はHTMLCollection（あなたの期待する動作を与えるだろうではない配列）

代わりfor..ofループを使用することにより、それが生成された値をループ、オブジェクトへの具体的な反復法を使用します。イテレータによって。この場合、あなたの3つのdiv。 HTMLCollectionは、実際にはオブジェクトであるので、あなたがオブジェクトキーを通じてサイクル用

typeof document.getElementsByClassName("dropdowntextbox");

だからあなた...をロギングすることで見ることができるように、だ

for (let div of document.getElementsByClassName("dropdowntextbox")){ alert(div.toString()); }

出典

2017-11-03 10:36:17

。実際のサイクルあなたは

HTMLCollectionの性質を通して、あなたのループ「のため」、あなたループでは

for(var i = 0; i < nodes.length; i++){ 
    //use nodes[i] 
}

出典

2017-11-03 10:37:17

'for'ループはHTMLCollectionsを処理できます。したがって、配列に変換する必要はありません。 – Werner

で

var nodes = Array.from(document.getElementsByClassName("dropdowntextbox"));

で配列にHTMLCollectionを変換して、いつものようにサイクルできるHTMLオブジェクトをへオブジェクト。ここ

var collection = document.getElementsByClassName("dropdowntextbox"); 

for(x = 0; x < collection.length; x++) 
{ 
    alert(collection[x].innerHtml); 
}

テスト：

あなたのような何かを行う必要がありますW3School

出典

2017-11-03 10:38:30

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <div class="dropdowntextbox"> 
 
     <input type="text" class="dropdowntext"> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Hi again</a> 
 
      <a>Hi again</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="dropdowntextbox"> 
 
     <input type="text" class="dropdowntext"> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Hi again</a> 
 
      <a>Hi again</a> 
 
     </div> 
 
    </div> 
 
    <script> 
 
    var tags = document.getElementsByClassName("dropdowntextbox"); 
 
     for (var i=0; i < tags.length;i++){ 
 
      alert(tags[i].toString()); 
 
     } 
 
    </script> 
 
</body> 
 
</html>

あなたがループについては、以下を使用する必要があります。

var tags = document.getElementsByClassName("dropdowntextbox"); for (var i=0; i < tags.length;i++){ alert(tags[i].toString()); }

出典

2017-11-03 10:40:32

これは私が最後に行ったことです。それは最も簡単なアプローチです – Sahand

getElementsByClassNameを使用して特定のクラスのすべてのタグを取得するにはどうすればよいですか？このコードリターンの

答えて

関連する問題