This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 9 years ago.
In this code:
<header class="alg">Some text</header>
<script>
var header = document.getElementsByClassName("alg");
header.style.color = 'red';
</script>
after run it. I got from log:
TypeError: header_m.style is undefined
What do I do wrong?
getElementsByClassName returns multiple elements.
Therefore, you are accessing it improperly. What you want, in this case, is:
header[0].style.color = 'red';
// ^ [0] will get the first element with the class,
// which is in this case your is header element. [1] would get the second, etc.
jsFiddle.
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I want to remove element with data-loc-id='2218'. How can I do this?
I tried this:
document.querySelectorAll(`[data-loc-id='2218']`).remove();
Error: Uncaught TypeError: document.querySelectorAll(...).remove is not a function
querySelectorAll() returns collection, you should loop through them and remove one by one:
document.querySelectorAll(`[data-loc-id='2218']`).forEach(el => el.remove());
OR: If you have single element with the attribute value then use querySelector() which returns the first matched element in the document:
document.querySelector(`[data-loc-id='2218']`).remove();
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
I want to assign the date to a variable I have tried with
var $x = document.getElementsByTagName("span").innerHtml but this assigns null value
You can get value with selector too.
document.querySelector("{SELECTOR}").innerHTML;
You can copy any selector with right click from Chrome Developer Console.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
There are a lot of similar questions and answers, but after trying all solutions I can't figure out what's wrong with my code.
Here is my code
var x = document.getElementsByClassName('xclass1 xclass2 xclass3');
console.log(x);
x.className += ' class4';
console.log(x);
console.log(x.className);
Here is what shows up in the first console.log:
[a.xclass1.xclass2.xclass3]
It shows that it finds the right element
Here is what shows up in the second console.log:
[a.xclass1.xclass2.xclass3, className: "undefined class4"]
And the third one returns this:
undefined class4
Can anyone please explain why className returns undefined? I am completely lost here
See below code snippet
return undefined because you trying to console class for array of object which include element not actual element.
var x = document.getElementsByClassName('xclass1 xclass2 xclass3');
console.log(x);
x[0].className += ' class4';
console.log(x);
console.log(x[0].className);
<div class="xclass1 xclass2 xclass3"></div>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
I am trying to make my own version of jQuery. I am using this code so far, to test my selectors:
js(".hide");
function js(selector){
var applyTo = document.querySelector(selector);
applyTo.style.color = 'red';
}
However, this does not work, and the error console said: Uncaught TypeError: Cannot read property 'style' of null
Why is applyTo null?
To make it not fail in case the selector doesn't get you any element:
function js(selector){
var applyTo = document.querySelector(selector);
if(applyTo) { applyTo.style.color = 'red'; }
}
Make sure it's called only after the DOM has loaded.
This question already has answers here:
document.getElementById vs jQuery $()
(13 answers)
Closed 9 years ago.
Can somebody explain to me what the difference is between these two examples:
var obj = getElementById("id1"); // without jQuery
var obj = $("#id1"); // with jQuery
Is the returned value in both cases the same object?
getElementById() returns a DOM element only, $("#id1") returns a jQuery object containing DOM element(s).