Contenido principal
Curso: Programación de computadoras > Unidad 6
Lección 3: Métodos de acceso del DOM- Encontrar elementos por ID
- Desafío: cambiador de ID
- Encontrar múltiples elementos del DOM por nombre de etiqueta o clase
- Desafío: nombres de etiquetas personalizadas
- Encontrar elementos por selector de CSS
- Desafío: modernizador de las cuestiones
- Resumen: métodos de acceso del DOM
© 2024 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
Resumen: métodos de acceso del DOM
¿Qué métodos podemos usar?
Te mostramos cómo puedes utilizar los siguientes métodos para encontrar uno o más elementos en tu página web:
¿Qué es lo que regresan?
var salsMotto = document.getElementById("salsMotto");
salsMotto.innerHTML = "Las matemáticas son geniales";Los métodos
getElementsByClassName y getElementsByTagName regresan un objeto HTMLCollection que actúa como un arreglo. Esa colección está "viva", lo que significa que la colección se actualiza si al documento se le agregan elementos adicionales con nombre de etiqueta o nombre de clase.var teamMembers = document.getElementsByClassName("team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}El método
querySelectorAll() regresa un NodeList, que también actúa como un arreglo. Esa lista es "estática", lo que significa que la lista no se actualizará aunque se le agreguen nuevos elementos coincidentes a la página. Lo más probable es que no te encuentres con la diferencia entre los dos tipos de datos de regreso cuando estés usando estos métodos, pero es bueno tenerlo en cuenta.var teamMembers = document.querySelectorAll(".team-member");
for (var i = 0; i < teamMembers.length; i++) {
console.log(teamMembers[i].innerHTML);
}Acceder con subconsultas
Una vez que hayas encontrado un elemento, puedes hacer subconsultas sobre él al usar los métodos que acabamos de mostrar. Por ejemplo:
// encuentra el elemento con esa ID
var salsMotto = document.getElementById("salsMotto");
// encuentra los spans dentro de ese elemento:
var mottoWords = salsMotto.getElementsByTagName("span");
// escribe en consola cuántos hay
console.log(mottoWords.length);Atravesar el DOM
Otra manera de acceder a los elementos es "atravesar" el árbol del DOM. Cada elemento tiene propiedades que apuntan a los elementos relacionados con él:
firstElementChildlastElementChildnextElementChild/nextElementSiblingpreviousElementChild/previousElementSiblingchildNodeschildElementCount
Por ejemplo:
var salsMotto = document.getElementById("salsMotto");
for (var i = 0; i < salsMotto.childNodes.length; i++) {
console.log(salsMotto.childNodes[i]);
}Estas propiedades no están disponibles en los nodos
Text, solo en los nodos Element. Para asegurarte de que puedas atravesar un elemento, puedes revisar sus propiedades nodeType/nodeValue. Probablemente no necesites o quieras atravesar el DOM, pero es otra opción disponible para ti.¿Quieres unirte a la conversación?
A medida que voy estudiando todo la cosa se va haciendo mas compleja,es bastante informacion para dijerir,espero que con tiempo pueda adquirir el conosimiento para recordar tantas palabras.definitivamente es un lenguaje(5 votos)
En el desafio modernizacion de las cuestiones no entiendo que tengo que hacer en el tercer paso, se que tengo que pasar cambiar el doth en minuscula con does en minuscula, pero no entiendo como quieren que lo haga(3 votos)
Lo que te piden es agregar todos los elementos de la clase doth a una variable array en js para luego recorrerla y cambiarle el innerHTML que es el contenido, por does.
Primero tienes que crear una clase para poder usar el querySelector (que si recuerdas, sólo es aplicable a definiciones de CSS), esto se hace de la siguiente manera, apuntando a doth:
<style>
li .doth {
}
</style>
Luego, defines el script que te permite acceder a esa clase:
<style>
li .doth {
}
</style>
<script>
// Step 1: Store all doth that are inside lis in dothEls
var dothEls = document.querySelectorAll("li .doth");
// Step 2: Iterate through them and change doth to does
for(var i=0;i<dothEls.length;i++){
dothEls[i].innerHTML = "does"
}
</script>
Espero que te haya servido(11 votos)
Es un tanto complicado este tema(2 votos)
El no querer es la causa, el no poder el pretexto.(1 voto)
Aca les dejo el ejercicio de modernizador de las cuestiones, tratando de explicarlo paso por paso:
<script>
// Step 1: Store all doth that are inside lis in dothEls
var dothEls = document.querySelectorAll("li .doth")
// Step 2: Iterate through them and change doth to does
for(var i = 0; i < dothEls.length; i++){
dothEls[i].innerHTML = "does"
}
</script>
-------------- EXPLICACIÓN --------------
1-
<script>
//Primero definimos el <script> es la etiqueta que se utiliza para poder programar y escribir codigo en JavaScript en HTML.
(cuando programes un proywecto verdaderos se van a estar utilizando diferentes ventanas o sea diferentes archivos, ejemplo una con formato .html (para la estructura de la pagina web) otro con formato .css (para el diseño y personalizacion de tu pagina) y otro .js (con el cual podras escribir codigo en JavaScript, para poder hacer tu pagina web dinamica.)
</script>
2-
<script>
// Step 1: Store all doth that are inside lis in dothEls
var dothEls = document.querySelectorAll("li .doth")
// en el codigo anterior se declara una variable con el nombre "dothEls" la cual contiene el metodo "querySelectorAll" sirve para devolver una lista de elementos del documento que coinciden con el grupo de selectores indicados. En resumen lo que se esta haciendo es decirle busca dentro de los "li" la clase ".doth"
var dothEls = document.querySelectorAll("li .doth")
* ATENCION Por este motivo no esta escrito ".
li.doth" es SEPARADO ya que esta haciendo dos cosas distintas, primero busca los LI, y depsues le decimos ah genial ya encontraste los "li" bueno ahora dentro de esta lista busca todo lo que contenga la clase .doth
</script>
3-
<script>
// Step 1: Store all doth that are inside lis in dothEls
var dothEls = document.querySelectorAll("li .doth")
// Step 2: Iterate through them and change doth to does
for(var i = 0; i < dothEls.length; i++){
dothEls[i].innerHTML = "does"
}
//Lo ultimo es sencillo, un bucle for, primero se declara una variable, como buena practica siempre se pone "i" a esta variable que vamos a utilizar en este bucle le damos el valor de 0, ya que todavia no vale nada.
Luego sigue la condicion, y ahi decimos que el bucle parara, cuando i sea menor (<) que dothEls.LENGTH (es la variable que definimos anteriormente, o sea si vemos el contenido dothEls, nos encontraremos que es un ARRAY con todas las clases .doth) y PORQUE .LENGTH es una propiedad de los array que te permite saber la longitud que este tiene, o sea le estamos diciendo que el bucle no pare hasta que se recorra todo ese array.
Luego lo iteramos, para que recorra el array, o sea que cada vez que el bucle de una vuelta se sume uno (i++)
Y para terminar decimos que dothEls (nuestra variable) que en cada unidad del array [i] i es lo que contiene cada parte del array, cambie el texto esto lo hacemos a traves de innerHTML por "does"
</script>
VOTAA SI ENTENDISTE, tratare de responder sus dudas!(2 votos)- ¿no entendí que hace
• firstElementChild
• lastElementChild
• nextElementChild/nextElementSibling
• previousElementChild/previousElementSibling
• childNodes
• childElementCount?(1 voto)- childNodes: devuelve una matriz de nodos secundarios de un elemento.
firstChild: devuelve el primer nodo hijo de un elemento.
lastChild devuelve el último nodo hijo de un elemento.
hasChildNodes: devuelve verdadero si un elemento tiene nodos secundarios, de lo contrario falso.
nextSibling: devuelve el siguiente nodo en el mismo nivel de árbol.
previousSibling: devuelve el nodo anterior en el mismo nivel de árbol.
parentNode: devuelve el nodo padre de un elemento.(1 voto)
¿Cómo obtengo a todos los siblings de un elemento childNode y los filtro según su clase?(1 voto)
en le desafió de modernizador, se supone que document.querySelectorAll es para Css, en la pagina web no hay estilos, "<style>", ¿o no solo es estrictamente para Css sino tambien para HTML?.(1 voto)
<style> es para "CSS" y para resolver la lección anterior debes agregar un estilo "CSS" realizar la selección(1 voto)