Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Obtain CLASS object using native JS (very simple and practical)_javascript skills

Obtain CLASS object using native JS (very simple and practical)_javascript skills

WBOY
Release： 2016-05-16 16:33:52
Original
2204 people have browsed it

I heard it is the most commonly used. . . . I came up with this idea after watching The Art of DOM Programming. 

<!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>
Copy after login

Sometimes there are multiple doms with the same class, which can be handled like this:

Copy code The code is as follows:

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

If there are multiple identical classes, they can be used together. If you want to reach JQ, where can you click directly? You also need to do some more complicated processing
Related labels：
Native js
source：php.cn
Previous article：Introduction to the programming language JavaScript_javascript skills Next article：Dynamically create an html DOM element and display it through JS_javascript tips
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
Generate default values ​​and CSS variables using SCSS I'm implementing website styling. For legacy support reasons, I need to support IE11, at l...
From 2024-04-06 17:46:54
0
1
355
Generating content using Ajax - scrolling to Id doesn't work I generate page content based on data obtained via ajax. The problem I'm having is that wh...
From 2024-04-04 09:29:39
0
1
397
The question is still the same, but the title is rewritten as follows: My Javascript random function fails to generate valid responses I'm making a simple random number generator game using JS and HTML. In this game you can s...
From 2024-04-03 22:03:14
0
1
275
ReactJs: My parent array gets updated after using map function I'm trying to insert new keys into an array that are basically extracted from the parent a...
From 2024-04-03 20:04:17
0
1
352
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template