JavaScript：由 getElementsByTagName() 创建的数组不会 return 其元素的长度？

Question

我有一个用 getElementsByTagName() 方法创建的数组，我不明白为什么当我询问它的元素长度时我得到 undefined。

在代码中，有问题的数组称为 b，还有一个称为 theArray 的数组，它用作我期望数组 b 的行为示例.

var str = document.getElementById("str");
var b = document.getElementsByTagName("b");
var h1 = document.getElementsByTagName("h1");
var h2 = document.getElementsByTagName("h2");

b[0].style.color = "red";
b[1].style.color = "yellow";
b[2].style.color = "green";
 
var theArray = ["Goodbye", "World"]; 

h1[0].innerHTML = b[0].length;
h2[0].innerHTML = theArray[0].length;

<h1>H1</h1>
<h2>H2</h2>

<span id="str">He is <b>likely</b> to be <b>called</b> up for Thursday's <b>match</b> against Italy.</span>

更新： 我不明白的是数组 b 和 theArray 之间的真正区别是什么，以及为什么它们的行为不同。我想，我明白 @jens 将它们称为两个不同的东西是什么意思，也就是说，一个是纯 JavaScript 另一个是由 HTML 元素生成的，但我仍然不明白为什么他们表现不同。我的意思是，最后它们都只是保存值的数组，不是吗？有人可以详细说明一下吗？谢谢！

Answer 1

您得到的是两个不同事物的长度。在 b[0].length 的情况下，您正在尝试获取 HTML 元素的长度。 b.length 会给你 3，因为匹配了 3 个元素。使用 theArray[0].length 您将获得有效字符串的长度。

Answer 2

没有。两者不一样。

var theArray = ["Goodbye", "World"]; 这就是我们所说的真正的数组，而

var b = document.getElementsByTagName("b"); 这里 b 是一个 HTMLCollection ，它又几乎与具有一些额外功能的数组相同。

但是 HTMLCollection 中包含的各个元素不是您可以对其调用字符串函数或方法的简单字符串，而是更具体的对象 HTMLElement

你可以说这类似于 java ；在 java 中，您可以使用 length 属性查找数组的长度，对于字符串，您可以使用 length() 方法，但不能在 class 对象上执行此操作像 employee.length;（除非您自己在 class 中实现了该功能）。这与 b[0].length; 您正在做的

完全相似

现在你可以猜出你需要做什么来修复 this.You 需要得到 innerHTML 属性它包含一个 字符串表示的内容html 标签。您可以在该标签的 HTMLElement 对象上调用它（它是该标签的 obj 表示，排序 "handle" 到标签）

var str = document.getElementById("str");
var b = document.getElementsByTagName("b");
var h1 = document.getElementsByTagName("h1");
var h2 = document.getElementsByTagName("h2");

b[0].style.color = "red";
b[1].style.color = "yellow";
b[2].style.color = "green";
 
var theArray = ["Goodbye", "World"]; 

h1[0].innerHTML = b[0].innerHTML.length;
h2[0].innerHTML = theArray[0].length;

<h1>H1</h1>
<h2>H2</h2>

<span id="str">He is <b>likely</b> to be <b>called</b> up for Thursday's <b>match</b> against Italy.</span>

Answer 3

任何document.getSomethingBySomething returns一个对象，它不同于数组。对象可以用 { "property" : "value", "next property" : "next value" } 写入，也可以用 object.property、object["property"]、object["property"] = value 或 object.property = value 写入或读取。

同时，数组由array[index] = value或array[index]写入或读取。 对象和数组之间的主要区别是数组用数字引用，而对象用属性引用名称（字符串）。要获取对象的长度只需使用 object.keys(b).length，因为 object.keys returns 数组中对象的所有属性名称格式，支持.length.

这里有你想知道的一切：https://www.w3schools.com/js/js_arrays.asp

JavaScript：由 getElementsByTagName() 创建的数组不会 return 其元素的长度？

JavaScript: Array created by getElementsByTagName() won't return length of its elements?

javascript

arrays

getelementsbytagname