With this function an array of elements is returned which are of the class specified. There are two further optional parameters which enable you to filter the array by tag name or only those contained within a specified parent element.
function getElementsByClass(getClass,tag,node)
{
// Set optional defaults
if (tag == null)
tag = '*';
if (node == null)
node = document;
// Load constants
const allElements2 = document.getElementsByTagName('*');
const allElements = node.getElementsByTagName(tag);
const elements = new Array();
const pattern = new RegExp("(^|\\s)"+getClass+"(\\s|$)");
// Loop allElements
var e = 0;
for (var i=0; i<allElements.length; i++)
{
if (pattern.test(allElements[i].className) ) {
elements[e] = allElements[i];
e++;
}
}
// Return elemnts array
return elements;
}
{
// Set optional defaults
if (tag == null)
tag = '*';
if (node == null)
node = document;
// Load constants
const allElements2 = document.getElementsByTagName('*');
const allElements = node.getElementsByTagName(tag);
const elements = new Array();
const pattern = new RegExp("(^|\\s)"+getClass+"(\\s|$)");
// Loop allElements
var e = 0;
for (var i=0; i<allElements.length; i++)
{
if (pattern.test(allElements[i].className) ) {
elements[e] = allElements[i];
e++;
}
}
// Return elemnts array
return elements;
}
Parameters:
- getClass: the specified class to select. (Called getClass rather than class due to reserved words in IE)
- tag: Optional parameter to filter the returned elements by tag.
- node: Optional parameter to filter returned elements to child elements of this parent.
Use this test page to test the function and syntax for calling it.
<html>
<head>
<script>
function getElementsByClass(getClass,tag,node)
{
// Set optional defaults
if (tag == null)
tag = '*';
if (node == null)
node = document;
// Load constants
const allElements2 = document.getElementsByTagName('*');
const allElements = node.getElementsByTagName(tag);
const elements = new Array();
const pattern = new RegExp("(^|\\s)"+getClass+"(\\s|$)");
// Loop allElements
var e = 0;
for (var i=0; i<allElements.length; i++)
{
if (pattern.test(allElements[i].className) ) {
elements[e] = allElements[i];
e++;
}
}
// Return elemnts array
return elements;
}
function alertIdForClass(c,n,t)
{
var e;
if(n)
e = getElementsByClass(c,t,document.getElementById(n));
else
e = getElementsByClass(c,t);
for(var i=0; i<e.length; i++)
alert(e[i].id);
}
</script>
</head>
<body>
<h1>Get Element By Class Test</h1>
<div id="d1" class="c1">
<div id="d2" class="c1">
<span id="s1" class="c1"></span>
<span id="s2" class="c2"></span>
<span id="s3" class="c2"></span>
</div>
</div>
<pre>
<div id="d1" class="c1">
<div id="d2" class="c1">
<span id="s1" class="c1"></span>
<span id="s2" class="c2"></span>
<span id="s3" class="c2"></span>
</div>
</div>
</pre>
<input type="button" value="Class 'c1'" onClick="alertIdForClass('c1');"/><br/><br/>
<input type="button" value="Class 'c1' within Element 'd1'" onClick="alertIdForClass('c1','d1');"/><br/><br/>
<input type="button" value="Class 'c1' within Element 'd1' With 'div' Tag" onClick="alertIdForClass('c1','d1','div');"/><br/><br/>
<input type="button" value="Class 'c2'" onClick="alertIdForClass('c2');"/><br/><br/>
</body>
</html>
<head>
<script>
function getElementsByClass(getClass,tag,node)
{
// Set optional defaults
if (tag == null)
tag = '*';
if (node == null)
node = document;
// Load constants
const allElements2 = document.getElementsByTagName('*');
const allElements = node.getElementsByTagName(tag);
const elements = new Array();
const pattern = new RegExp("(^|\\s)"+getClass+"(\\s|$)");
// Loop allElements
var e = 0;
for (var i=0; i<allElements.length; i++)
{
if (pattern.test(allElements[i].className) ) {
elements[e] = allElements[i];
e++;
}
}
// Return elemnts array
return elements;
}
function alertIdForClass(c,n,t)
{
var e;
if(n)
e = getElementsByClass(c,t,document.getElementById(n));
else
e = getElementsByClass(c,t);
for(var i=0; i<e.length; i++)
alert(e[i].id);
}
</script>
</head>
<body>
<h1>Get Element By Class Test</h1>
<div id="d1" class="c1">
<div id="d2" class="c1">
<span id="s1" class="c1"></span>
<span id="s2" class="c2"></span>
<span id="s3" class="c2"></span>
</div>
</div>
<pre>
<div id="d1" class="c1">
<div id="d2" class="c1">
<span id="s1" class="c1"></span>
<span id="s2" class="c2"></span>
<span id="s3" class="c2"></span>
</div>
</div>
</pre>
<input type="button" value="Class 'c1'" onClick="alertIdForClass('c1');"/><br/><br/>
<input type="button" value="Class 'c1' within Element 'd1'" onClick="alertIdForClass('c1','d1');"/><br/><br/>
<input type="button" value="Class 'c1' within Element 'd1' With 'div' Tag" onClick="alertIdForClass('c1','d1','div');"/><br/><br/>
<input type="button" value="Class 'c2'" onClick="alertIdForClass('c2');"/><br/><br/>
</body>
</html>
ElementsByClass...Got
Posts
1 comment:
thank for sharing.
I used it for my code :D
Post a Comment