Javascript 如何从htmlcollection中提取特定元素

我用下面的代码制作了basic

html

下拉列表

<select id="logged_headerdropdown">
    <option>Choose Product</option>

    <option value="Add Product" label="Add Product">Add Product</option>

    <option value="Oranges" label="Oranges">Oranges</option>

    <option value="Tomatoes" label="Tomatoes">Tomatoes</option>
</select>

将样式应用于下拉列表后，我无法访问带有标记名a的第一个元素

当我试图提取所有元素（哪些元素有标记名

a

）时，我得到了

htmlcollection

格式的列表。从该格式中，我无法从列表中提取第二个元素

关于这一点，我目不转睛地看着它，最后发现

htmlcollection

不是从

Array

中提取的，所以它不支持

Array

相应的函数

---

我如何解决这个问题。有人能帮我吗。

试试：

toArray=Array.call.bind（[].slice）；toArray（collection）

您有三个或更多的元素吗？当您在控制台中键入它时，文档已经准备好了，如果它包含在文件中时不起作用，您可能在您试图访问的元素之前包含了脚本。@DavidThomas

htmlcollection

有24个元素。应该有，请显示更多的代码。

<div class="col-md-21 col-sm-10 summaryHeaderLabel" id="joy_second" data-intro="2. Choose a quality deterioration model" data-position="bottom">
            <div class="row" id="headerdropdown_wrapper" data-pattern="currentSelect">
                <select name="primary" class="select-block max " id="logged_headerdropdown" style="display: none;">
    <option>Choose Product</option>

    <option value="Add Product" label="Add Product">Add Product</option>

    <option value="Oranges" label="Oranges">Oranges</option>

    <option value="Tomatoes" label="Tomatoes">Tomatoes</option>

</select><div class="btn-group select select-block max"><button class="btn dropdown-toggle clearfix btn-primary" data-toggle="dropdown" id="logged_headerdropdown"><span class="filter-option pull-left">Choose Product</span>&nbsp;<span class="caret"></span></button><span class="dropdown-arrow dropdown-arrow-primary"></span><ul class="dropdown-menu dropdown-primary" role="menu" style="max-height: 220px; overflow-y: auto; min-height: 0px;"><li rel="0" class="selected"><a tabindex="-1" href="#" class=""><span class="pull-left">Choose Product</span></a></li><li rel="1"><a tabindex="-1" href="#" class=""><span class="pull-left">Add Product</span></a></li><li rel="2"><a tabindex="-1" href="#" class=""><span class="pull-left">Oranges</span></a></li><li rel="3"><a tabindex="-1" href="#" class=""><span class="pull-left">Tomatoes</span></a></li></ul></div>                                        
            </div>

            <span class="label label-primary hide" id="summaryHeaderLabel"></span>

        </div>