<div class="container ">
<div class="form-group">
<label for="cadena">Nombre:</label>
<input type="text" class="form-control" id="cadena">
<a href="@" class="a" id="firstlink">Esto es un enlace</a>
<a href="@" name="b">Esto otro</a>
<a href="@" name="c">Y otro más</a>
</div>
<a href="@" class="a">Esto es un enlace</a>
<a href="@" class="b">Esto otro</a>
<a href="@" class="c">Y otro más</a>
<h1 class="a">hola</h1>
<h1 id="posicion"></h1>
<button type="button" class="btn btn-success" onclick="buscar()">Añadir</button>
<button type="button" class="btn btn-success" onclick="contar()">Contar</button>
<button type="button" onclick="contar()">Contar</button>
<script src="js/test.js"></script>
</div>
Vamos a seleccionar:
1.- El elemento con id firstlink
document.getElementById('firstlink')
2.- Todos los ‘h1’
document.getElementsByTagName('h1')
document.querySelectorAll('h1')
3.- Los elementos con clase ‘a’
document.getElementsByClassName('a')
document.querySelectorAll('.a')
4.- Los elementos h1 con clase ‘a’
document.querySelectorAll('h1.a')
5.- Los enlaces con clase ‘a’
document.querySelectorAll('a.a')
6.- Todos los botones de la página
document.getElementsByTagName('button')
document.querySelectorAll('button')
No nos olvidemos de que excepto getElementById y querySelector todas las funciones de selección nos devuelven una colección (array) que hay que recorrer
