html中document.getElementsByClassName() 方法

最新推荐文章于 2024-04-29 23:01:06 发布

徊忆羽菲

最新推荐文章于 2024-04-29 23:01:06 发布

阅读量7.4k

点赞数

分类专栏： Html Javascript Jquery

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/114691442

版权

Html 同时被 3 个专栏收录

247 篇文章 7 订阅

订阅专栏

Javascript

230 篇文章 5 订阅

订阅专栏

Jquery

187 篇文章 1 订阅

订阅专栏

html中document.getElementsByClassName函数的使用方法

- 定义和使用
- 使用方法

定义和使用

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

提示：你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

使用方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
</head>
<body>

<ul class="qipa250">
  <li class="child">Coffee</li>
  <li class="child">Tea</li>
</ul>
<p>点击按钮修改第一个列表项的文本信息 (索引值为 0)。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
    var list = document.getElementsByClassName("qipa250")[0];
    list.getElementsByClassName("child")[0].innerHTML = "Milk";
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇葩天地网(qipa250.com)</title>
<style>
div {
    border: 1px solid black;
    margin: 5px;
}
</style>
</head>
<body>

<div id="qipa250DIV">
  <p class="child">div 元素中第一个 class="child" 的 p 元素 (索引值为 0).</p>
  <p class="child">div 元素中第二个 class="child" 的 p 元素 (索引值为 1).</p>
  <p class="child">div 元素中第三个 class="child" 的 p 元素 (索引值为 2).</p>
</div>
<p>点击按钮为 div 元素中第二个 class="child" 的 p 元素添加背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
    var x = document.getElementById("qipa250DIV");
    x.getElementsByClassName("child")[1].style.backgroundColor = "red";
}
</script>

</body>
</html>

徊忆羽菲

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
html中document.getElementsByClassName() 方法

html中document.getElementsByClassName函数的使用方法定义和使用使用方法定义和使用getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。提示：你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
复制链接

扫一扫