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

2024-12-15 16:42:01

听说是最常用。。。。我是看了dom编程艺术想到的。

<!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相同，可以这样处理：

代码如下:

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

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

通过Class类获取对象(实例讲解)

通过Class对象获取对象的方式是通过class.newInstance()方式获取,通过调用默认构造参数实例化一个对象. /** * Created by hunt on 2017/6/27. * 测试的实体类 * @Data 编译后会自动生成set.get.无惨构造.equals.canEqual.hashCode.toString方法 */ @Data public class Person { private String name; private int age; } /** * C
jQuery根据ID、CLASS、等获取对象的实例

在jquery中,你能够通过逗号,来分隔字符选择多个选择. 例如: $(.class1, .class2, #id1)在以上的例子中,将会选择含有类名为class1,和class2及id为1的所有元素. Jquery实例: 在以下的例子中,有类名为p1和类名为p2 和id 为div3 的所有元素将会动态的添加一个红色的边框. <html> <head> <title>select mutiple elements example</title> <sc
Java反射之通过反射获取一个对象的方法信息(实例代码)

以下代码为一个工具类 package com.imooc.reflect; import java.lang.reflect.Method; public class ClassUtil { public static void printClassMessage(Object obj){ //要获取类的信息,首先要获取类的类类型 Class c = obj.getClass();//传递的是哪个子类的对象,c就是该子类的类类型 //获取类的名称 System.out.println("类的名称
用原生JS获取CLASS对象(很简单实用)

听说是最常用....我是看了dom编程艺术想到的. <!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
原生js获取元素样式的简单方法

我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty
简单谈谈原生js的math对象

Math对象方法 //返回最大值 var max=Math.max(95,93,90,94,98); console.log(max); //返回最小值 var min=Math.min(95,93,90,94,98); console.log(min); //向上取整 console.log(Math.ceil(2.2)); console.log(Math.ceil(-2.2)); //向下取整 console.log(Math.floor(2.2));//2 console.log(Mat
原生JS获取URL链接参数的几种常见方法

前言作为一个前端开发,我们很多时候都需要对URL进行操作和处理,最常见的一种就是获取URL链接中携带的参数值了.使用框架开发的小伙伴可能会觉得这很简单,因为框架提供了很多方法让我们方便的获取URL链接携带的参数.但是有些时候我们不能依赖框架,需要我们使用原生JS去获取参数,这也是面试中经常遇到的一道题.今天我们就手撕代码,利用原生JS去获取URL链接参数值. 1. 获取方式总结利用原生JS获取URL链接参数的方法也有好几种,今天我们依次来讲解常见的几种: 通过正则匹配的方式利用a标签内置方
原生js获取宽高与jquery获取宽高的方法关系对比

说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> 在原生JS中表示DOM对象:在JQuery中表示JQuery对象 Width -> obj.style.width OffsetWidth -> obj.offsetWidth $width -> obj.width() $innerWidth -> obj.innerWidth() $
原生js获取left值和top值的三种方法

在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值.比如做一个碰撞广告,就要不停的获取元素的top和left属性值. 需要注意的事:取值的元素必须要设置position:absolute绝对定位属性,才能取的到left值. 第一种方法,比较简单,就是直接通过obj.style.left和obj.style.top,但是有局限性,这种获取的方法只能获取到行内样式的left和top的属性值,不能获取到style标签和link 外部引用的left和top属性值. 第二种方法只读
原生js实现复制对象、扩展对象类似jquery中的extend()方法

jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对
关于原生js中bind函数的简单实现

今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new Typ
原生JS获取元素的位置与尺寸实现方法

1.内高度.内宽度: 内边距 + 内容框 clientWidth clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 offsetWidth offsetHeight 3.上边框.左边框 clientTop clientLeft 4.元素的大小及其相对于视口的位置 getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离 //width/height:边框 + 内边距 + 内容框 //top:元素的上边界和父元素上边界的距离 //le
原生js实现ajax方法(超简单)

上一篇文章写到原生js取代jquery的一些常用函数:原生js仿jquery一些常用方法,那么,ajax如何实现呢?如下是一个比较完整的ajax() function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true", data:arguments[0].d

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

相关推荐

随机推荐