<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
