Javascript getElementsByTagName returns 某些标签为空列表，对其他一些标签工作正常

Question

我不明白为什么对于某些标记，方法 getElementsByTagName 返回一个空列表。这是一个 MWE：

<!DOCTYPE html>
<html>

<head>
    <title>Title</title>
    
    <meta charset="utf-8">
</head>

<body>
    
    <figure class="figure" id="other figure">
        <image src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" width="100%" style="max-height: 70vh"></image>
        <figcaption>I am a figcaption.</figcaption>
    </figure>
    
    <float class="figure" id="my figure">
        <image src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" width="100%" style="max-height: 70vh"></image>
        <caption>I am a caption</caption>
        <figcaption>I am a figcaption 2.</figcaption>
        <p>1</p>
        <p>2</p>
    </float>
    
    <script>
    
        console.log(document.getElementsByTagName("float")); // Works fine with this custom tag
        console.log(document.getElementsByTagName("figure")); // Works fine
        console.log(document.getElementsByTagName("image")); // Fails, returns empty list with NON custom tag
        console.log(document.getElementsByTagName("caption")); // Fails, returns empty list
        console.log(document.getElementsByTagName("figcaption")); // Works fine
        console.log(document.getElementsByTagName("p")); // Works fine
    
    </script>
    
</body>

</html>

以防万一前面代码段的行为取决于浏览器，这里是我的屏幕截图格式的结果：

Answer 1

尝试 IMG 或 img 而不是 image。

备注：<caption>

The HTML <caption> element specifies the caption (or title) of a table.

<body>
    
    <figure class="figure" id="other figure">
        <image src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" width="100%" style="max-height: 70vh"></image>
        <figcaption>I am a figcaption.</figcaption>
    </figure>
    
    <float class="figure" id="my figure">
        <image src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" width="100%" style="max-height: 70vh"></image>
        <table>
          <caption>I am a caption</caption>
        </table>
        <figcaption>I am a figcaption 2.</figcaption>
        <p>1</p>
        <p>2</p>
    </float>
    
    <script>
    
        //console.log(document.getElementsByTagName("float")); // Works fine with this custom tag
        //console.log(document.getElementsByTagName("figure")); // Works fine
        console.log(document.getElementsByTagName("img")); // Fails, returns empty list with NON custom tag
        console.log(document.getElementsByTagName("caption")); // Fails, returns empty list
        //console.log(document.getElementsByTagName("figcaption")); // Works fine
        //console.log(document.getElementsByTagName("p")); // Works fine
    
    </script>
    
</body>

Answer 2

运行 F12控制台中这一行查看哪些标签是HTMLUnknownElement

类型

[...document.querySelectorAll("*")].map(el=>console.assert(!el.constructor.name.includes("Unknown"),el));

Javascript getElementsByTagName returns 某些标签为空列表，对其他一些标签工作正常

Javascript getElementsByTagName returns empty list for some tags and works fine for some other tags

html

javascript

getelementsbytagname