原生js判断某个元素是否有指定的class名的几种方法【转】
2023-09-27 14:25:31 时间
【注意】以下方法只对class只有一个值的情况下操作
结构部分:
<div>
<p>1</p>
<p class="test">2</p>
<p>3</p>
</div>
js部分:
var p = document.getElementsByTagName('p');
for(var i = 0;i <p.length;i++){
//第一种方法,用classList这个H5 API,有兼容性问题
if(p[i].classList.contains('test')==true){
console.log(p[i].innerHTML);
}
//第二种方法,用className这个属性
if(p[i].className=='test'){
console.log(p[i].innerHTML)
}
//第三种方法,用getAttribute()这个方法
if(p[i].getAttribute("class")=='test'){
console.log(p[i].innerHTML);
}
}
以上三种可以任选,条件是不考虑兼容性和多个class名的情况
来源:https://www.cnblogs.com/h5c3/p/5786059.html
相关文章
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- js代码从页面移植到文件里失效或js代码改动后不起作用的解决的方法
- 【CSS进阶】原生JS getComputedStyle等方法解析
- aspx文件中调试JavaScript的一种极有效的设置方法(终于js能调试了!)
- 在使用Cocos2d-JS 开发过程中需要用到的单体设计模式
- 04Vue - Vue.js 入门(用组件构建应用)
- Node.js Undocumented(2)
- 页面正在载入js
- js判断数字、整数、字符串、布尔,特殊方法
- JS-HTML DOM remove() 方法
- 【HarmonyOS】【ArkUI】研究了半天,鸿蒙 JS实现饼状图终于成功啦!
- JS自动填写分号导致的坑
- js跨域问题 常见的集中解决方案
- 《Node.js入门经典》一第 2 章 npm(Node包管理器)2.1 npm是什么
- js--调试常用语句
- webpack4+(ES6语法转化、处理JS语法及校验、全局变量引入)
- JS的type类型为 text/template
- js中设置元素class的三种方法小结
- JS 工具函数 方法(其中js的crc32和php的crc32区别)
- [js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展camelize与dasherize方法(3)
- js判断移动端是否安装某软软件,安装直接打开相应的链接,否则跳转到下载商店方法
- js关于对象键值为数字型时输出的对象自动排序问题的解决方法
- 浅析JS中的BigInt类型及其使用方法与注意事项
- 鸿蒙-webview的使用和JS交互(附源码)
- Three 之 three.js (webgl)性能优化、提高帧率的思路/方向整理
- Three 之 three.js (webgl) 中实现简单热力图的方法简单整理
- 原生js源码之Array数组reverse方法
- js判断手机是的操作系统
- vue的响应式都用它来实现,js中强大的Object.defineProperty()方法