PL
JavaScript - pobranie elementu o określonym id
3
points
W tym artykule przyjrzymy się, jak uzyskać element za pomocą identyfikatora w JavaScript.
Możemy to osiągnąć korzystając z jednej z metod dostępnych domyślnie w JavaScript:
document.getElementById('element-id')
document.querySelector('#element-id')
document.querySelectorAll('#element-id')
Poniżej możemy zobaczyć uruchamialne przykłady każdej z tych metod.
1. document.getElementById
:
// ONLINE-RUNNER:browser;
<html>
<body>
<div id="my-element">Pusty element...</div>
<script>
var handle = document.getElementById( 'my-element' );
handle.innerHTML = 'Jakiś <b>tekst</b>...';
</script>
</body>
</html>
2. document.querySelector
:
// ONLINE-RUNNER:browser;
<html>
<body>
<div id="my-element">Pusty element...</div>
<script>
var handle = document.querySelector( '#my-element' );
handle.innerHTML = 'Jakiś <b>tekst</b>...';
</script>
</body>
</html>
3. document.querySelectorAll
:
// ONLINE-RUNNER:browser;
<html>
<body>
<div id="my-element">Pusty element 1...</div>
<div id="my-element">Pusty element 2...</div>
<div id="my-element">Pusty element 3...</div>
<div id="my-element">Pusty element 4...</div>
<script>
var handles = document.querySelectorAll( '#my-element' );
for( var i = 0; i < handles.length; ++i )
handles[ i ].innerHTML = 'Jakiś <b>tekst</b>' + ( i + 1 ) + '...';
</script>
</body>
</html>
Uwaga:
document.querySelectorAll
działa ze zduplikowanymi identyfikatorami, ale w praktyce nie należy ich używać.