getelementsbyclassname

How to getElementByClass instead of GetElementById with JavaScript?

January 6, 2023 by Tarik

The getElementsByClassName method is now natively supported by the most recent versions of Firefox, Safari, Chrome, IE and Opera, you could make a function to check if a native implementation is available, otherwise use the Dustin Diaz method: function getElementsByClassName(node,classname) { if (node.getElementsByClassName) { // use native implementation if available return node.getElementsByClassName(classname); } else { … Read more

How to remove a class from elements in pure JavaScript?

January 3, 2023 by Tarik

var elems = document.querySelectorAll(“.widget.hover”); [].forEach.call(elems, function(el) { el.classList.remove(“hover”); }); You can patch .classList into IE9. Otherwise, you’ll need to modify the .className. var elems = document.querySelectorAll(“.widget.hover”); [].forEach.call(elems, function(el) { el.className = el.className.replace(/\bhover\b/, “”); }); The .forEach() also needs a patch for IE8, but that’s pretty common anyway.

Get element inside element by class and ID – JavaScript

October 20, 2022 by Tarik

Well, first you need to select the elements with a function like getElementById. var targetDiv = document.getElementById(“foo”).getElementsByClassName(“bar”)[0]; getElementById only returns one node, but getElementsByClassName returns a node list. Since there is only one element with that class name (as far as I can tell), you can just get the first one (that’s what the [0] … Read more

What do querySelectorAll and getElementsBy* methods return?

October 20, 2022 by Tarik

Your getElementById code works since IDs have to be unique and thus the function always returns exactly one element (or null if none was found). However, the methods getElementsByClassName, getElementsByName, getElementsByTagName, and getElementsByTagNameNS return an iterable collection of elements. The method names provide the hint: getElement implies singular, whereas getElements implies plural. The method querySelector … Read more

Iterating over result of getElementsByClassName using Array.forEach

September 24, 2022 by Tarik

No, it’s not an array. As specified in DOM4, it’s an HTMLCollection (in modern browsers, at least. Older browsers returned a NodeList). In all modern browsers (pretty much anything other IE <= 8), you can call Array’s forEach method, passing it the list of elements (be it HTMLCollection or NodeList) as the this value: var … Read more