为什么 getElementsByClassName（）不起作用？[复制]-解网

问：

querySelectorAll 和 getElementsBy* 方法返回什么？（12 个答案）

3个月前关闭。

我正在上 JavaScript 基础课，从第一分钟开始我就无法跟上。这种语言对我来说毫无意义。我得到 HTML 和 CSS，但 JS 对我来说是无稽之谈。

我试图在实践中练习和学习，但我什至无法通过第一行代码。这是我所拥有的：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buttons</title>
    <link rel="stylesheet" href="css/style.css">
    <script src = "js/jScript.js"></script>
    
</head>
    
<body>
  
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>

</body>
</html>

/* CSS SHEET */
@charset "UTF-8";
.btn{
    width: 10px;
    height: 40px;
    background: gray;
}

// JAVASCRIPT //

function btnStyle(){
    
    document.getElementsByClassName("btn").style.width="120px";
    
}

我所要做的就是将所有类为“btn”的按钮更改为 120px 的宽度。根据我有限的理解，这应该有效。我不想要其他方法来完成此操作。我想要解释为什么这不起作用。

JavaScript getElementsByClassName

好吧，问题是返回一个 HTML 集合，类似于数组，包含类为“btn”的所有元素。因此，当您尝试将样式直接应用于它时，它不起作用，因为您尝试将样式应用于一组 ellements，而不是单个元素。这有意义吗？document.getElementByClassName("btn")

0赞 DallogFheir 8/31/2023

另一个问题是 OP 从不在任何地方调用该函数。

4赞 Scott Marcus 8/31/2023

一个更大的问题是，你正在上课并学习过时的代码。返回一个“实时”节点列表，这可能会极大地损害性能。它不应该在几乎所有用例中使用，而应该使用。自 HTML、CSS 和 JavaScript 发明以来，作为一名 IT 教育工作者，我可以直接告诉你，有很多课程教授过时和非标准代码。.getElementsByClassName().querySelectorAll()

答：

2赞 Scott Marcus 8/31/2023 #1

如前所述，在使用元素集合时，除非深入研究该集合，否则无法访问元素的特定实例。这就像拥有一辆老爷车收藏，当你真的想改变一辆车的颜色时，说“把颜色改成蓝色”来指代这个收藏。

接下来，避免使用 .getElementsByClassName（）。这是一种 25+ 年前扫描 DOM 以查找匹配元素集合的方法，但它返回所谓的“实时节点列表”，并且会极大地损害性能。坦率地说，你为学习这个而学习的任何课程都不应该教这个API，你应该让你的教师知道他们正在教过时的东西。

请参阅下面的评论：

// Gather all the elements with a class of "btn" into a collection
// and loop over that collection, one element at a time
document.querySelectorAll(".btn").forEach(function(button){
  button.classList.add("width120"); // Apply a pre-existing style
});

@charset "UTF-8";
.btn{
    width: 10px;
    height: 40px;
    background: gray;
}

.width120 { width:120px; }

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buttons</title>
    <link rel="stylesheet" href="css/style.css">
    <script src = "js/jScript.js"></script>  
</head>
<body> 
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>
</body>
</html>

上一个：仅从列表中获取数字内容 HTML [重复]

下一个：能够通过XPATH搜索元素无法按CLASS_NAME或CSS_SELECTOR搜索元素

为什么 getElementsByClassName（） 不起作用？[复制]

Why does getElementsByClassName() not work? [duplicate]

评论

为什么 getElementsByClassName（）不起作用？[复制]