JavaScript getElementByclassName使用方法,JavaScript getElementByclassName踩坑

时间：2024-03-04 12:42 分类：技术分享

操纵getElementByclassName（）要领，操纵指定的calss属性值(名称)返回当前文档中整个关系元素的召集(节点列表工具)。

节点列表工具代表了搜集到的整个相症结点，可以操纵序列号(index)拜访节点列表，index的值从0开始。

注：操纵节点列表工具的length属性获取雷同特定class属性值的元素的数目，然后依照索引值获取想要的元素关系信息。

倘使不存在指定的id属性时，返回NULL

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML DOM</title>
</head>
<body>
<div class="exp">第一个class属性值为exp的div元素.</div>
<div class="exp">第二个class属性值为exp的div元素.</div>
<div class="exp">第三个class属性值为exp的div元素.</div>
<p>点击以下按钮，改动第一个div元素的内容</p>
<button onclick="myFc()">按钮</button>
<p><strong>注:</strong> IE8及之前阅读器不赞同getElementsByClassName()要领</p>
<script>
function myFc() {
var x = document.getElementsByClassName("exp");
x[0].innerHTML = "嘿，你好！";
}
</script>
</body>
</html>

过失示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML DOM</title>
</head>
<body>
<div class="exp">第一个class属性值为exp的div元素.</div>
<div class="exp">第二个class属性值为exp的div元素.</div>
<div class="exp">第三个class属性值为exp的div元素.</div>
<p>点击以下按钮，改动第一个div元素的内容</p>
<button onclick="myFc()">按钮</button>
<p><strong>注:</strong> IE8及之前阅读器不赞同getElementsByClassName()要领</p>
<script>
function myFc() {
var x = document.getElementsByClassName("exp");
x.innerHTML = "嘿，你好！";
}
</script>
</body>
</html>

声明：

1、本博客不从事任何主机及服务器租赁业务，不参与任何交易，也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动，信息均摘自网络或来自服务商主动提供；所以对本博客提及的内容不作直接、间接、法定、约定的保证，博客内容也不具备任何参考价值及引导作用，访问者需自行甄别。

2、访问本博客请务必遵守有关互联网的相关法律、规定与规则；不能利用本博客所提及的内容从事任何违法、违规操作；否则造成的一切后果由访问者自行承担。

3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。

4、一旦您访问本博客，即表示您已经知晓并接受了以上声明通告。

本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。

JavaScript getElementByclassName使用方法,JavaScript getElementByclassName踩坑

你可能还喜欢这些内容：