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
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.
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
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
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
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
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