`

用原生JS获取CLASS对象

阅读更多

听说是最常用。。。。我是看了dom编程艺术想到的。 可以500%提高开发效率的前端UI框架!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    
<html xmlns="http://www.w3.org/1999/xhtml"> 
    
<head> 
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    
<title>无标题文档</title> 
    
<style> 
    
.ca{background-color:red; padding:20px;} 
    
.js{ border:1px solid #00F; padding:10px;} 
    
</style> 
    
</head> 
    
   
<body> 
    
<div class="ca"> 
    
sss 
    
</div> 
    
<div class="js" id="as"> 
    
</div> 
    
<div class="bd"> 
    
</div> 
    
<div class="ca"> 
    
</div> 
    
</body> 
    
</html> 
    
<script> 
    
function getElementsClass(classnames){  
var classobj= new Array();//定义数组 
    
var classint=0;//定义数组的下标 
    
var tags=document.getElementsByTagName("*");//获取HTML的所有标签 
    
for(var i in tags){//对标签进行遍历 
    
if(tags[i].nodeType==1){//判断节点类型 
    
if(tags[i].getAttribute("class") == classnames)//判断和需要CLASS名字相同的,并组成一个数组 
    
{ 
    
classobj[classint]=tags[i]; 
    
classint++; 
    
} 
    
} 
    
} 
    
return classobj;//返回组成的数组 
    
} 
    
   
//以下就是测试了 
    
var a=getElementsClass("ca"); 
    
a[0].onclick=function(){alert("我们来了");} 
    
a[1].innerHTML='我们来了'; 
    
</script>

 

 

有时候会有多个dom的class相同,可以这样处理: 可以500%提高开发效率的前端UI框架!

var a=getElementsClass("ca"); 
for(var i=0;i<a.length;i++){ 
(function(i){ 
alert(a[i]) 
})(i) 
}

  

 

 

如果有多个相同的class也可以一起用了,如果是想达到JQ哪里可以直接.click还需要做一些比较复杂的处理

0
0
分享到:
评论

相关推荐

    用原生JS获取CLASS对象(很简单实用)

    标题“用原生JS获取CLASS对象(很简单实用)”意味着我们将要探讨如何通过原生JavaScript代码实现获取页面上具有特定class的DOM元素对象,并进行进一步操作。 首先,我们来看如何定义一个函数`getElementsClass`,它...

    原生JS经典小项目-DOM练习

    在本项目"原生JS经典小项目-DOM练习"中,我们将深入探讨JavaScript与DOM(文档对象模型)的交互,这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口,它允许我们通过JavaScript来查找、修改和操作页面元素。在...

    dorea.js(原生JS日期选择)

    **标题解析:** "dorea.js" 是一个专门用于日期选择的JavaScript库,它完全基于原生JS编写,不依赖任何第三方库如jQuery。"原生JS日期选择"表明这个库的目标是为开发者提供一个轻量级且高效的解决方案,帮助他们在...

    原生js组件化展示全年日历实现

    1. **DOM操作**:原生JS中,我们需要使用`document`对象的API来操作HTML元素。例如,`getElementById`、`createElement`、`appendChild`等方法用于创建、查找和修改DOM节点,构建日历的结构。 2. **类与对象**:在...

    基于原生js的from表单验证插件

    本文将深入探讨“基于原生js的from表单验证插件”的核心概念、工作原理以及如何使用。 首先,表单验证的基本原理是检查用户在表单字段中输入的数据是否满足预定义的规则。这些规则可以包括但不限于:非空验证、电子...

    JavaScript通过HTML的class来获取HTML元素的方法总结

    除了getElementsByClassName()函数,我们可以自己动手编写程式来通过class获取元素,接下来我们整理了一下JavaScript通过HTML的class来获取HTML元素的方法总结,需要的朋友可以参考下

    javascript 原生tree

    本文将深入探讨如何使用纯JavaScript来创建、操作和渲染原生Tree。 1. 数据结构设计 首先,我们需要定义一个表示树节点的数据结构。通常,我们可以创建一个对象,包含以下属性: - id:唯一标识节点的标识符。 - ...

    js原生时间插件(带时分秒)

    总的来说,这个"js原生时间插件(带时分秒)"项目涵盖了JavaScript的基本知识,如DOM操作、事件处理、日期对象的使用,以及CSS样式和布局的设计。通过实践这样的项目,开发者可以深化对JavaScript的理解,提高创建...

    android原生与js互调

    在Android开发中,有时我们需要实现Android原生代码与JavaScript之间的交互,这主要涉及到Webview组件的使用和两者之间的通信机制。Webview是一个可以加载和显示网页的控件,它不仅能够展示HTML内容,还能让我们通过...

    JS获取Table中td值的方法

    本文将详细介绍如何使用JavaScript获取表格中td元素的值,并通过实例分析一些操作技巧。 首先,当需要获取表格中多个行的任意td值时,可以为每个td元素分配一个共同的class。这样做的好处是可以通过class来选取所有...

    原生JS+DIV实现手机信号强度

    3. **JavaScript逻辑**:通过JavaScript获取信号强度值,这通常需要模拟,因为我们没有实际的手机API。创建一个函数`updateSignalStrength`,接受信号强度作为参数,并根据值显示相应的信号格。 ```javascript ...

    android JS与原生的调用

    总结,Android中的JS与原生调用主要依赖`WebView`组件,通过JavaScript Interface、WebChromeClient、evaluateJavascript等方法实现交互。在实际开发中,我们需要权衡性能、安全性和功能需求,选择合适的方式来实现...

    原生js获取元素样式的简单方法

    现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来。 1、ele.style 在...

    jquery 库与原生javascript 常用方法

    例如,当需要执行性能敏感的操作时,可以考虑使用原生JavaScript方法代替jQuery。 总之,jQuery和原生JavaScript都是强大的工具,理解它们的相互关系和用法可以帮助开发者更好地应对各种Web开发挑战。

    原生js滑动图片轮播切换效果代码

    本主题探讨的是如何使用原生JavaScript实现一个图片轮播切换效果,而不是依赖于像jQuery这样的库。通过理解并实践这个代码示例,我们可以深入了解JavaScript在动态更新DOM(文档对象模型)以及创建交互式用户体验...

    js简易日历特效原生代码

    "js简易日历特效原生代码"的标题暗示了我们将探讨如何利用纯JavaScript实现一个基本的日历功能,无需依赖任何外部库,如jQuery或其他日期管理库。 首先,让我们了解JavaScript中的日期处理。JavaScript内置了一个`...

    原生JS实现单图多图上传预览,备详细注释

    在本文中,我们将深入探讨如何使用原生JavaScript实现单图和多图的上传预览功能。这个功能在现代Web开发中十分常见,特别是在涉及到用户交互和文件上传的场景下。我们将详细解析代码逻辑,理解各个部分的作用,并...

    根据标签名字和标签的class属性得到对象

    ### 根据标签名字和标签的class属性得到对象 在Web开发中,经常需要通过JavaScript来操作DOM(Document Object Model)元素。一个常见的需求就是根据指定的标签名和类名来获取页面中的DOM元素。本篇文章将详细介绍...

    原生js万年历农历日期代码.zip

    原生JavaScript可以与CSS结合,通过`style`属性或`classList`操作元素样式。 6. **模块化与封装**:高质量的代码通常会遵循模块化原则,将功能划分为独立的函数或组件。万年历代码可能包含了对日期计算、DOM操作等...

Global site tag (gtag.js) - Google Analytics