使用 Javascript DOM 获取带有标签名称的第一个元素

Using Javascript DOM to get first element with tag name

本文关键字：第一个 元素 标签名 Javascript DOM 获取 使用      更新时间：2023-09-26

Im 尝试获取带有标签的第一个元素<figure>使用 getElementByTagName().firstChild[0].innerHTML 但在将其添加到内容时遇到了一些问题，我得到了undefined.

这是我正在使用的javascript。

function loopImage()
{
    var value = document.getElementById("loopvalue").value; 
    var content = document.getElementById("contained");
    if(value >= 1)
    {
    content.innerHTML = '<br><input type="button" value="Search" onClick="loopImage()"><input type="text" id="loopvalue"><br><br>';
    for(var i =0;i< value; i++)
    {
        content.innerHTML = content.innerHTML + content.getElementByTagName('figure').firstChild[0].innerHTML;
    }
    content.innerHTML = content.innerHTML + '<style>figure:nth-of-type(2n+2){background:black;color:red;}</style>';
    }
    else if(value == "") location.reload();
    else if(value <= 0) alert("Positive Numbers only!");
    else alert("Are you sure that was a number?")
}

这是我尝试从中获取内容的 HTML，

<div class="container" id="contained">
    <br>
    <input type="button" value="Search" onClick="loopImage()">
    <input type="text" id="loopvalue">

<br><br>
<figure>
    <a href="photos/DSC01049.JPG">
        <img src = "photos/DSC01049.JPG" alt="City view" height="200" width="200">
    </a>
    <figcaption>City View</figcaption>
</figure>
<figure>
    <a href="photos/DSC01066.JPG">
        <img src = "photos/DSC01066.JPG" alt="City view" height="200" width="200">
    </a>
    <figcaption>Ferris Wheel</figcaption>
</figure>
<figure>
    <a href="photos/DSC02511.JPG">
        <img src = "photos/DSC02511.JPG" alt="City view" height="200" width="200">
    </a>
    <figcaption>Old Mates House</figcaption>
</figure>
<figure>
    <a href="photos/DSC03810.JPG">
        <img src = "photos/DSC03810.JPG" alt="City view" height="200" width="200">
    </a>
    <figcaption>City Skyline</figcaption>
</figure>
<figure>
    <a href="photos/DSC05750.JPG">
        <img src = "photos/DSC05750.JPG" alt="City view" height="200" width="200">
    </a>
    <figcaption>Beach</figcaption>
</figure>

</div>

您引用的代码有两个问题：

content.getElementByTagName('figure').firstChild[0].innerHTML
// Missing s -----^                  ^^^^^^^^^^^^^^--- there is no firstChild on the return value

所以理论上可能是

content.getElementsByTagName('figure')[0].innerHTML

。但是它会得到一个列表，然后从中获取第一个，当你只想要第一个并且根本不需要列表时。我可能只会得到第一个：

content.querySelector('figure').innerHTML

querySelector 查找 CSS 选择器的第一个匹配元素，如果没有匹配，则null。所有现代浏览器以及IE8都支持它。(它是 querySelectorAll 的相对关系，它返回 CSS 选择器的匹配元素列表。

这解决了：

 content.getElementsByTagName('figure')[0].innerHTML
相关文章：