Why does getElementById not work on elements inside the document element?
Container IDs should be unique, so there's no reason to find an object by ID within another container. This is why you only need document.getElementById
to access any element by its ID, whereas when you are searching by class or tag name, you might want to only search within a specific container, which is why you can do x.getElementsByClassName
etc.
Why getElementById does not work on elements other than document?
getElementById
is a method of document
, not of document.body
. The same goes for getElementsByName
.
On the other hand, getElementByTagName
and getElementByClassName
can be called on any element including body
.
document.getElementById not behaving as expected
A <template>
's children don't get rendered - they aren't really on the page. As MDN says:
Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the
<template>
element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.
It doesn't have children in the DOM.
console.log(document.querySelector('template').children.length);
<template>
<p>foo</p>
</template>
unable to use getElementById on HTML element not yet appended to document
From MDN documentation for Document.getElementsByClassName
:
- getElementsByClassName can be called on any element, not only on the document. The element on which it is called will be used as the root of the search.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Document.getElementById
does not have that note: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
The difference is that getElementsByClassName
seems to be inherited by NodeList
s from Document
whereas getElementById
is not. The reason I assume is that getElementsByClassName
returns what it is working on , which is a NodeList
or HTMLCollection
, thus allowing for chainability; whereas getElementById
will always return zero or one Node
s or HTMLElement
s.
document.getElementById not working?
Element doesn't have getElementById
method, document
has,
so use
document.getElementById('slide');
Javascript, GetElementById element is not defined?
From your code above it shows that you're trying to call a method getElementById() which you have not yet defined.
2ndly, you can only assign only 1 id in a document else it will not work.
you can do something like this
// i want to display this with javascript, after the login
<span id="coupon" style="display: none">
<h1>You won giftcard </strong></h1>
<button>abas</button>
</span>
what you meant to call is document.getElementById("coupon"); which is the right function to do.
so try this;
var zzz = document.getElementById("coupon");
i don't really know what your criteria is for a successful login but this show help
let say you set a variable as var success = "yes"
on successful login
if(success === "yes"){
zzz.style.display = "block";
}
Why document.getElementById() command doesn't work on my code?
You need to use innerText
, textContent
or innerHTML
instead of value
.
Why can't I call getElementById on a javascript element?
You appear to have a couple issues.
divBox.getElementById("divID");
doesn't work becausegetElementById()
is only a method on thedocument
object. It is not a method on other types of objects. So, thedivBox
element does not have that method. You could usedocument.getElementById("divID")
instead if there was only onedivID
in the entire document and ifdivBox
was already inserted into the document.var divContents = divBox.getElementsByClassName("divClass")[0];
works because.getElementsByClassName()
is a method on all DOM objects so it works when you call it ondivBox
.
You call getElementById()
like this document.getElementById("someID")
.
If you want to find something in a particular part of the subtree, you can use element.querySelectorAll("#someID")
or if you want to have more than one object with a given identifier, then you can use a class name and use functions that find objects with a given class name.
As to your specific questions:
divBox.getElementById is not a function
That is because geetElementById()
is only a method on the document
object and divBox
is not a document
object so it does not have that method, therefore you get the error you are seeing.
Why does this have no issue:?
var divContents = divBox.getElementsByClassName("divClass")[0];
That is apparently because divClass
is a class name, not an id value and all HTML elements contain the getElementsByClassName()
method so you can call it on divBox
just fine.
Related Topics
How to Display Selected Image Without Sending Data to Server
Modify the Value of Each Textfield Based on Original Value Using Jquery
Set Scrolltop and Scrollleft Without JavaScript
How to Style Canvas Elements with CSS
Style a D3 Element with Jquery and CSS
Calling JavaScript from Function from CSS
Can You Do a JavaScript for Loop Inside of Less CSS
Bootstrap Dropdown in Collapse Not Showing on First Attempt
How to Get the Number of Children Div in CSS or SASS
How to Style a Title? (And with CSS or Js)
JavaScript Interface Not Working with Android 4.2
Jquery: How to Get Assigned Font to Element
Getting the Height of an Option Element with JavaScript
Twitter Bootstrap - How to Detect When Media Queries Starts