Get element inside element by class and ID – JavaScript

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

How to remove a class from elements in pure JavaScript?

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.

How to use getElementsByClassName in javascript-function? [duplicate]

getElementsByClassName() returns a nodeList HTMLCollection*. You are trying to operate directly on the result; you need to iterate through the results. function change_boxes() { var boxes = document.getElementsByClassName(‘boxes’), i = boxes.length; while(i–) { boxes[i].style.backgroundColor = “green”; } } * updated to reflect change in interface

Strange behavior when iterating over HTMLCollection from getElementsByClassName

What’s going on is an odd side effect. When you reassign className for each element of elements, the element gets removed from the array! (Actually, as @ user2428118 points out, elements is an array-like object, not an array. See this thread for the difference.) This is because it no longer has the classOne class name. … Read more

How to getElementByClass instead of GetElementById with JavaScript?

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

What do querySelectorAll and getElementsBy* methods return?

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