I am learning javascript from scratch. I am currently trying to grasp DOM. I have a HTML page like this:
<html>
<head>
<title>javascript</title>
</head>
<body>
<h1>Wele to javascript</h1>
Visit me <a href="facebook">here.</a>
<p> <img id="image" src="kalam.jpg"></p>
<script type="text/javascript" src="code.js">
</script>
</body>
</html>
Now, I want to read a tags.
var links = document.body.getElementsByTagName("a")[0];
console.log(links.href);
It works fine. Now I want to read image.
var imageLink = document.body.getElementById("image");
console.log(imageLink.src);
But, the above code is not working.
I am getting an error:
Uncaught TypeError: document.body.getElementById is not a function.
Changing it to:
var imageLink = document.getElementById("image");
console.log(imageLink.src);
works fine.
My question is about the difference between document.body.getEl... and document.getEl..?
Does document.body reads only body part while document.getEl.. reads whole document including titles etc? If is it so then should not both the above code working?
I am learning javascript from scratch. I am currently trying to grasp DOM. I have a HTML page like this:
<html>
<head>
<title>javascript</title>
</head>
<body>
<h1>Wele to javascript</h1>
Visit me <a href="facebook.">here.</a>
<p> <img id="image" src="kalam.jpg"></p>
<script type="text/javascript" src="code.js">
</script>
</body>
</html>
Now, I want to read a tags.
var links = document.body.getElementsByTagName("a")[0];
console.log(links.href);
It works fine. Now I want to read image.
var imageLink = document.body.getElementById("image");
console.log(imageLink.src);
But, the above code is not working.
I am getting an error:
Uncaught TypeError: document.body.getElementById is not a function.
Changing it to:
var imageLink = document.getElementById("image");
console.log(imageLink.src);
works fine.
My question is about the difference between document.body.getEl... and document.getEl..?
Does document.body reads only body part while document.getEl.. reads whole document including titles etc? If is it so then should not both the above code working?
-
1
document.bodydoesn't havegetElementById. – Kristiyan Kostadinov Commented Nov 20, 2015 at 13:22 -
1
document.body.getElementByIddoes not exist as code - not sure where you got that from – StudioTime Commented Nov 20, 2015 at 13:23 - The term "not working" is far too vague to be useful; if you're going to use it again on SO make sure it's acpanied with a follow up explanation of what that actually means. Does it result in an error/exception being thrown? Does it give the wrong result? – Anthony Grist Commented Nov 20, 2015 at 13:23
- 1 read this first -> developer.mozilla/en-US/docs/Web/API/Document than -> developer.mozilla/en-US/docs/Web/API/Document/body – Andrew Evt Commented Nov 20, 2015 at 13:25
- @AnthonyGrist I have edited my question. Have a look please. – learner Commented Nov 20, 2015 at 13:27
4 Answers
Reset to default 9document.getElementById() gets the element with the matching ID from the document.
document.body.getElementById() does not exist.
document.getElementsByTagName() gets all the elements which match the tag name from the document.
someOtherElement.getElementsByTagName gets all the elements which match the tag name and which are descendants of someOtherElement.
Since an ID must be globally unique within an HTML document, there is generally no need for the getElementById method to exist anywhere other than on the document object itself.
getElementById is a function of document object (so it simply doesn't exist in document.body)
getElementsByTagName is a function of any dom element (including document.body).
Using document.getElementById you are retrieving a specific element with the specified ID on the page. IDs should be unique to each element on a page. when using document.form (or whatever) you are 'filtering down' your selection.
I think if you're new to this it might be worth using
document.querySelectorAll('a')[0]
document.querySelector('#image')
document.querySelector('.someclass')
just because it does tag, id and class all in one.