为什么 getElementsByTagName 不返回带有标签名称的元素？答案

【问题标题】：Why is getElementsByTagName not returning the elements with the tag name?为什么 getElementsByTagName 不返回带有标签名称的元素？
【发布时间】：2021-10-02 15:59:38
【问题描述】：

我正面临着一个我将其归结为 MWE 的奇怪问题。我不是这方面的专家，如果很明显，请见谅。

我有这个 HTML 文档：

var floats = document.getElementsByTagName("custom-float");
for (var i = 0; i < floats.length; i++) {
  var caption = floats[i].getElementsByTagName("float-caption");
  if (caption.length == 0) {
    throw 'This float has no caption!';
  }
}

<p>
  A paragraph.
  <custom-float>
    <div style="display: flex;">
      <image src="1.svg"></image>
    </div>
    <float-caption>A description of the image.</float-caption>
  </custom-float>
</p>

由于某种原因，当我打开 HTML（在 Firefox 90.0 和 Linux 中的 Brave 1.26.77 中）时，会引发 This float has no caption! 错误，因此这意味着 getElementsByTagName 没有返回 float-caption 元素。

令我惊讶的是，我注意到如果我删除 <div style="display: flex;"></div> 包装器和/或如果我将 </p> 放在 <custom-float> 之前，一切都会按预期工作。 IE。以下两个 HTML 文档可以正常工作：

var floats = document.getElementsByTagName("custom-float");
for (var i = 0; i < floats.length; i++) {
  var caption = floats[i].getElementsByTagName("float-caption");
  if (caption.length == 0) {
    throw 'This float has no caption!';
  }
}

<p>
  A paragraph.
  <custom-float>
    <image src="1.svg"></image>
    <float-caption>A description of the image.</float-caption>
  </custom-float>
</p>

var floats = document.getElementsByTagName("custom-float");
for (var i = 0; i < floats.length; i++) {
  var caption = floats[i].getElementsByTagName("float-caption");
  if (caption.length == 0) {
    throw 'This float has no caption!';
  }
}

<p>
  A paragraph.
</p>
<custom-float>
  <div style="display: flex;">
    <image src="1.svg"></image>
  </div>
  <float-caption>A description of the image.</float-caption>
</custom-float>

【问题讨论】：

<div> 不是<p> 的有效子代。你的 MWE 应该是 <p><div>test</div></p> 和 document.getElementsByTagName('p')[0].getElementsByTagName('div') 才能发现它不存在。
<p><div></div></p> 不是有效的 HTML。您不能将<div> 放入<p> 并从各种浏览器获得一致的结果。为浏览器提供有效的 HTML，它们会表现得更好。

标签： javascript html getelementsbytagname

【解决方案1】：

仅使用标签更容易使用 querySelectorAll

var floats = document.querySelectorAll("custom-float");
for(var i = 0; i < floats.length; i++) {
    var caption = floats[i].querySelectorAll("float-caption");
    if (caption.length == 0) {
        throw 'This float has no caption!';
    }
}

【讨论】：

欢迎来到 Stack Overflow！请拿起tour（你会得到一个徽章！），环顾四周，并通读help center。想要提供帮助是件好事，但请首先确保您的答案确实适用于该问题 - 发布推测性或不正确的答案是没有用的。在这种情况下，有两个问题：使用querySelectorAll 并不比使用getElementsByTagName 容易，从一个切换到另一个并不能解决OP 描述的问题。

【解决方案2】：

您的元素正在 DOM 中重新定位，因为给定的 HTML 无效：div elements 不能在 p elements 中，它只能有 phrasing 内容，而不是 flow 类似div 的内容。如果您在浏览器中使用 DOM 检查器检查该结构，您会看到 div 及其内容已从 p（因此从 custom-float 移出）移到 p'父母。

如果您将p 替换为div（或删除div，正如您所发现的那样），您就不会有这个问题，因为HTML 不再无效。

这里将p 替换为div：

var floats = document.getElementsByTagName("custom-float");
for(var i = 0; i < floats.length; i++) {
    var caption = floats[i].getElementsByTagName("float-caption");
    if (caption.length == 0) {
        throw 'This float has no caption!';
    }
}

<!DOCTYPE html>
<html>
 <head>
    <title>MWE</title>
    <meta charset="utf-8">
 </head>
 
 <body>
    <div>
        A paragraph.
        <custom-float>
            <div style="display: flex;">
                <image src="1.svg"></image>
            </div>
            <float-caption>A description of the image.</float-caption>
        </custom-float>
    </div>
 </body>
</html>

【讨论】：