This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I've simple javascript to get it's child element with the getElementsByClassName but it's not working:
var parent = document.getElementsByClassName('parent');
var child = parent.getElementsByClassName('child');
child.style.color='red';
I've tried a lot and searched to get it but some answers with for loop I've found but I wanted to do it without loop. How can I do this?
You can get the complete node list in one step
var children = document.querySelectorAll(".parent .child");
But then you'll have to loop over that node list.
If you are really interested in only the first one, then you can do
document.querySelector(".parent .child").style.color = 'red';
Try this:
var parent = document.getElementsByClassName('parent');
for(var i=0;i<parent.length;i++){
var child = parent[i].getElementsByClassName('child');
for(var j=0;j<child.length;j++){
child[j].style.color='red';
}
}
document.getElementsByClassName() return the collection. So you have to apply indexing or looping.
Multiple elements can be members of the same class. That is the point of classes.
In getElementsByClassName the word elements is plural. It returns a NodeList, not a single Element.
You can treat it much like an array. You have to loop over each of the nodes that it returns or assume that it will only return one match and use [0].
Related
This question already has an answer here:
How can I iterate through an Elements child nodes using Javascript?
(1 answer)
Closed 4 years ago.
So lets say I have an element that contains this:
How would I be able to run through all these children in javascript?
Use querySelectorAll (which can be directly iterated over, unlike the HTMLCollection methods):
document.querySelectorAll('table.table').forEach(table => {
// do something with each table
});
To iterate over tables seems not useful but here it is. Note I am using the class name for your tables above to find each one. If your example had different classes for each table this would not work.
var tables = document.getElementsByClassName("table");
var arr = new Array();
for (i = 0; i < tables .length; i++) {
//do what you want here
}
If you want to work with the rows and cells within a table you might want to refer to this solution.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
I have looked around and I haven't really been able to find anything that solves my problem. There is a post using buttons but I can't seem to modify it for my needs.
I am trying to use only one event listener for multiple selects. I'd like to return the id of the select, and the value selected but as far as I can figure I either need to use document.getElementById("ID").addEventListener('change',func(),true) for each id or document.getElementsByTagName('select').addEventListener('change', func(), true) and I get an error that says:
selection.addEventListener is not a function. (In 'selection.addEventListener('change', func(), true)', 'selection.addEventListener' is undefined)
I was hoping someone could take a moment and show me where I am going wrong or if I need to use a different method to accomplish my task.
thanks for the help
The method getElementsByTagName returns HTMLCollection of elements, and not a DOM Element, so you can't use addEventListener on that.
What you can do is go over all the elements in the HTMLCollection and add the event you want to them:
let selectElements = document.getElementsByTagName('select');
Array.prototype.forEach.call(selectElements, function(el) {
eladdEventListener('change', func(), true)
})
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
I'm doing some code, where i want to get the value of an input text introduced by the user
Get the value
var inputTextValue = document.getElementsByClassName("something");
alert("inputTextValue.value);
Creation of the input text
function createHour(){
var hour = document.createElement("INPUT");
hour.id = "something";
defineButtonHour(hour);
//after: -code to append to div
}
function defineHour(hour) {
hour.className = "something";
}
The alert just print undefined.
getElementsByClassName returns an array with all the elements that match the class, you need to iterate over the array, or access the one that you want by providing an index"
alert(inputTextValue[0].value);
also theres an extra semicolon in your alert that shouldnt be there
var inputTextValue = document.getElementsByClassName("something");
Returns a nodelist of all the nodes with the class something. A nodelist is kind of an array. you can write:
var inputTextValue = document.getElementsByClassName("something")[0];
If you can guarantee there will be at least one and you only want one.
Also, your alert has a quote where it doesn't need one:
alert(inputTextValue.value);
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 7 years ago.
document.getElementById("myId").style.left = 100px;
Is there a SHORT way to use the code above to a class?
Will the code below work?
doucment.getElementsByClassName("myClass").style.left = 100px;
What I wanted to do was to move multiple images to the same place and it should be flexible so that it would work if the user wanted 1, 2, 3 or more images to move to that place.
The getElementsByClassName() function returns a NodeList, so you'll need to iterate over it and apply the style to each element in turn. That's relatively easy to do using forEach, but you need to convert to an Array first:
Array.prototype.slice.call(document.getElementsByClassName("myClass")).forEach(function(elem,index) {
elem.style.left = 100px;
});
Yes, but getElementsByClassName returns an array-like object (an HTMLCollection), so you need to specify the element(s) you want to apply the change to. For example:
document.getElementsByClassName("myClass")[0].style.left = 100px;
Would be applied to the first element with that class. Otherwise you need to loop over the set.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I am trying to access the width of a div to put in a cookie. This is the div:
<div class="tab_panel" style="width:600px">
It is the only div with this class name. It is not an option to specify a unique id for the div. This is the code I have been using in an event to call it but it gives an error:
document.getElementsByClassName(tab_panel).style.width
I know Firefox supports getElementsByClassName, so what am I doing wrong?
It's a string:
document.getElementsByClassName("tab_panel")[0].style.width
Bye
P.S. It's an array
document.getElementsByClassName("tab_panel") returns a collection of nodes, the first of which is referred to by document.getElementsByClassName("tab_panel")[0].
If the node you are searching does not have an inline style="width:' assignment, an empty string is returned from document.getElementsByClassName("tab_panel")[0].style.width.
Missing quotes:
document.getElementsByClassName('tab_panel').....
You should iterate over all elements like this:
var elms = document.getElementsByClassName('tab_panel');
for(var i = 0 ; i < elms.length; i++)
{
alert(elms[i].style.width);
}
Try saying:
document.getElementsByClassName("tab_panel")