[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Harvard University] [É dicir CS50.] [CS50.TV] Neste vídeo, imos dar un ollo no DOM. Cando un navegador carga unha páxina web, el que ser representado na memoria de algunha maneira. O modelo de obxecto de documento ou DOM, describe como o navegador representa unha páxina na memoria. Neste vídeo, imos dar un ollo no DOM no contexto de JavaScript, DOM, pero é un concepto independente de linguaxe. Por exemplo, PHP ten a súa propia implementación DON tamén. Con todo, DOM é frecuentemente usada por Javascript desde Javascript permítenos modificar o contido dunha páxina web en tempo real, DOM e permítenos acceder partes dunha páxina web. Imos dar un ollo a un sitio exemplo. Ok, agora imos ver como esa páxina será representada no DOM. E toda árbore que ter un nó raíz na parte superior. Para este documento, o elemento de HTML é o nodo raíz porque é o primeiro elemento que aparece. Imos engadir un nodo raíz a nosa árbore. Imos dar un ollo no documento HTML novo. Teña en conta que a etiqueta body está aninhado dentro da etiqueta HTML. É dicir, que o corpo é un elemento fillo do elemento HTML. Podemos representar iso na nosa árbore DOM, facendo o corpo dunha folla descendente de HTML. Imos facelo. Temos corpo debaixo HTML. Agora vemos que o corpo ten dous fillos do seu propio país, o elemento h1 eo elemento ul. Isto significa que pode conectar dous elementos ao elemento do corpo, entón imos facelo. Temos un h1 e UL. Por último, o elemento UL ten máis 3 nenos, e iso vai completar a nosa árbore DOM, entón imos engadir li, li, li. Isto conclúe a nosa árbore DOM, e é así que o navegador é almacenar a súa páxina. Agora imos dar un ollo a como podemos percorrer esta árbore mediante JavaScript. Podemos acceder a esta árbore usando unha variable JavaScript especial chamado documento. Unha propiedade deste obxecto documento é a propiedade do corpo, e este obxecto representa o elemento do corpo, no noso exemplo webpage. Se quixésemos obter todos os fillos do elemento corpo, que se recorda é que etiqueta h1 ea etiqueta UL, podemos dicir document.body.childNodes. E iso vai devolver un array que contén tanto o elemento h1 eo elemento ul pois ambos son fillos directos do corpo. Se quixésemos crear unha variable que representa o elemento ul podemos dicir VRR ul = entón este código aquí, e agora, xa childNodes é simplemente unha matriz podemos índice nel con [1] para obter o segundo elemento deste array. Con este novo obxecto ul podemos acceder varias propiedades do elemento, como o seu ID. Se dicimos ul.id que será igual á lista de cadea porque iso é o que temos na nosa páxina HTML. Tamén pode obter a súa tagName, que neste caso será o tipo de elemento que é, neste caso, un ul. Tamén pode obter a súa nai ou o no de arriba, o que neste caso será o elemento corpo. Se dicimos. ParentNode, que será a mesma que document.body. Por suposto, iso ul ten fillos do seu propio país, por iso, aínda pódese dicir. childNodes neste elemento, e esa matriz xa debe ter lonxitude 3, porque hai 3 elementos na nosa lista. Por último, é posible que a propiedade máis útil será. InnerHTML, e este será o real contido da lista, que na nosa páxina de exemplo eran estas tres marcas lin. Claro que, se temos un gran documento, o acceso a elementos deste xeito vai ser moi complicado, porque finalmente teremos que dicir cousas como document.body.childNodes soporte de algo. childNodes soporte outra cousa, e que vai ser moi pesado. Pola contra o que realmente queremos facer é ser capaz de consultar o documento, Entón, como buscamos cousas en internet utilizando palabras clave nós realmente necesitamos algunha forma de buscar ese documento para sucintamente volver só os elementos que se preocupan sen atravesar todo o máis alto da árbore para abaixo. Afortunadamente, os navegadores nos permiten facelo cunha función especial chamada querySelectorAll, e esta función recibe un único argumento que é un selector CSS, e que vai voltar a nós todos os elementos que corresponden a este selector. Isto significa que non ten que aprender unha nova sintaxe para consultar o DOM. Pola contra, pode aplicar o coñecemento que xa sabes sobre selectores CSS. Imos dar un ollo a algúns exemplos de consultar o documento. Se dicimos querySelectorAll e pasalo esta cadea # foo que vai devolver o elemento co ID foo. Tamén pode dicir document.getElementById e pasalo a cadea foo sen esta hashtag. Vai recibir de volta o mesmo obxecto exacto. Iso si, pase a corda. Barra para document.querySelectorAll imos volver todos os elementos coa barra de clase. Tamén podemos combinar selectores CSS. Se pasar na cadea # foo img que vai devolver todos os elementos de imaxe que son fillos do elemento co ID foo. Como verás, a través da combinación de selectores temos algunhas capacidades de busca realmente poderosas. Pero baixo o capó, o don é realmente só unha árbore, e estes selectores permítennos abstracta que fóra nalgún grao porque non sempre se preocupan a estrutura da árbore DOM. Esa foi unha rápida visión xeral do DOM, e grazas por unirse a nós. [CS50.TV]