HTML通过类名查找HTML元素

原创

于 2021-04-03 23:43:08 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #dom

当需要在HTML页面中操作多个性质相同的元素时，使用类名而非ID更灵活。例如，通过添加类名'fruit'给多个元素，可以使用JavaScript的getElementsByClassName方法获取这些元素的集合。通过索引，如x[0]或x[2]，可以方便地获取或修改特定位置的元素内容，简化需求变更时的代码调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假设页面中有很多性质一样的元素，如果通过ID获取这些元素的值非常麻烦，类名是一个不错的想法

看以下例子：

--------------------------------------------------

<!DOCTYPE html>
<html>
<body>

<h1>通过类名查找 HTML 元素</h1>

<p>apple</p>
<p>orange</p>
<p>banana</p>

<p>当我想显示第1个水果时：</p>
<p id="demo"></p>

</html>

--------------------------------------------------

在这里，我希望能够自动显示出第1个水果，也就是apple这个元素中的值，我们可以给apple加一个ID apple，然后用以下Script语句获取元素：

var y = document.getElementById("apple");
document.getElementById("demo").innerHTML = y.innerHTML;

可是，当需求改变，需要展示其他第N个水果。就还需要再去给N加ID，。

类的做法是，先把他们都加个类名：

<p class = 'fruit'>apple</p>
<p class = 'fruit'>orange</p>
<p class = 'fruit'>banana</p>

然后Script这么写：

<script>
var x = document.getElementsByClassName("fruit")

最低0.47元/天解锁文章

200万优质内容无限畅学