欢迎光临
我们一直在努力

JavaScript | getElementByClassName详解

文章目录

由于在CSS不居中类名被广泛是使用,HTML5新增了getElementByClassName()方法,该方法可以通过类名获取元素,在JavaScript设置样式时非常方便。

基础

HTML元素的class属性值是一个以空格隔开的列表,可以为空,或包含多个标识符。在JavaScript中className属性用于保存HTML的class值。

getElementByClass方法接受一个参数,一个包含一个或多个类名的字符串,返回带有指定类的所有元素的类数组对象HTMLCollection。

当传入多个类名时,类名的先后顺序不重要,与getElementByTagName方法相似,此方法可以用于HTML文档对象和element元素对象。

注意:IE8-不知getElementByClassName()

<ul id="list">
    <li class="a ab c">1</li>
    <li class="a">2</li>
    <li class="ac">3</li>
    <li class="a b c">4</li>
    <li class="a b">5</li>
</ul>
<script>
//类名中存在a成立
Array.prototype.forEach.call(list.getElementsByClassName('a'),function(item,index,arr){
    item.style.fontWeight = 'bold';
});
//只有类名中同时存在a和c才成立
Array.prototype.forEach.call(list.getElementsByClassName('a c'),function(item,index,arr){
    item.style.color = 'red';
});
</script>

classList()属性

在操作类名时,需要通过className属性添加、删除和替换类名。因为className是一个字符串,所以即使只修改一个字符串,也需要每次都设置整个字符串的值。要从className字符串中删除一个类名,需要把类名拆开,删除不想要的那个,再重新拼成一个新的字符串。

HTML5为所有元素添加了classList属性,这个classList属性是心机和类型DOMTokenList的实例,它有一个表示自己包含多少元素的length属性,要获取每个元素可以通过.item()方法或方括号法。

注意:IE9浏览器不支持

<div id="test" class="a b c"></div>
<script>
console.log(test.classList);//["a", "b", "c", value: "a b c"]
console.log(test.classList[0]);//a
console.log(test.classList.item(1));//b
</script>

此外,这个新类型还定义如下方法:

add(value)             将给定的字符串值添加到列表中,如果值已存在,则不添加
contains(value)        表示列表中是否存在给定的值,如果存在则返回true,否则返回false
remove(value)          从列表中删除给定的字符串
toggle(value)          如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它

有了classList属性,className属性基本没有什么用武之地了

<style>
.cB{color: blue;}
</style>

<body>
<div id="test">测试文字</div>
<button id="btn1" onclick = "test.classList.add('cB')">add</button>
<button id="btn2" onclick = "test.classList.contains('cB')?alert(true):alert(false)">contains</button>
<button id="btn3" onclick = "test.classList.remove('cB')">remove</button>
<button id="btn4" onclick = "test.classList.toggle('cB')">toggle</button>
</body>

赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | getElementByClassName详解
分享到: 更多 (0)

评论 抢沙发

5 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏