[Powered by Google Translate] [DOM]
[Tommy MacWilliams] [Universidad de Harvard]
[Este es CS50.] [CS50.TV]
En este video vamos a echar un vistazo a la DOM.
Cuando un navegador descarga una página web, necesita ser representado en la memoria de alguna manera.
El modelo de objeto de documento, o DOM,
describe cómo el navegador representa una página web en la memoria.
En este video, vamos a echar un vistazo a la DOM en el contexto de JavaScript,
pero DOM es un concepto independiente del lenguaje.
Por ejemplo, PHP tiene su propia implementación DOM también.
Sin embargo, DOM se utiliza con frecuencia por JavaScript
desde JavaScript nos permite cambiar el contenido de una página web sobre la marcha,
DOM y nos permite acceder a partes de una página web.
Vamos a echar un vistazo a la página web de ejemplo.
Bien, ahora vamos a ver cómo esta página estará representado en el DOM.
Y cada árbol debe tener un nodo raíz en la parte superior.
En este documento, el elemento HTML es el nodo raíz
porque es el primer elemento que aparece.
Vamos a añadir un nodo raíz de nuestro árbol.
Vamos a echar un vistazo al documento HTML nuevo.
Observe que la etiqueta del cuerpo se desliza por el interior de la etiqueta HTML.
Esto significa que el cuerpo es un elemento secundario del elemento HTML.
Podemos representar esto en nuestro árbol DOM al hacer el cuerpo de una hoja
descendente de HTML.
Vamos a hacer eso.
Tenemos cuerpo debajo HTML.
Ahora podemos ver que el cuerpo tiene 2 hijos de su propia,
el elemento h1 y el elemento ul.
Esto significa que podemos conectar estos dos elementos
para el elemento del cuerpo, por lo que vamos a hacer eso.
Tenemos un h1 y ul.
Finalmente, el elemento ul tiene 3 hijos más,
y esto completará nuestro árbol DOM, por lo que vamos a añadir li, li, li.
Esto completa nuestro árbol DOM, y es así como el navegador es el almacenamiento de su página web.
Ahora echemos un vistazo a cómo podemos recorrer este árbol con JavaScript.
Podemos acceder a este árbol usando una variable especial llamada JavaScript documento.
Una de las propiedades de este objeto documento
es propiedad del cuerpo, y este objeto representa
el elemento del cuerpo en nuestro ejemplo página web.
Si quisiéramos obtener todos los elementos secundarios del elemento del cuerpo,
que si recuerda es que la etiqueta h1 y la etiqueta ul,
podemos decir document.body.childNodes.
Y esto nos va a devolver una matriz que contiene tanto el elemento h1
y el elemento ul ya que ambos son hijos directos del cuerpo.
Si queremos crear una variable que representa el elemento ul
podemos decir vrr ul = entonces el código aquí arriba,
y ahora ya childNodes es simplemente un conjunto
que puede indexar en ella con [1] para obtener el segundo elemento de esa matriz.
Con este nuevo objeto ul podemos acceder a diversas propiedades del elemento como su ID.
Si decimos ul.id que va a ser igual a la lista de cadenas
porque eso es lo que tenemos en nuestra página HTML.
También podemos obtener su tagName, que en este caso va a ser
qué tipo de elemento que es, en este caso, un ul.
También podemos obtener su padre o el nodo por encima de ella, que en este caso
va a ser el elemento del cuerpo.
Si decimos. ParentNode, que va a ser el mismo que document.body.
Por supuesto, esta ul tiene hijos de su propia,
por lo que todavía se puede decir. childNodes en este elemento,
y este conjunto ahora debe tener la longitud 3, porque hay 3 elementos de la lista.
Por último, tal vez la característica más útil va a ser. InnerHTML,
y este será el contenido real de la lista, que en nuestra página de ejemplo
eran esos 3 etiquetas li.
Por supuesto, si tenemos un documento de gran tamaño, el acceso a los elementos
de esta manera va a ser muy complicado porque
finalmente vamos a tener que decir cosas como document.body.childNodes
Soporte de algo. ChildNodes soporte algo más,
y que va a ser realmente complicado.
En cambio, lo que realmente queremos hacer es ser capaz de consultar el documento,
Así que al igual buscamos cosas en Internet con las palabras clave
Realmente necesitamos alguna manera de buscar este documento sucinto
volver sólo los elementos que nos interesan sin atravesar
toda la parte superior del árbol hacia abajo.
Por suerte, los navegadores modernos nos permiten hacer este
con una función especial llamada querySelectorAll,
y esta función toma un solo argumento
que es un selector CSS, y va a regresar con nosotros
todos los elementos que responden a dicho selector.
Eso significa que usted no tiene que aprender una sintaxis completamente nuevo para la consulta de la DOM.
En su lugar se puede aplicar el conocimiento que usted ya sabe
sobre selectores CSS.
Echemos un vistazo a algunos ejemplos de consulta del documento.
Si decimos querySelectorAll y pasamos este string # foo
que nos va a devolver el elemento con el ID foo.
También se puede decir document.getElementById
y pasar la cadena foo sin ese hashtag.
Vas a volver exactamente el mismo objeto.
Si por el contrario se pasa la cadena. Bar de document.querySelectorAll
vamos a volver todos los elementos con la barra de clase.
También podemos combinar selectores CSS.
Si pasamos de la cadena # foo img
que nos va a devolver todos los elementos de imagen
que son hijos del elemento con el ID foo.
Como se puede ver, por los selectores combinan tenemos algunos muy potentes capacidades de búsqueda.
Pero bajo el capó, el DOM es realmente sólo un árbol,
y estos selectores permiten abstracta que fuera hasta cierto punto
porque no siempre nos preocupamos por toda la estructura del árbol DOM.
Esa fue una visión rápida de la DOM, y gracias por acompañarnos.
[CS50.TV]