How to get element by class name?
The name of the DOM function is actually getElementsByClassName
, not getElementByClassName
, simply because more than one element on the page can have the same class, hence: Elements
.
The return value of this will be a NodeList instance, or a superset of the NodeList
(FF, for instance returns an instance of HTMLCollection
). At any rate: the return value is an array-like object:
var y = document.getElementsByClassName('foo');
var aNode = y[0];
If, for some reason you need the return object as an array, you can do that easily, because of its magic length property:
var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);
As yckart suggested querySelector('.foo')
and querySelectorAll('.foo')
would be preferable, though, as they are, indeed, better supported (93.99% vs 87.24%), according to caniuse.com:
- querySelector(all)
- getElementsByClassName
- Don't use w3schools to learn something
- Refer to MDN for accurate information
Javascript: How to get only one element by class name?
document.getElementsByClassName('className')
would always return multiple elements because conceptually Classes are meant to be applied to multiple elements. If you want only the first element in the DOM with that class, you can select the first element out of the array-like HTMLCollection
returned.
var elements = document.getElementsByClassName('className');
var requiredElement = elements[0];
Else, if you really want to select only one element. Then you need to use 'id' as conceptually it is used as an identifier for unique elements in a Web Page.
// HTML
<div id="myElement"></div>
// JS
var requiredElement = document.getElementById('myElement');
get second element by class name if it exists
Try this:
const elements = document.querySelectorAll('.test');
if (elements[1]) { elements[1].innerText = 'Hithere';}
<div class="test">hi</div><div class="test">hi</div><div class="test">hi</div>
How can I get element by ClassName with starts with a certain string?
Try the following:
var x = window.document.querySelectorAll("*[class^=\"width-48 height-48 profile_view_img\"]")[0]
var className = x.className;
JSFiddle.
Get elements by class name in a certain div through Javascript
You can use the element[property*="val"]
to select all elements
with property
beginning with "val"
- in this case, any class
that starts with "f"
, and then select their .input-text
children.
Also, you're trying to get elements with id f0
, when these divs are marked with class f0
.
const inputs = document.querySelectorAll('[class*="f"] .input-text');for (const element of inputs) console.log(element.textContent.trim());
<div class="f0"> <div class="input-text"> inside f0 </div></div><div class="f1"> <div class="input-text"> inside f1 </div></div>
How to get element by class name
You are missing an s
in your function name. getElementsByTagName
returns a collection of elements, of elements, which you need to iterate over:
var elements = document.getElementsByClassName("classname");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = 'foo';
}
IE8 and below don't support getElementsByClassName
, so you'll have to find a polyfill or use querySelectorAll
(IE8).
Related Topics
Difference Between Settimeout with and Without Quotes and Parentheses
How to Replace While Loops with a Functional Programming Alternative Without Tail Call Optimization
How to Write a Named Arrow Function in Es2015
What Does "This" Mean in Jquery
Group Objects by Multiple Properties in Array Then Sum Up Their Values
Sorting a JavaScript Object by Property Name
Why Does a While Loop Block the Event Loop
How to Set Focus on an Input Field After Rendering
How to Draw Smooth Curve Through N Points Using JavaScript HTML5 Canvas
Binding Arrow Keys in Js/Jquery
Replace Multiple Characters in One Replace Call
How to Run Gulp Tasks Sequentially One After the Other
JavaScript Scroll Event for Iphone/Ipad
Declaring Multiple Variables in JavaScript
Emberjs: How to Load Multiple Models on the Same Route