Finding elements by their class name using `getElementsByClassName` method in

Question

Finding elements by their class name using `getElementsByClassName` method in

I am attempting to retrieve elements with the class name "special". I came across this code snippet online, but unfortunately, it only gives back an empty array.

Can anyone spot what may be going wrong?

getElementsByClassName = function (node, classname){
 var a = [],
    re = new RegExp('\b' + classname + '\b'),
    els = node.getElementsByTagName("*"),
    l = els.length,
    i;

 for (i = 0; i < l; i += 1) {
  if (re.test(els[i].className)) {
      a.push(els[i]);
  }
 }
 console.log(a)
 return a;
}

var wrap = document.getElementById('wrap');
getElementsByClassName(wrap, 'special')

The wrap element has 22 children, with the last one being

<p class="special">Lorem</p>

. In Firebug, I can locate the node with the correct class name, but for some reason, it skips the a.push. I'm at a loss here!

edit: After some further debugging, it seems that the code is working now; however, it would still be helpful to understand why console.log(a) was initially returning an empty array

javascript regex

Answer 1

Answer №1

let regex = new RegExp('\b' + className + '\b')

It is recommended to write it as:

let regex = new RegExp('\\b' + className + '\\b')

Additionally, remember to use "var " at the start of variable declarations.

Answer 2

let regex = new RegExp('\b' + className + '\b')

It is recommended to write it as:

let regex = new RegExp('\\b' + className + '\\b')

Additionally, remember to use "var " at the start of variable declarations.

Answer 3

Answer №2

let regExp = new RegExp('\b' + className + '\b'),

The use of \b in a string literal signifies a backspace character. The corrected expression should be:

let regExp= new RegExp('\\b' + className + '\\b');

Nevertheless, there are still issues with this implementation because:

It will fail with class names that contain non-ASCII or non-alphanumeric characters due to incorrect word boundaries;
Class names may include special regex characters like ., which must be escaped.

An alternative approach that aligns better with the standard document.getElementsByClassName functionality can be found in this related query.

Answer 4

let regExp = new RegExp('\b' + className + '\b'),

The use of \b in a string literal signifies a backspace character. The corrected expression should be:

let regExp= new RegExp('\\b' + className + '\\b');

Nevertheless, there are still issues with this implementation because:

It will fail with class names that contain non-ASCII or non-alphanumeric characters due to incorrect word boundaries;
Class names may include special regex characters like ., which must be escaped.

An alternative approach that aligns better with the standard document.getElementsByClassName functionality can be found in this related query.

Answer 5

Answer №3

It's possible I am incorrect, but it seems like the re.test(els[i].className) will not account for the \b word boundaries, causing the regex to fail.

This means that you are simply checking for the presence of "special" without any surrounding spaces, quotes, or other boundary characters.

Answer 6

It's possible I am incorrect, but it seems like the re.test(els[i].className) will not account for the \b word boundaries, causing the regex to fail.

This means that you are simply checking for the presence of "special" without any surrounding spaces, quotes, or other boundary characters.

Answer 7

Answer №4

To resolve this issue, you can try the following code snippet:

els = document.all ? node.all : node.getElementsByTagName("*")

I cannot recall exactly which versions of Internet Explorer do not support node.getElementsByTagName('*'), but it is certain that it will fail in certain versions. It mistakenly searches for nodes with tagNames of asterisks!

In my previous experience, I have used the following code to handle this situation:

function getElementsByTagName(node, tag) {
    tag = tag || '*';
    var els = node.getElementsByTagName(tag);
    if( !els.length && (tag == '*' && node.all) ) els = node.all;
}

Answer 8

To resolve this issue, you can try the following code snippet:

els = document.all ? node.all : node.getElementsByTagName("*")

I cannot recall exactly which versions of Internet Explorer do not support node.getElementsByTagName('*'), but it is certain that it will fail in certain versions. It mistakenly searches for nodes with tagNames of asterisks!

In my previous experience, I have used the following code to handle this situation:

function getElementsByTagName(node, tag) {
    tag = tag || '*';
    var els = node.getElementsByTagName(tag);
    if( !els.length && (tag == '*' && node.all) ) els = node.all;
}

Finding elements by their class name using `getElementsByClassName` method in

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

There seems to be an issue with the integration of Bootstrap in my JavaScript file

invoking a function at a designated interval

When the tabBar is hidden on a particular screen, a gray area is shown at the bottom of the page in the Expo app

What is causing the recursion function to return "NaN" in this scenario?

CSS media query to target specific viewport width

"Unveiling the Benefits of Converting Body to JSON String and Object in Angular 7

Having trouble with loading textures in Three.js?

Error encountered: The initMap function from the React Google Maps API is not recognized. No relevant

Is there a way to make a <div> load automatically when the page starts loading?

Leveraging mongo-triggers for automation

The middleware for express body-parser stores information in the "name" property

Converting a CSV string into an array only when there is a line break in the body

Error: Jasmine is unable to find the module that is being referenced

Retrieve the user's IP address from the request rather than Cloudflare's IP address

What is the best way to perform a redirect in Node.js and Express.js following a user's successful login

Loading gltf files with Three.js does not automatically update external variables

Getting EdgesHelper to align properly with Mesh in Three.js

The Javascript toggle for hiding and showing did not function as expected

Fiddler is indicating that my JavaScript file cannot be found, despite the fact that it is present and functioning correctly as anticipated

Using jQuery's AJAX function to send a POST request and extracting data from the response