用getElementsByClassName迭代DOM元素的正确方法是什么？

Question

我希望我的用户能够访问移动模拟器，以便他们可以测试其网站的响应能力。我正在使用iframe方法，如responsinator做了研究后here和here我不太确定我应该选择哪条路线......我在尝试一个不起作用的代码。

表单输入

Enter the link of your website below 

      <form method="post" target="browser" style="padding-top:50px;"> 
<input id="txtUrl" style="width:60%; display:inline-block; margin-top:10px; height:100%;" placeholder="eg. http://www.google.com/" name="url" type="text" /> 
<input style="display:inline-block; height:100%; border-radius:45%;" type="button" value="Go" onclick="setBrowserFrameSource(); return false;"/> 
</form> 

这工作只有一个IFRAME：

<script type="text/javascript"> 
    function setBrowserFrameSource(){ 
     var browserFrame = document.getElementById("browser"); 
     browserFrame.src= document.getElementById("txtUrl").value; 
    } 
</script> 


<div id="iPhone5-portrait" class="device-block"> 
      <h5>iPhone 5 portrait · width: 320px</h5> 
      <iframe id="browser" name="browser" src="http://google.com" style="height:568px; width:320px"></iframe> 
      </div> 

这并不多工作：

<script type="text/javascript"> 
    function setBrowserFrameSource(){ 
     var browserFrame = document.getElementsByClassName("browser"); 
     for(var i=0; i<browserFrame.length; i++) 
       { 
        alert(browserFrame[i].innerHTML); 
       } 
     browserFrame.src= document.getElementById("txtUrl").value; 
    } 
</script> 


    <div id="iPhone5-portrait" class="device-block"> 
      <h5>iPhone 5 portrait · width: 320px</h5> 
      <iframe class="browser" name="browser" src="http://google.com" style="height:568px; width:320px"></iframe> 
      </div> 

      <div id="iPhone5-landscape" class="device-block"> 
     <h5>iPhone 5 landscape · width: 568px</h5> 
      <iframe class="browser" name="browser" src="http://google.com" style="height:320px; width:568px"></iframe> 
      </div> 

Answer 1

这是解决方案：

for(var i=0; i<browserFrame.length; i++) { 
     alert(browserFrame[i].innerHTML); 
     browserFrame[i].src= document.getElementById("txtUrl").value; 
    }