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

Question

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

表单输入

  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;
    }

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

What is the proper way to iterate over DOM elements with getElementsByClassName?

javascript

arrays

dom

nodelist