[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]