JS新手求助：获取div中input标签总数时报错TypeError的解决方法

错误原因 #

document.getElementsByClassName("card-body") 返回的是HTMLCollection（类数组对象，包含所有匹配该类名的元素），而非单个DOM元素。getElementsByTagName是单个DOM元素的专属方法，类数组对象没有这个方法，因此触发报错。

解决方案 #

你的HTML代码无需修改，只需调整JS代码，以下三种方法任选其一：

方法1：获取HTMLCollection的第一个元素

因为页面中只有一个card-body元素，直接取数组下标[0]拿到单个DOM元素：

const element = document.getElementsByClassName("card-body")[0];
const nodes = element.getElementsByTagName("input");
document.getElementById("total-inputs").innerHTML = nodes.length;

方法2：使用querySelector获取单个元素（推荐）

querySelector会直接返回第一个匹配选择器的DOM元素，语法更简洁：

const element = document.querySelector(".card-body");
const nodes = element.getElementsByTagName("input");
document.getElementById("total-inputs").innerHTML = nodes.length;

方法3：直接统计目标元素数量（一步到位）

如果仅需统计card-body下的input总数，可直接用querySelectorAll获取所有匹配元素并取长度：

const inputCount = document.querySelectorAll(".card-body input").length;
document.getElementById("total-inputs").innerHTML = inputCount;

内容的提问来源于stack exchange，提问作者windowpi