I am currently trying to access a child of a parent node in HTML5 using Javascript. I tried originally directing getting calling the div directly but that didn't work :(. The following code is the code that I got from the Mozilla website:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="parent-id">
<p>hello word1</p>
<p id="test1">hello word2</p>
<p >hello word3</p>
<p>hello word4</p>
</div>
<script>
var parentDOM = document.getElementById('parent-id');
var test1=parentDOM.getElementById('test1');
</script>
</body>
</html>I am currently trying to access a child of a parent node in HTML5 using Javascript. I tried originally directing getting calling the div directly but that didn't work :(. The following code is the code that I got from the Mozilla website:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="parent-id">
<p>hello word1</p>
<p id="test1">hello word2</p>
<p >hello word3</p>
<p>hello word4</p>
</div>
<script>
var parentDOM = document.getElementById('parent-id');
var test1=parentDOM.getElementById('test1');
</script>
</body>
</html>The code (if you ran it) outputs an error as such:
Error
{
"message": "Uncaught TypeError: parentDOM.getElementById is not a function",
"filename": "http://stacksnippets/js",
"lineno": 26,
"colno": 29
}
I understand that the second line of the script outputs the code but I don't know a replacement or how to fix the code. The aim is to access the <p id="test1">hello word2</p> using Javascript.
The place where I go the code from is here.
document.getElementById to find elements by id. parentDOM.querySelector('#test1') if you really need it for some reason, though.
– Ry-
♦
Commented
Jan 27, 2017 at 22:19
document.getElementById("test1"); should work.
– Pineda
Commented
Jan 27, 2017 at 22:22
document.querySelector('#parent-id #test1')
– Pedro Estrada
Commented
Jan 27, 2017 at 22:27
Since IDs are unique you have to use document.getElementById as it is the only DOM element that have that function. So to get test1 use this:
var test1 = document.getElementById('test1');
Elements other than document have these functions: getElementsByTagName, getElementsByClassName, querySelector and querySelectorAll but not the getElementById.
An element with an ID is unique no matter what its parent. Therefore, it's uncessary to know the parent of an element before getting that element using its ID. So, there's no need to put the function getElementById on all elements, putting it only on document will siffice.
What you can do is use the querySelector instead, it's native javascript (but jquery esque) and supported by all browsers (down to IE 9).
var parentDOM = document.querySelector('#parent-id');
var test1 = parentDOM.querySelector('#test1');
The code you refer to is an example of a script that throws an error. You should refer to the example at the top titled "Syntax":
element = document.getElementById(id);
So to get a reference to an element whose ID is "test1" you just call:
document.getElementById("test1")
Since you have jQuery listed as a tag - here is a jquery answer - it too uses just the element id to target the element. I am console.logging the text of that elemnt - you could change the text, styling , add a class or whatever you want to do to it once you have the selected element.
$(document).ready(function(){
var test1=$('#test1');
var test1Text=test1.text();
console.log(test1Text);
})<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="parent-id">
<p>hello word1</p>
<p id="test1">hello word2</p>
<p >hello word3</p>
<p>hello word4</p>
</div>
</body>
</html>