Selectores
Para seleccionar un elemento o varios de la página con JavaScript, utilizaremos distintos selectores.
El método getElementById() devuelve el atributo ID con el valor específicado.
Sintaxis:
document.getElementById(elementoID)
<body>
<div id="caja">Contenido del div "caja"</div>
<script type="text/javascript">
var x = document.getElementById("caja"); // selecciona el elemento caja
console.log(x)
x.style.color = "white"; // Cambia el color de la letra a blanco
x.style.backgroundColor = "black"; // Cambia el color del fondo a negro
</script>
</body>
El método getElementByTagName() devuelve el atributo Tag, etiqueta HTML.
Sintaxis:
document.getElementByTagName(nombre de la etiqueta)
<body>
<div>Contenido del div 0</div>
<div>Contenido del div 1</div>
<script type="text/javascript">
var x = document.TagName("div"); // coje todos los elementos div
console.log(x)
console.log(x[0])
x[0].style.color = "white"; // Cambia el color de la letra a blanco
x[0].style.backgroundColor = "black"; // Cambia el color del fondo a negro
x[1].style.color = "yellow"; // Cambia el color de la letra a amarillo
x[1].style.backgroundColor = "red"; // Cambia el color del fondo a rojo
</script>
</body>
El método getElementByClassName() devuelve el valor clase del HTML.
Sintaxis:
document.getElementByClassName(nombre de la clase)
<body>
<div class="aa">1</div>
<div class="bb aa">2</div>
<div class="bb aa">3</div>
<div class="bb cc aa">4</div>
<script type="text/javascript">
var x = document.getElementsByClassName("aa"); // coje todos los elementos con la clase aa
console.log(x)
console.log(x[0])
x[0].style.color = "white"; // Cambia el color de la letra a blanco
x[0].style.backgroundColor = "black"; // Cambia el color del fondo a negro
x[1].style.color = "yellow"; // Cambia el color de la letra a amarillo
x[1].style.backgroundColor = "red"; // Cambia el color del fondo a rojo
</script>
</body>
El método querySelector(selector CSS) devuelve el valor del selector CSS elegido.
Sintaxis:
document.querySelectorAll(selector CSS)
<body>
<div class="aa">1</div>
<div class="bb aa">2</div>
<div class="bb aa">3</div>
<div class="cc aa">4</div>
<script type="text/javascript">
var x = document.querySelectorAll("div.bb, div.cc"); // coje todos los elementos div con las clases bb y cc
console.log(x)
console.log(x[0])
x[0].style.color = "white"; // Cambia el color de la letra a blanco
x[0].style.backgroundColor = "black"; // Cambia el color del fondo a negro
x[1].style.color = "yellow"; // Cambia el color de la letra a amarillo
x[1].style.backgroundColor = "red"; // Cambia el color del fondo a rojo
</script>
</body>