实现获取DOM中class的方法，可以使用原生JavaScript中的classList属性，也可以使用jQuery中的选择器方法。
使用原生JavaScript
- 获取DOM元素节点
javascript
var element = document.getElementById('elementId');
- 获取节点中的class列表
javascript
var classList = element.classList;
- 遍历class列表
javascript
for(var i=0; i<classList.length; i++){
console.log(classList[i]);
}
以上步骤可以合并为一行代码：
javascript
var classList = document.getElementById('elementId').classList;
使用jQuery
- 获取DOM元素节点
javascript
var $element = $('#elementId');
- 获取节点中的class列表
javascript
var classList = $element.attr('class').split(' ');
注意，获取的class列表是一个字符串，需要使用split方法将其分割成数组。
- 遍历class列表
javascript
for(var i=0; i<classList.length; i++){
console.log(classList[i]);
}
以上步骤可以合并为一行代码：
javascript
var classList = $('#elementId').attr('class').split(' ');
示例1
现在有一个HTML页面，其中有一个id为"div"的元素，其class属性值为"container-fluid col-md-4 col-lg-3"，需要打印出该元素的class列表中的所有class名称。
<body>
<div id="div" class="container-fluid col-md-4 col-lg-3"></div>
<script>
var classList = document.getElementById('div').classList;
for(var i=0; i<classList.length; i++){
console.log(classList[i]);
}
</script>
</body>
输出结果：
container-fluid
col-md-4
col-lg-3
示例2
现在有一个HTML页面，其中有多个class名称相同的元素，需要找到所有该class名称的元素，并打印出它们的id属性值。
<body>
<div id="div1" class="common-class"></div>
<div id="div2" class="common-class"></div>
<div id="div3" class="not-common-class"></div>
<script>
var $commonElements = $('.common-class');
for(var i=0; i<$commonElements.length; i++){
console.log($commonElements[i].id);
}
</script>
</body>
输出结果：
div1
div2
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现获取dom中class的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 