EN
JavaScript - get element handle by id
10 points
In this article, we're going to have a look at how to get element by id in JavaScript.
We can achieve it by using one of the methods available by default in JavaScript:
document.getElementById('element-id')document.querySelector('#element-id')document.querySelectorAll('#element-id')
Below we can see runnable examples of each of those methods. Click on it to test how it works.
xxxxxxxxxx1
<html>2
<body>3
<div id="my-element">Nothing inside...</div>4
<script>5
6
var handle = document.getElementById( 'my-element' );7
8
handle.innerHTML = 'Some <b>text</b> inside...';9
10
</script>11
</body>12
</html>xxxxxxxxxx1
<html>2
<body>3
<div id="my-element">Nothing inside...</div>4
<script>5
6
var handle = document.querySelector( '#my-element' );7
8
handle.innerHTML = 'Some <b>text</b> inside...';9
10
</script>11
</body>12
</html>xxxxxxxxxx1
<html>2
<body>3
<div id="my-element">Nothing inside 1...</div>4
<div id="my-element">Nothing inside 2...</div>5
<div id="my-element">Nothing inside 3...</div>6
<div id="my-element">Nothing inside 4...</div>7
<script>8
9
var handles = document.querySelectorAll( '#my-element' );10
11
for( var i = 0; i < handles.length; ++i )12
handles[ i ].innerHTML = 'Some <b>text</b> inside ' + ( i + 1 ) + '...';13
14
</script>15
</body>16
</html>Note:
The
works with duplicated ids but in practice, you shouldn't use duplicated idsdocument.querySelectorAll
