Série de modelos de objetos de documentos 2023 — Parte 3: manipular e Manipulating do modelo de objeto de documentos

1. Introdução do curso — Manipulação do DOO: Bem-vindos de volta a outra aula. Estou super, super animado. Eu poderia pular para cima e para baixo. Obrigado por ficar comigo. Sou Clyde, serei seu instrutor. E esta classe é uma continuação do aprendizado sobre o DOM, o Document Object Model. E agora você sabe o que é o DOM, você sabe como acessar o DOM. Que esta classe é toda sobre manipular o DOM. Muitas vezes, uma vez que você entra na cúpula, dentro do causal, são apenas os pontos de partida. O próximo passo é mover-se dentro do causal, dentro da cúpula. E na indústria de desenvolvimento chamado atravessando o DOM. Então eu vou mostrar a vocês por que os pais, irmãos, filhos de um nó , como acessar o DOM e se mover dentro dele. Vai ser fascinante e isso é muito, muito importante saber porque muitas vezes em aplicativos web você quer ser capaz de permitir que o usuário adicione excluir principais determinados itens. Então você precisa saber como se mover dentro do DOM, você precisa segmentar o elemento correto. E, claro, estou falando sobre usuários criando itens em um aplicativo do Wave. Obviamente isso significa que temos que criar um elemento dentro do DOM. Então é isso que este curso também vai cobrir. Vai ser a IBEC. Confie em mim, não importa o nível de codificação ou experiência que você tem. Você aprenderá algo novo. E não se preocupe se você não está confortável com código que eu vou programar junto com você. Vamos fazer muitos exemplos juntos. Já me conheces. De qualquer forma, chega de conversa, gordura suficiente, gordura. Espero vê-lo nos primeiros vídeos de palestra. 2. Se movendo em torno do DO: Vamos direto para este tópico incrível, atravessando o DOM. Atravessando, quero dizer, como vamos subir e descer a árvore DOM? Sabe como funcionam as estruturas familiares? Você tem pais, seus pais têm filhos. E se eles têm mais de um, significa que você tem um irmão, excêntrico, cetera. Bem, como se vê, para entender como atravessar o DOM, e tudo começa com a compreensão de como as estruturas familiares funcionam. Mas é claro que aqui não estamos falando de famílias literais. Estamos falando da árvore DOM. Acontece que toda a nossa página HTML funciona da mesma maneira. Quão legal é isso? E como vimos na seção anterior ou em uma das seções anteriores, todos os nós no DOM podem ser expressos como pais, filhos e irmãos. Mas o que quero dizer? Bem, vamos ver isto. Lembre-se que o pai, aquele cara com barba, um pai de qualquer nó, é apenas o nó que é colocado imediatamente acima dele. E quando se trata de atravessar o DOM, existem dois métodos principais que podemos usar para obter o nó pai. O primeiro método é nó pai. E o segundo método podemos usar este elemento pai. Não se preocupe como eu uso isso, todas as diferenças entre eles ainda. Por enquanto, eu só quero que você dê um passo atrás em um alto nível para entender esses conceitos. Então, esse é o nosso pai. Tudo bem e bem, mas lembre-se que ele teve dois filhos ou o que faz a criança, o filho de um nó é o nó imediatamente abaixo dele. E o que é interessante ou o que você precisa saber é que o programa é muitas vezes referido a nós que estão além de um nível de aninhamento como descendentes. Esta é apenas a terminologia que você ouvirá no mundo da programação e faz sentido intuitivo. Então, esses são seus filhos. Mas e se estivermos olhando para crianças dentro de uma família? Bem, nós sabemos que isso agora é chamado de irmãos. Irmão de um nó é qualquer nó no mesmo nível de árvore que esse nó específico. E o que é interessante é que nós irmãos não precisam ser do mesmo tempo. O que quero dizer, bem, isso só significa que podemos ter diferentes tipos de nódulos. Podemos ter notas comprometidas, toma nós, 11 nós. Tudo isso pode ser irmãos, não tem que ser ao mesmo tempo. Então, aí está. Estes são três tipos de nós que temos em qualquer árvore DOM familiar. Nós temos paranóicos, nós temos nós de crianças, e nós temos nós irmãos. Não é tão difícil dirigir como peering Fahrenheit, isso está se tornando mais intuitivo. Assim, vamos começar a entrar em mais detalhes agora. E codificação de pensamento honesto também. Vejo você na próxima palestra. 3. Como criar nossa página: Tudo bem. Você me conhece? Você sabe o quanto eu amo codificar e é por isso que eu quero que nós apenas saltar para ele realmente começa rachando. Tudo o que eu quero fazer agora, a fim de entender como atravessar o DOM, eu quero nos configurar um bom modelo de trabalho, tipo de legal. A base. À esquerda, eu tenho meu código do Visual Studio à direita, você pode ver que eu realmente tenho nosso navegador. Então você pode ver que a rigidez fez progresso que fazemos em bullying são página simples. Vai ser muito simples, promissor. Então é a base. Eu só quero criar um modelos HTML5. É legal. Vou dar o título deste documento e atravessar o DOM porque é exatamente o que estamos fazendo. Fui lá fora para ser muito simples. Então a primeira coisa é que eu quero alugar código dentro de uma tag principal e dentro desta tag principal. E quando eu tenho uma etiqueta H1 que diz bem-vinda, eles não querem invadir uma tag div abaixo disso. Isso é realmente ter uma idéia de Rapa. E dentro desta tag div, Vamos ter uma tag H2 com garras de sub, batendo MSH2 tag e apenas dizer atravessando o DOM. Muito simples. Salve isso. Bem-vindo. Atravessando o DOM abaixo do H2, vamos ter uma tag de parágrafo dizendo, como fazemos isso? E abaixo da tag de parágrafo, podemos ter outra tag de parágrafo que diz, ficar por perto. E eu vou te mostrar. E se salvarmos, lá vamos nós e atualizamos em nosso navegador. E ele está fazendo isso porque eu estou usando o Live Server. Já passei por isso antes, mas se tiver perguntas, publique-as no Cunei, explique como isso funciona. Então essas ofertas div tag e eu estou apenas colocando automotivo, leve-o comigo e então nós morremos. E fui para a rede para ser um segundo invólucro. E dentro desta tag div, vamos apenas ter uma piada do dia. Então podemos até ter uma aula chamada idiota. E podemos dizer “masturbar” o dia. E o trabalho pode ser, por exemplo, o que você chama de peixe sem olhos? E a resposta é peixe. E não é uma piada muito boa. Mas este não é o propósito deste exercício. Frio ou gelo. Agora temos nossos sites básicos. Um que eu estou querendo fazer é guia rápido para o topo aqui e adicionar alguns CSS muito rápido sob o título UCC, Vamos apenas adicionar uma tag estilo. E sim, com todos os elementos em nossa página, vamos começar a estilizar. Em primeiro lugar, quero que todos os elementos tenham uma fronteira. Digamos que se dois pixels de largura, pode ser uma borda sólida e pode ser um bom tipo de legal borda acinzentada. Então lá vai você. Eu salvei como você pode ver, o que parece na tela, não parece certo, não é? Vai subir o lance. Agora eu só quero adicionar algum preenchimento para definir algum preenchimento de 15 pixels em uma margem de 15 pixels. Vamos ver como isso parece agora. Olhando para, eu estou olhando oferta para a minha hospedagem um pouco de CS extra. O Islã pode fazer sua página parecer incrível. É bem legal. E isso apenas estiliza o corpo. Agora podemos dar uma mistura. E se eu não souber 600 pixels? Podemos mudar a família das fontes. Eles têm san-serif, o intestino? Parece um pouco melhor. E vamos apenas mudar uma óptica de cor e apenas espaçar um pouco. Então aqui vamos nós. Esta é a nossa página. Quão fácil foi isso? Eu disse-te que não ia ser difícil. E se nos livrarmos do nosso código e olharmos para o nosso navegador, aqui vamos nós. Temos elementos diferentes, seções diferentes, temos invólucros. E é por isso que quero colocar fronteiras por aqui. Porque eu queria que você visse o que define um elemento do próximo. Mas vamos entrar nisso, não se preocupe, Kate. Eu só queria codificar isso com você. Espero que você possa ler junto comigo e como se divertir, Há apenas algo que eu quero mencionar rapidamente antes de seguirmos em frente. Isto é saltar para a outra tela. 4. Por que precisamos fazer o DOM, a seguir o DOM?: Eu sei que já passamos por isso antes, mas eu só quero enfatizar rapidamente os EUA porque é muito importante. Em primeiro lugar, a API DOM nos permite fazer qualquer coisa com elementos e conteúdo. E normalmente fazemos isso via JavaScript. Sabemos que primeiro precisamos de uma maneira de alcançar o nó DOM correspondente. São rotas óbvias para fazermos alguma coisa, precisamos de uma maneira de acessá-la. E nas seções anteriores, discutimos como podemos usar a API DOM para acessar determinados elementos HTML. Sim, usamos o ID, a API selecionada, essa cláusula, o nome da tag. Foi divertido e não foi intuitivo e você tem realmente a maioria destes banana. Embora tenhamos aprendido sobre esses métodos de acesso, infelizmente não é suficiente. Precisamos de um pouco mais. Precisamos da cereja no topo. Aprendemos que o DOM é estruturado como uma árvore de nós, certo? Já vimos isto. E tendo em mente que o DOM é estruturado como uma árvore de nós. Muitas vezes queremos executar ações em elementos, não necessariamente de acordo com o ID ou classe ou nome da tag, mas que têm relacionamentos entre si. E a palavra-chave aqui, é claro, são relacionamentos. Para fazer isso, precisamos de uma maneira de passar de um nó para outro nó. Em outras palavras, precisamos de uma maneira de atravessar o DOM. E é disso que se trata toda esta secção. Então sente-se, pegue um café e vamos começar. 5. Os 3 objetos mais importantes: Antes de seguirmos em frente, há apenas algo que eu quero apontar para vocês o que é mais importante ao lidar com o DOM e você provavelmente já sabe disso. Eu só quero re-enfatizar isso porque nós vamos estar entrando em muito mais detalhes e muito mais avançado nas próximas seções e fazer apenas Christie, vamos olhar para as duas primeiras linhas de código R. Deixe-me realmente só ampliar lá se pudermos ver essas duas linhas primeiro temos este doctype, e então temos esta tag HTML, uma cabeça. Podemos pegar essas duas primeiras linhas e combiná-las com o Rei de todo o nosso navegador. Podemos então dividir isso em três coisas mais importantes quando se trata do DOM e precisa de três coisas no objeto janela, o documento e o HTML. E nós já vimos muito disso antes, mas se formos ao nosso navegador e acessarmos o console, novamente, deixe-me ampliar aqui para você. O que podemos fazer é fazer coisas assim. Se realmente nos sentimos tão inclinados, podemos definir uma variável chamada objeto janela global. E podemos fazer disso um sinal para a janela de valor. E então, é claro, podemos acessar esse objeto de janela global assim. E podemos abri-la e podemos ver todas as propriedades da janela. Sabemos disso, já vimos, vimos. Mas é muito estranho que estejamos atribuindo a uma variável, não é? E o mesmo que poderíamos fazer com um documento, poderíamos chamá-lo de modo de documento adenoide. Poderíamos atribuir isso com o local do documento. Isto é muito estranho, não é? Nunca fazemos essa codificação. E a razão pela qual não temos que fazer isso é por causa da nossa importante janela e o documento é que o DOM nos fornece acesso fácil a eles via janela e documento. Estes são conhecidos na indústria de programação como melodias globais. Então isso só significa que não temos que declará-los explicitamente, como eu acabei de fazer. Você pode simplesmente agitá-lo e usá-lo diretamente para fora do recipiente. Então nós podemos realmente apenas janela brilhante. E temos acesso às propriedades da janela. Podemos escrever documento e temos acesso às propriedades do documento. O que sobre isso? Html? Deixe muito fácil de obter também. Podemos apenas dizer que HTML, elemento HTML. Então podemos acessar nosso documento. Dentro do nosso documento, colocamos uma propriedade chamada elemento documento, e que é o mesmo que o nosso código HTML se nós digitar elemento HTML agora, elemento HTML. Lá vamos nós. Como nosso HTML, temos nossa cabeça e compramos nosso corpo. E se abrirmos o corpo, é literalmente um código de lei. Então lá vamos nós. Pouco antes de avançarmos, eu queria lembrá-lo que as três coisas mais importantes no objeto janela, o documento e o elemento HTML. E estes são muito facilmente acessíveis a partir do DOM porque eles são tão importantes. Legal. E eu disse, acho que você entendeu o ponto. Vamos seguir em frente. 6. Os pais, crianças e irmãos: Estamos atravessando esta mão pode parecer lento, mas acredite, você vai ser um protesto absoluto. No final, acabamos de olhar para o nosso doctype e nosso HTML, as duas primeiras linhas de código. Agora vamos começar a ir mais longe. Uma vez que vamos abaixo desse nível de elemento HTML, dom vai começar a ramificar para fora e ficar muito interessante. Neste ponto, temos várias maneiras de navegar em torno do nosso DOM. Uma maneira que já vimos muito disso é usando QuerySelector e selector consulta tudo para obter precisamente os elementos que estamos interessados em. Para muitos casos práticos, esses dois métodos são limitantes demais. Por que eles podem ser limitantes? Porque às vezes não sabemos o que procuramos. E como programadores, quando você está navegando no DOM, você vai estar se encontrando nesta posição o tempo todo que você não tem certeza do que você está procurando. Você não tem um seletor CSS. Ok, ótimo. Então, o que fazemos? Bem, o que nos ajuda é isso, sabendo que todos os nossos elementos no DOM têm menos uma combinação de pais, filhos e irmãos para confiar. Vamos visualizar isso. Acabamos de codificar nosso HTML. Vamos colocar a tela. Isto deve parecer muito familiar. Fizemos isso juntos. Na verdade, a única coisa que eu adicionei agora foi que eu adicionei uma nota de comentário. Você pode ver que eu editei, este é um nó de comentário. Eu só queria tornar as coisas um pouco mais complicadas para nós. Vamos ver todo o nosso código dentro do nosso corpo. O que podemos dizer sobre esta tag principal? Vamos desenhar isso de novo. A tag principal é uma espécie de arrefecer no nível mais alto. E sim, estamos ignorando o HTML real e o próprio corpo, que começa com esta tag principal. Abaixo desta tag principal, temos três tags de elemento muito amplas. Não leia H1, a div e a profundidade. Até agora, tudo bem. Podemos até ir mais fundo no concreto da rua. Sabemos que temos o H 2 e os parágrafos, e todos eles estão aninhados dentro da dose. Até agora, tudo bem. Mas agora quero que comecemos a olhar para a relação familiar porque é isso que vai nos ajudar a avaliar o que realmente vai nos colocar à frente e nossa coréia. Como funciona essa relação familiar? Como é que parece? Sabemos que esse elemento principal é o pai. E o H1 e as duas etiquetas div? Bem, essas são as crianças. E que tal abaixo disso? E quanto a todos esses H 2s e as etiquetas de parágrafo? Bem, podemos discutir dia ou irmãos. Então, sim, nós temos. Temos os pais, temos as crianças abaixo das crianças. Temos muitos desses P's e H2S. Podemos depender do que estamos olhando. Mas vamos apenas dizer que eles são irmãos que H2 e o P, Por exemplo. Vamos dar um passo em olhar para as crianças. Você sabe, nós temos a tag H1 que em duas tags div, nós dissemos que essas são crianças vão, se nós estamos apenas olhando para elas isoladamente. Sabemos que eles também podem ser irmãos. E por que podemos dizer que irmãos vão? Porque eles sombream o elemento principal como o pai. O elemento H1 não tem filhos, mas os elementos div, eles têm filhos? A idade 20 e p elementos de crianças dos elementos div, e todos os filhos dos mesmos pais ou irmãos também. É por isso que chamamos esses corantes de irmãos. Mas o ponto que eu estou tentando dizer é que, assim como na vida real, o pai, o relacionamento filho e irmão é baseado no caminho na árvore que estamos e o que estamos olhando? Quase todos os elementos, dependendo do ângulo com o qual olhamos sob, podem desempenhar vários papéis familiares. Você mesmo pode ter um filho, nesse caso você será o pai. As células duplas também podem ter um pai sendo seus pais, sua mãe ou pai. Espero que esteja fazendo cenas. Espero que se divirta, mas não pare. Estamos apenas começando. Vamos pular para a próxima palestra. 7. : Neste ponto, você sabe como é importante para nós subir e descer e Dawn, você está recebendo uma cena de como nós lemos a árvore genealógica. É bem intuitivo. E nós vamos entrar em uma abordagem mais prática agora. Vamos ver quais métodos podemos usar para acessar diretamente a partir da API DOM para mover para cima e para baixo a rua. Então é super excitante e espero que esteja se divertindo. Também tenho este café. Você pode ver aqui uma bela, agradável, agradável, bela xícara de café. Oh, tem me mantém vivo. Eu não sei por que é algo sobre uma xícara de café, apenas uma tonelada de me anima. Então aproveite esses nichos e vamos entrar nisso. Deixe-me tomar um gole rápido e então entraremos em promessas. E eu sou mesmo que seja um pouco de biscoitos, tornar-se ativo é legal. Vamos entrar nisso. Para nos ajudar a subir e descer a árvore DOM. Como eu mencionei, temos algumas reuniões de API DOM que podemos usar, e você deve ser capaz de inferir pelos nomes quanto ao que eles fazem. Quais são alguns desses métodos? Temos novos fora-da-lei, um par de nós filhos, nós irmãos anteriores, próximo irmão, crianças de mão. Estes são os principais métodos que vamos usar para atravessar para cima e para baixo no DOM. E não se preocupe, não se sinta intimidado ou sobrecarregado. Nós vamos estar entrando em cada um desses no curso. Mas o suficiente disse, vamos começar a ver o que estes fazem. Mais uma vez, vamos puxar o nosso código. Foi o que fizemos para conseguir. Lembre-se, e o ponto de partida é esta tag principal, que é o nosso invólucro para tudo. Este é o ponto de partida. Agora, para este exemplo aqui, eu quero que nós ignoremos essa tag div do meio. Quero que ignoremos o ID do representante de identidade. Então vamos fingir que não temos. Só quero que olhemos para a etiqueta H1 e a etiqueta div inferior. E a única razão pela qual estou fazendo isso, como, você sabe, a página vai ficar muito confuso fatores incluem mais e mais elementos. Só quero que olhemos para estes dois com pistas de AINE, desenhemos. O que é que se parece? Sabemos que temos o corpo debaixo do corpo. Colocamos o principal, sob a tag principal, colocamos o 81 e o div. E dentro do div com o que o H2 e o elemento de parágrafo. É assim que podemos mapear. É assim que podemos pintar o DOM. E a primeira coisa que quero que olhemos para o ponto de partida é com os pais. Isso é certo. E como eu mencionei, o nome em si o dá e é bastante intuitivo. Então vamos dizer que começamos no fundo da nossa árvore, o H2 e o elemento de parágrafo. Sabemos que os nós pai, se nós digitar o nó pai método nesse elemento H2, vamos ser retornado. O que? Nós vamos ser devolvidos seu pai sendo o elemento div, faz sentido, faz sentido. E da mesma forma com o próximo nível para cima, temos o elemento H1, temos desenvolvimento. Eles são nós pai ou esse elemento principal. E, claro, podemos fazer exatamente o mesmo com Maine ou fora. Antes de irmos mais longe, quero que vejamos apenas um exemplo de usar o mapa pai. Digamos que vamos ficar presos na etiqueta H2. Bem, atualmente há uma maneira de todos nós em nosso código, como nós acessamos propriedades no bisavô da H2? Esse não é o pai, não o pai do pai. Que a grande etiqueta de corpo avô, como é que chegamos todo o caminho até o se estamos sentados na tag H2, como se vê, a resposta para isso é muito fácil porque estamos autorizados a encadear propriedades e métodos juntos. Deixa-me mostrar-te o que quero dizer. Vamos pular para o console ou escrever mesmo. O exército de homens foi visto aquele filme. Você se lembra também chamado Ace Ventura como detetive infantil. Ele sempre deve dizer “Tudo bem”, então. HDFs, senhor. E como você está esta tarde? Tudo bem, então eu tenho um pacote para você. De qualquer forma. Nós estamos aqui. E o exemplo que queremos olhar, como mencionamos antes, é que estamos sentados nesta tag H2 e queremos acessar a propriedade do corpo. E para o nosso bem, vamos apenas dizer que queremos mudar a cor de fundo em todo o corpo para azul. Como faríamos isso? Vamos para o nosso console e começar a ver isso em ação. E você pode ver aqui que eu nem toquei nele desde o nosso último exemplo. Então deixe-me limpar este console e arrumar. E agora vamos começar a ver como o nó pai funciona. Primeiro, o que eu quero fazer é ir para a aba Elements e olharmos para este corpo, e abrirmos o nosso invólucro principal. Quero chegar ao nosso H2 e é isso que estou tentando fazer. Ele tem o nosso H2. Então, se clicarmos na membrana natural, uma das palestras anteriores, eu lhe disse o que isso é igual, igual a cifrão significa. Bem, agora que selecionamos, podemos ir ao nosso console e podemos parar. Então vamos apenas dizer que vamos h, h2 é igual a dólares lá. E novamente, então se eu apenas consolá-lo para a tela, podemos ver que temos piada quente do elemento H2 dia. Até agora. Tão bom. Se estamos neste elemento e acessamos o nó pai, lembre-se, o que vamos conseguir? Isso é certo. Vamos pegar toda a div que envolve este código. Lembrei-me. Não tinha ideia de dente rápido, é o pai. Mas eu mencionei na palestra O que é realmente legal sobre esses métodos específicos, podemos acorrentá-los porque lembre-se que queremos chegar todo o caminho para o elemento corpo. Então vamos começar a trabalhar do nosso jeito. Absolutos existem o nó pai, e agora podemos acessar seu nó pai, que div wrapper. O que é que isso nos dá? Bem, isso mesmo, dá-nos este elemento principal. Se formos ao editor de código, por que isso? Bem, lembre-se que começamos com a etiqueta H2. Seu pai é o div. E este div tem irmãos. Vamos a um que tenha o div. Estes são irmãos. Não é o pai dele. É pai é este elemento principal desta tag principal. E os pais dos principais elementos, Hayek é o corpo. Como tenho certeza que você já adivinhou. Temos que fazer X-Y-Z, o que acabamos de fazer. Você sabe o que? Em vez de redigitar, vou te dar um protótipo rápido. Você pode pressionar a seta para cima no teclado e , em seguida, apenas fornece a última parte de código que você escreveu. E então, em vez de escrevermos, e novamente, podemos clicar na seta para cima. E agora sabemos que isso nos dá o elemento principal. Tudo o que queremos fazer é acessar seu pai. E boom, Chaka LaCa, chegamos a este corpo. Como causa. Então eu só queria mostrar a vocês que como nós podemos realmente atravessar todo o caminho até o nosso DOM para chegar ao ponto de partida, que é este corpo. E antes de terminarmos, sim. E mudar a cor de fundo para azul, eu mudei de idéia. Eu pensei, você sabe o que? Eu gostaria que você tentasse dar uma chance sozinho. Mas desta vez quero que comecemos pela primeira tag div. Então, se eu voltar para a codificação nele, Eu quero que nós comecemos com esta primeira tag div e um 12 Você muito rápido agora, pausar este vídeo. Eu quero que você tente acessar o elemento do corpo e mudar a cor, fundo, cor, toda a página para produzir estes, dar uma chance, dar a ele um cara. Não importa se você não conseguir. Isso é o que eu sou. Sim, unidade completa Owens verificando a unidade e não vai impactar este curso de forma alguma. Eu só quero que você aprenda e eu quero que você tire o máximo proveito deste curso. Então, pausar o vídeo e eu vou dar uma chance. E nos próximos segundos vou mostrar a vocês como fazer uma escola para que vocês possam pausar agora. Ok, feito. Espero que tenha dado uma chance. Então, como eu mencionei, eu quero começar neste elemento div. Volte para a nossa consola. Vamos limpar tudo. A primeira dica é que quero que acessemos o restante. Eu disse que quero começar, data e uso que poderíamos apenas digitá-lo em nosso console diretamente. Mas quero que tomemos medidas nessa abordagem porque, como programador, temos que ser lógicos. E você verá que é muito mais fácil para crianças logicamente de alguma forma em escrever uma longa cadeia de código, ao contrário de ver isso. Então, como é que fazemos isso? Então vamos dizer que vamos dv é igual a quê? Bem, neste caso sabemos que podemos usar nossos métodos de acesso DOM para que possamos acessar nosso documento. Qual deles vamos usar? Essa quantia? Podemos usar alguns. Ele tem uma identificação de rápido, não é? Então nós poderíamos usar, e eu estou indo apenas para usar elementos Git, obter elementos pelo nome da tag, Nano, o nome da tag que ele tem div. E como eu disse, eu queria que usássemos a primeira absorção. Ok, então se uma análise de log de console, certifique-se de que o caminho certo, e lá vamos nós, é o lado certo porque ele tem uma identificação de Rapa. Poderíamos ter usado obter elemento por ID. Há muitas maneiras de esfolar um grão de gato, mas o que queremos fazer agora? Bem, agora queremos acessar os avós e vamos definir uma variável chamada avô. E o avô que vai começar no div. Vamos ter que pegar seu nó pai. Então nós vamos ter que obter seu nó pai. Então vacinas. Então eu estou meio que começando com os nós pai derivados vai ser o elemento principal e seu nó pai vai ser o corpo. Se devolvermos isto e com o tipo do avô, eles vamos, temos a etiqueta do corpo. Quão legal somos nós? E sim, vamos fazer exatamente o que precisávamos fazer. Nós acessamos a propriedade style e mudamos a cor de fundo para azul. A cola precisa estar na notação de string. Desculpe. Lá vamos nós. Whoo, isso trouxe um amigo que tem hediondo aos olhos. Mas de qualquer maneira, espero que você tenha se divertido nesta palestra, herbicida para se sentir mais intuitivo acima do pai do nó. Está tudo bem, certo? E é intuitivo. Acabamos de trabalhar do fundo da árvore DOM até o fim. Não é tão difícil, parecendo finito. Ainda não terminamos. Quero voltar para as linhas anteriores que queremos. E quero que comecemos a investigar mais destes métodos. Siena. 8. Anterior e próximos irmãos: Estou me divertindo. Foi aqui que paramos da última vez. Olhamos para o nó pai e um hub está se tornando mais intuitivo. Então este é os pais, este é o nó pai. Agora quero que vejamos os irmãos, as rivalidades entre irmãos. E novamente, vamos começar no fundo da nossa árvore DOM, o NH2 e o parágrafo. Sabemos que se estamos começando na tag H2, que o próximo método irmão irá nos retornar o parágrafo. Como eu mencionei no anterior mais tarde, as próprias palavras, os nomes dos métodos são tão intuitivos, como você deve saber o que eles vão fazer antes de eu explicar. E se começarmos pela tag de parágrafo e queremos voltar para a tag H2. Sim, o método é chamado irmão anterior. Mesmo se estamos um nível acima na árvore, começamos em um, indo para os derivados o próximo irmão. E, claro, se você adicionar uma div e você quer obter 81 devolvidos, você pode apenas chamar o método irmão anterior. Incrível. Então esta é a cama dos irmãos de novo. Você me conhece, cara. Adoro ver exemplos práticos. Então vamos rapidamente saltar para o console e dar uma olhada em como podemos usar a próxima inação irmão. Veja agora, eu pensei que este seria um lugar brilhante para nós apenas pararmos rapidamente e olhar como irmão anterior funciona. Então, qual é o exemplo que podemos fazer? Bem, vamos olhar para esta etiqueta de parágrafo aqui. Ok, se eu realmente selecionei nós neste parágrafo, digamos que queremos acessar a piada do dia, seu irmão, seu irmão anterior, e queremos mudar essa cor de fundo para azul. Como faríamos isso? Há algo aqui que pode surpreendê-lo. Então vamos para o console. E como vimos em palestras anteriores, podemos definir nosso parágrafo pelo item selecionado atualmente em nosso DOM usando o cifrão 0. Agora, se definirmos e tentarmos acessar o irmão anterior, você já pode ver no console que ele não retornou. Aquela piada H2 do dia que voltou. Isto toma nota, o que se passa com isso? Bem, durante o stress vão saltar à frente. Nós vamos estar olhando em detalhes para as diferenças entre irmão anterior. E se tentarmos acessar e outros elementos, você verá aqui este elemento anterior de irmãos. São duas coisas diferentes, muito próximas, mas são diferentes. E uma das nuances do irmão anterior é que também inclui todos os tipos de nós, não apenas nós de elementos. Então, se olharmos para o que o texto realmente é, você pode ver aqui que é um retorno, é um personagem. Então, se nós fechá-lo, a razão que está acontecendo se nós formos para o nosso console aqui, esta realmente retornar declaração após a tag H2 para chegar ao parágrafo. Deixe-me mostrar que não estou falando besteira. Se eu excluir todos os caracteres entre as duas tags, isso deve funcionar. Agora, vamos voltar para a nossa consola. Vamos refrescar. Aqui. Comece de novo. Então deixe P é igual ao item selecionado no momento, que sabemos que é o parágrafo. E agora, se acessarmos o irmão anterior, isso deve funcionar. Vinhos finos não estão funcionando. Ele não foi definido, desculpe. Então, vamos refrescar. Na verdade, tenho que reenviar. Então, vamos selecionar nosso parágrafo. Vai para a consola. Agora podemos fazê-lo. Deixe p igual $1. E agora podemos acessar seu irmão anterior, como fizemos da última vez, mas agora não temos espaços extras ou caracteres entre eles. Nós batemos Return e dia que vamos com literalmente temos essa classe de alegria e nós temos o H2. Isso é exatamente o que queríamos. E para provar para você, podemos acessá-lo. Mudança de estilo, fundo, cor para azul. Lá vai você. Costa de casa para fazer sentido se você não tem certeza, o que eu acabei de fazer, eles não se preocupam, nós vamos entrar nele mais tarde por agora. É assim que o irmão anterior funciona. Vejo você na próxima palestra. 9. Crianças, firstChild e firstChild: Estou animado e estou gostando do material. Eu adoraria um dois. Nós apenas olhamos para sub-links, nós vimos como eles funcionam. Nós olhamos para, uh, métodos antes de irmãos. Lembre-se do que olhamos, olhamos para os pais, mas qual é o amor de todos os pais? Isso é apodrecimento. Vamos ter alguns filhos. Os pais amam seus filhos. E você pode estar pensando que isso vai ser tão fácil quanto os outros. E deixe-me avisá-lo, não é quando começa a ter dois filhos. Temos um monte de métodos disponíveis para nós e alguns deles, como, você sabe, tem intuitivo como os outros, mas está tudo bem. É para isso que estou aqui e é para isso que vamos olhar. Em primeiro lugar, quero que comecemos por analisar os primeiros métodos de segundo filho. Como funciona o primeiro segundo filho? Em primeiro lugar, a sintaxe do método é o primeiro filho e o emprego perdido. E as propriedades primeiro filho último filho referem-se aos elementos pais primeiro e último filho. Deixa-me mostrar-te o que quero dizer. Vamos começar com essa tag div. Como essa idade se relaciona com isso? Bem, como você pode imaginar, esse é o primeiro filho do div. Se olharmos para a tag do parágrafo, como você suspeitaria, é o filho perdido da div. Novamente, vejamos isso do ponto de vista dos elementos principais. Seu primeiro filho é um 20 GHz, seu filho perdido é a tag div. Mas e agora esse elemento corporal? Aqui podemos ver que o pai, este corpo só tem um filho. Caso de vontade. Não é tão difícil. Podemos deduzir que o primeiro filho e o filho perdido apontarão para exatamente o mesmo elemento. E o Element não tem um filho? Olha para a nossa etiqueta H1, não tem filhos, pois não? Nesse caso, essas propriedades irão retornar null. Então o primeiro filho e o filho perdido retornarão. Agora, neste momento você pode estar pensando, cara, isso é super simples. Baixo. O complicado comparado com as outras propriedades que vimos até agora é a propriedade das crianças. Isso é apenas um pouco mais complicado, mas novamente, com um pouco de prática e um pouco de exemplos práticos, você verá que não é tão difícil quando você acessar a propriedade das crianças em um pai, você basicamente recebendo uma coleção de filhos elementos que o pai tem. Faz sentido? E lembre-se, nós olhamos para os métodos de acesso no DOM quando vendemos isso. Alguns desses métodos como getElementsByClassName, getElementsByTagName, são coleções transformadas. É o mesmo aqui. Mas como vimos em palestras anteriores quando usamos getElementsByTagName, nome da classe, et cetera, et cetera. Embora essas coleções pareciam uma matriz, elas não eram uma matriz verdadeira. Então tenha isso em mente. Esta carga parece e se sente como uma matriz. Nesse caso, quando acessamos a propriedade filhos, não é uma matriz verdadeira. Assim, podemos iterar através do processo de coleta ou acessar o Trojan individualmente, assim como veremos em nossos exemplos e como fizemos anteriormente. E se eu rapidamente, a condenação devolvida a nós desta propriedade georgiana tem aquela propriedade links automáticos que nos diz quantos itens estão na coleção. E então, é claro, nos permite percorrer isso. Se sua cabeça está girando agora, por favor, não se preocupe, nós vamos codificar e vamos ver como tudo isso parece em breve. Então deixe-me mostrar outro tipo de obras de curta duração. Mas desta vez eu quero começar pelo topo, olhando para o corpo e nós estamos olhando seus filhos e dizer que queremos acessar esse elemento principal. Ou você teria que fazer se começássemos com o corpo. Nós existiremos. É propriedade das crianças. E para obter o primeiro item na coleção, assim como um array, nós acessá-lo a partir de seu número de índice. E sabemos que em JavaScript e muitas outras linguagens e a API DOM, o primeiro item na matriz começa na posição 0. Então não é tão difícil. E agora se quisermos obter a tag H1 e adicionarmos o elemento principal, como faríamos isso? Novamente, começamos no elemento principal. Nós acessamos sua propriedade filhos e acessamos o primeiro item nessa matriz. É intuitivo. E com o div, sabemos que esse é o seu segundo trabalho. Então acessamos o elemento principal, acessamos sua propriedade filhos, mas desta vez acessamos o segundo item na matriz, o que, claro, nos devolverá esse desenvolvimento. Claro, podemos fazer exatamente o mesmo processo com o H2 e o P, Mas desta vez de reutilizar a pomba como ponto de partida para obter as crianças lidar, É fazer cenas. Mas agora eu realmente quero saltar para o console. Este é um tópico importante para nós dominarmos. Vou ver agora. 10. Crianças — exemplo: Trabalhar com crianças é descobrir sim ou não. Você está pensando no mundo real também? Mas, sabe, é o mesmo com o DOM. As crianças podem ser difíceis, que podem ser teimosas, e pensam que sabem de tudo. Então, de qualquer forma, é com isso que vamos ter que lidar. Sim. E quero que passemos um pouco de tempo com crianças. Então você vai até ver na próxima palestra que vamos entrar em mais detalhes. Sim, eu só quero tipo, você sabe, eu pensei em pular para longe dos slides que estamos apenas olhando. E vejamos aqui alguns exemplos práticos de trabalhar com crianças. Então deixe-me me livrar de mim mesma para que você possa ver Beta Adios. E vamos olhar para este nosso corpo. Quero que olhemos para o próprio elemento do corpo. Então vamos voltar ao nosso editor de texto aqui. Eu quero olhar para este elemento corporal e eu quero olhar para sua propriedade filhos. Quantos filhos acha que deveria ter? Pode ter havido uma pequena pergunta. Só tem uma propriedade infantil direta, o elemento principal. Ok, então tem o nosso editor de texto. E o que é realmente legal antes de começar a codificar aqui é que o corpo está diretamente acessível no próprio objeto do documento. Então, podemos apenas dizer crianças do corpo magro ser atribuído ao elemento corpo do documento e com na rede. Lembre-se de que eixo queremos acessar as crianças, perdê-lo. E lembre-se que voltou. Isso é certo. Ele retorna uma coleção de todos os seus filhos. Então, se apertarmos Return e nós console logar isso, nós obtemos uma coleção HTML. Nós realmente sabemos o que é uma HTMLCollection. Então, quão legal é isso? Ou adicionar? É por isso que precisamos aprender o básico porque tudo se baseia um no outro. E podemos ver que esta coleção é composta de dois itens. Não se preocupe com o roteiro. Este script é meu servidor live que é injetado automaticamente pelo servidor live para que isso seja executado diretamente do meu Visual Studio Code para todos os fins práticos, temos apenas um item nesta coleção e que é este elemento principal. Lembre-se do que eu disse sobre o HTMLCollection ser uma espécie de uma matriz de vontade, porque é uma espécie de matriz. Podemos acessar o método completo e podemos realmente loop através de todos os elementos na matriz. Então digamos que queríamos realmente ter uma borda vermelha em torno do elemento corpo. Como faríamos isso? Bem, podemos usar um simples loop para. Então, para eu é igual a 0, eu menos que. Lembre-se de como dissemos que o corpo Jordan tem uma propriedade de comprimento para que possamos acessá-lo diretamente. E, claro, cada iteração queremos aumentar I. Isso é muito simples. Você saberá como fazer isso. Este é apenas um simples loop para. O que queremos fazer em cada iteração? Vamos acessar seu filho? Então, isso deve dizer que a criança é atribuída ao valor das crianças do corpo. E dependendo de onde estamos no loop, ele vai retornar essa criança específica e sempre foi querendo fazer é que queremos mudar essa borda de estilo para, digamos apenas cinco pixels, gradiente sólido. Lá vamos nós. Vamos fazer isso. Isso faz sentido? Então vamos voltar. E boom, acabamos de fazer isso. Fizemos um trabalho incrível. Sim. Então lá vamos nós. Nós acessamos as crianças do corpo. Nós fizemos um loop através dele. E eu sei que não havia muito ponto de looping através porque na verdade só tínhamos um item. O principal, eu só quero, Eu quero que você tenha uma sensação intuitiva de como podemos usar loops e crianças e HTMLCollection. Está fazendo santos viés 100, não muito feito. Há mais uma coisa que eu quero mostrar a vocês agora, este foi o exemplo simples intuitivo é algo mais que pode ser um pouco menos intuitivo, pode ser um pouco de uma pergunta enganosa. O que eu quero fazer é que eu quero que nós acessemos nossa etiqueta H1. Você acha que os filhos da etiqueta H1? Vamos voltar aos nossos dados de texto para olhar para a tag H1. Vê bem-vindo. Há algum filho dessa tag H1 intuitivamente, você pensaria que não. Lembre-se onde está o diagrama, sem filhos e você sabe, você esperaria que ele fosse nulo para crianças. Bem, vamos dar uma olhada no nosso console se esse é o caso. Alerta de spoiler, não é. Mas de qualquer maneira, vamos começar acessando essa tag H1. Como é que fazemos isto? Novamente, podemos usar qualquer um dos nossos métodos de acesso DOM. Então começamos acessando a raiz da nossa página web sendo o documento naquele atlas do eixo do fim de semana, Dora, de diferentes métodos de acesso. Vou usar getElementsBytagName novamente, porque sabemos que só temos uma tag H1 em nosso documento. Vamos, temos o nosso 81. Posso até trancar para você. Você pode ver que é um HTMLCollection e Nissan cada um. Ótimo, então nós temos os leads H1 agora eixo sua propriedade filhos. Como é que nós, como faríamos isso? Bem, eu quero realmente sair do elemento H1 em uma órbita eu não nesta coleção. Então nós acessando a coleção agora, eu quero o primeiro item nesta coleção e então vamos acessar sua propriedade filhos. O que esperavas ver? Nós aqui temos uma coleção HTMLcom nada nele. E isso é intuitivo. É o que esperaríamos, certo? Dissemos que não tinha filhos. Tão legal. Tudo está bom e bem, mas e se usarmos o primeiro filho e o filho perdido? O que aconteceria lá? Você pode estar pensando fora também se espera que não contenha nada. Então vamos ver, vamos ver. Então nós acessamos H1, o primeiro item desta coleção, e agora eu quero que nós acessemos o primeiro filho. Se devolvermos isso, obtemos este bem-vindo toma nota foi explode sua mente. Então esta etiqueta H1 realmente tem uma criança e a criança é o próprio gosto. É este gosto bem-vindo. E porque ele só tem uma criança leva criança, você esperaria que fosse o mesmo se escrevêssemos criança perdida quando perto sim. E é a mesma coisa. E Augustus é o bit que é um pouco menos intuitivo, é que o primeiro filho e filho perdido retorna qualquer tipo de nó filho, incluindo toma nota de que quando acessamos a propriedade Trojan, ele só nos retorna eliminar nós. É por isso que devolveu uma coleção vazia contra primeiro filho e filho perdido, o que nos devolveu o gosto. Não se preocupe muito com as diferenças entre o primeiro filho e os filhos. Vamos entrar nas escolas, por enquanto, para começarmos a entender. Outra coisa que é interessante é se você só queria que os elementos faz outra propriedade. Então este eixo, nosso primeiro elemento H1 nessa coleção. E em vez de digitar primeiro filho, podemos falar sobre primeiro elemento filho, que retorna intuitivamente o primeiro elemento e filho deste elemento em particular. E porque sabemos que ele não tem nenhum elemento filhos, ele vai retornar nulo, que é o que esperávamos e o que vimos nos slides anteriormente. Fizemos muito e obrigado por me apoiar. E eu tive que assinar para entender essas coisas. Dificuldade E quanto mais você trabalha com ele, mais intuitivo é. Não quero que isso intimide. Não deveria ter dominado isso, nenhum de vocês se divertindo. E como as crianças são tão importantes, quero que discutamos as crianças e épicos mais detalhes fazem algumas coisas muito, muito legais e interessantes. 11. Crianças e descendentes: Como mencionei, as crianças são tão importantes quando se trata de trabalhar com o DOM que precisamos ficar um pouco mais. Sabemos que as crianças são apenas elementos que estão diretamente aninhados abaixo de outro elemento. Mas vamos dar um passo atrás. E elemento HTML pode ter muitos níveis de outros elementos aninhados abaixo dele. E todos esses elementos aninhados são chamados descendentes do nosso elemento inicial. E em nossos exemplos anteriores, nós até vimos que há um monte de bom para os elementos abaixo, digamos nosso elemento corporal. Mas este tipo especial de descendente e este descendente espacial é um elemento que é um nível de equipe agradável abaixo de um determinado nó. E é chamado de elemento. E um elemento filho importante, só pode ter um pai. Sabemos que todo o gosto em seu HTML é também um nó leva no DOM, um x, y. e nós vendemos em uma espécie de nuances peculiares quando olhamos para a nossa tag H1, que podemos dizer é o pai, quando tentamos acessar seu primeiro filho e filho perdido, pensando que ele ia retornar nulo. Vimos que ele realmente voltou leva a si mesmo porque leva, é uma criança, é uma nota toma do pai como faz sentido. A outra coisa que vale a pena mencionar, a SEC, temos uma variedade de métodos disponíveis para nós que nos permitem olhar para as propriedades de crianças e crianças. Vimos alguns destes, mas os que quero concentrar-me agora naqueles nós frios e crianças. Vejamos as diferenças entre esses métodos. Nós filhos e filhos. Vamos colocar na nossa tela aqui. E vejamos as diferenças. Em primeiro lugar, se usarmos nós filhos, ele vai retornar uma lista de nós. E lembre-se que nós já passamos pela lista de nós anteriormente em nossas naturezas. Como esfria em uma lista não ordenada pode conter qualquer tipo de nó, certo? Lembre-se, para que saibamos que o acesso a nós filho ponto retorna ou nó filhos, incluindo nós de texto. Considerando que se olharmos para a propriedade filhos, sabemos que retornou na coleção HTML. Sabemos que podemos acessar o método dot Jordan em qualquer elemento porque é uma propriedade de um elemento. E só as roupas têm essa propriedade infantil. Devido a isso, sabemos que esses filhos são todos do tipo elemento que contém apenas um tipo de elemento. E net é a maior diferença entre o filho sabe e os filhos em nós filho net retorna uma lista de nós de qualquer tipo de nó usando o método filhos, por outro lado, só retornará um nó elemento. Sim, você nos adivinhou na teoria do título. Vamos pular para o editor de texto e eu quero passar por um exemplo mostrando a diferença entre esses dois. 12. Crianças vs childNodes — um exemplo: Agora eu quero que paguemos nós filhos versus crianças Mackay, o que retorna uma nova lista, que um retorna uma coleção HTML. Já vimos isso, mas vamos dar uma olhada nesses dois exemplos práticos rapidamente. Então vamos levá-los. Este é o nosso código normal que fizemos juntos que temos feito através desta seção inteira em um teste para não adicionar mais a este código. Especificamente, quero que adicionemos uma lista. Vamos adicionar uma tag de lista não ordenada dentro disso, vamos ter três itens. Item um, e faremos mais dois itens, item 2 e item 3. Lá vamos nós. Vamos salvar isso. E vamos ao nosso site. Podemos ver aqui que temos o item 1, 2 e 3. Acabamos de nos adicionar. Isso é limpar o console. Você pode ver que estou fazendo isso em tempo real. A propósito, este é exatamente o código que deixamos fora da última vez. Deixe-me apenas atualizar a página para o console. Então aqui estamos uma tela em branco. Em primeiro lugar, eu quero olhar para esses nós filhos. Vamos dar uma olhada nisso primeiro. Então vamos pegar nosso u, nossas varas são lista desordenada. Como podemos fazer isso? Bem, de muitas maneiras novamente, eu vou apenas usar o que temos usado recentemente e é getElementsByTagName. Novamente, o nome da marca aqui é o URL. Sabemos que só temos um elemento UL em todo o documento. Então ele vai ser um HTMLCollection com um item nele. E eu só quero realmente existir esse item diretamente. Então é por isso que estou acessando o primeiro item. E Amy, e essa deve ser nossa tag UL se agora acessarmos nós filhos. O que acha que vai devolver o link? Só vai devolver três itens, item 123. Não, não é tudo o que estou tentando fazer. Restante e nós filho retorna uma lista de nós, o que significa que ele vai incluir todo o texto e carregar os freios e retornos em nosso documento. É por isso que se abrirmos, eles são na verdade sete itens. Então, sim, ele tem nossas três tags LI. Há um, há o segundo, o terceiro. Que no meio sabemos que temos esses retornos. Então, se abrirmos este texto, podemos ver o valor do nó é um retorno e é todos os espaços. Voltamos ao editor de texto. É literalmente o retorno. E todos os espaços. Está fazendo sentido? Então, no próximo slide, como nós, por exemplo, percorreríamos todos esses itens e mudaríamos a cor de fundo? Bem, vamos deixar de lado o loop por enquanto. O que poderíamos fazer é acessar o primeiro elemento filho, não poderíamos ganhar. O que eu quero dizer com isso? Vai me salvar queria mudar a primeira tag LI para ler. O que podemos fazer é começar com a nossa lista desordenada. Podemos acessar o primeiro elemento filho. Podemos então, obviamente, modelar essa cor de fundo e podemos fazer essa taxa igual, por exemplo. Então lá vamos nós. Essa é uma maneira de fazer isso, mas isso é bastante complicado, não importa porque só podemos acessar um item de cada vez. Aqui nós acessamos o primeiro elemento filho, não o primeiro filho. Lembre-se, o primeiro filho também retorna tipo de cada tipo de intuição nerd que leva, É assim que acessamos o primeiro nó elemento. Então, como podemos usar um loop? Alguma ideia? Will, assim podemos usar crianças. Lembre-se, eu queria comparar nós filhos, que nós olhamos. E eu quero comparar crianças, crianças retornos e HTMLCollection. E já sabemos que uma HTMLCollection tem que consistir apenas em notas. Então vamos fazer isso. Vamos agora defini-lo, eu vou filhos como sendo o URL. Agora eu quero acessar a propriedade das crianças. Faz sentido? Se nós consola logar isso, podemos apenas confirmar antes de começarmos a codificar nosso for-loop que isso retorna um HTMLCollection agora com apenas três tags LI. E como nos movemos através desta parede, assim como um for-loop normal, eu me pergunto, sim, deixe-me usar isso como uma cadeira modelo para LET I é igual a 0 crianças do corpo, mas agora não são crianças do corpo. Definimos nossa variável como UL filhos e sabemos que tem uma propriedade de comprimento. Como sabemos que tem uma propriedade de comprimento? Will, posso abrir isto e mostrar-te que há uma propriedade de três. Então sabemos que queremos começar nosso loop em 0. Queremos continuar até atingir esse comprimento de três. E cada iteração nós obviamente queremos aumentar o nosso máximo em um. Então queremos que ele realmente acesse cada tag LI. E sabemos que as tags LI vão ser a lista crianças não ordenadas e vai acessar isso especificamente e o que estamos querendo fazer agora. Ok. Podemos ficar com o vamos fazer uma borda azul cada um. E retornamos. A criança não está definida, sinto muito. Este é o eixo X. Novamente, não é criança, está viva. Isso deve funcionar agora pressione Return e o rigor que acabamos de percorrer cada tag LI. Quão legal somos nós? Eu sei que você pode estar pensando neste momento nós em uma divisão, complicado, mas extrair. Não se preocupe, vamos construir as breves páginas práticas neste curso e estamos ficando mais avançados à medida que avançamos, você verá que todos eles estão puxando uns aos outros. Nós já sabemos agora novamente com listas de nós HTMLCollection. Já passamos por isso em uma seção anterior, então você deve estar familiarizado com o quão legal está ligado. Isso é muito divertido quando é DOS como puxar uns aos outros, vemos os efeitos práticos. De qualquer forma, vamos continuar. Eu não quero parar. Vejo você na próxima palestra. 13. Desafio — introdução: Você sabe o que é hora de novo? Isso é certo. É hora de provar. Ponha o seu conhecimento à prova. Eu adoro isso. Então o que eu vou fazer agora, alguma iniqüidade, dar-lhe o gosto a pergunta. A próxima foto, obviamente eu vou passar pelo exemplo com você, então, por favor, experimentá-lo em seu, por conta própria. Não se preocupe, eles ficarão intimidados, deve ser divertido. E eu acho que você vai conseguir. Eu acho que você, suas fontes para matemática para entender como fazê-lo. Então vamos cortá-lo juntos e ele vai para literário e levar alguns segundos enquanto eu estou querendo fazer é criar uma tag HTML simples. Dentro de uma tag, quero que tenhamos uma lista desordenada dentro do nosso HTML. Obviamente, temos que ter um corpo, certo? Esta é uma boa prática dentro disso, eu quero que tenhamos uma lista não ordenada. Podemos dizer que estes são os meus itens legais da lista. Então, o EEG, podemos apenas comentar isso. E eu só quero ter cinco listas. Eu vou querer? E isso pode ser o item um. Certo? Este pode ser o item dois. Item três. Item para um item cinco, aí está. E isto é uma tautologia. Só vai levar alguns segundos. Qual é a sua missão? Será que minha idéia vai ser alunos? Quero que resolva duas perguntas para mim. A primeira pergunta é, eu quero que você conte quantos nós de elementos eles são. Então, abaixo disso você, Altaic. Essa é a primeira pergunta. Quantos nós de elemento seu crescimento transforma isso? Esta segunda questão é, quantos nós eles são no total, não apenas 11 notas, toma notas, nós de comentário, et cetra, et cetra. Eles estão sob a tag UL. Então eles têm uma atribuição de déjà duas perguntas muito simples. Eu quero que você dê uma chance. Eu quero que você pense sobre isso. Aprendemos muito com isso. Pausar algumas seções e lidar com crianças são muito importantes. É por isso que eu queria te dar um gostinho rápido. Então pegue um café, se empolgue, tente resolver essas duas perguntas. Deve levar cinco minutos no máximo. E na próxima palestra, mostrarei como podemos fazer isso. 14. Desafio — solução: Sim, nós fizemos. Incrível. Bem, eu tive que dar uma chance. Sabe, eu sempre digo que a coisa mais importante nessas coisas é se divertir porque você sente que aprende melhor se você realmente gosta do que você faz. Então, se você está certo ou errado, Lactone executado, a questão é que você tentou e Walden. Então, aqui estamos nós. Temos nossos itens à esquerda e nosso console à direita. Quero que analisemos a solução juntos. Mas antes disso, deixe-me remover-me só porque não quero atrapalhar o público do console. Sim, nós temos, o primeiro passo é pegar nosso novo elemento, certo? E é só chamar de lista. Podemos chamar-lhe o que quisermos. Como é que fazemos isso? Para acessar este URL como podemos acessar nosso documento, que é o nosso ponto de partida, getElementsBytagName. Sabemos que queremos o elemento UL e sabemos que só haverá 1 elementos que queremos. O primeiro item em que HTMLCollection. Boom, nós temos nossa lista e eu posso consolar logar isso só para provar para você que esta é, de fato, a nossa lista. Vamos agora lidar com a nossa primeira pergunta. Lembre-se do que era. A primeira pergunta foi, eu quero que você conte quantos nós de elemento eles estão dentro desta lista. Como podemos fazer isso? Usamos a propriedade filhos ou usamos a propriedade de lista de nó? Isso mesmo, Podemos usar a propriedade filhos, Não pode esperar porque ele retorna um HTMLCollection de apenas um tipo de nó, um nó elemento. E quantos esperaria ver? E esperar ver cinco, porque um cinco itens. Então, aqui vamos nós. Vamos acessar nossa lista. E, claro, podemos acessar as crianças que eu não quero devolver o Jordão, eu quero devolver apenas o comprimento, certo? Precisávamos contar quantos podemos fazer isso? Isso é certo. Podemos acessar a propriedade de comprimento e eles vamos nós temos cinco. Bem feito, bem feito. Eu disse que não é tão difícil. Claro, na programação, existem muitas maneiras de esfolar um gato. Então, outro método que podemos usar como podemos acessar nossa lista. E se você começar a digitar, você pode até ver em nosso console aqui, isso é direto para fora da caixa. Você recebe um monte de métodos legais que ajudantes. Está a tentar ajudar-nos. O primeiro nesta lista é a contagem de elementos filhos. Para que possamos aceder a isso. E como o seu nome indica, um conta quantos elementos filho eles são. E esta é outra maneira de chegar exatamente à mesma coisa. Como podemos ver, os registros desses dois métodos produzem o mesmo resultado, mas cada um faz usando uma técnica diferente. A propriedade children é uma propriedade somente leitura e retorna uma convicção dos elementos HTML dentro do elemento que está sendo consultado. Em seguida, usamos a propriedade length para obter o número de itens dentro desta coleção. Está bem. Então essa é a propriedade das crianças. E quanto à contagem de elementos filhos? Será que acessar o elemento filho me conta que diretamente é mais intuitivo e diretamente direto ao ponto. Então, na minha opinião, é muito mais limpo. Esta é, portanto, a solução para a primeira questão. E quanto à segunda pergunta? Você se lembra o que era isso? A segunda questão foi, quantos nós existem dentro da tag UL? Não apenas notas de elementos, mas quantos nós em geral, como eu tenho certeza que você já adivinhou, nós não podemos usar a propriedade das crianças, podemos? Porque havia dois em uma HTMLCollection, precisamos usar o quê? Nós filho, isso é certo porque ele retorna uma lista de nós. Então vamos dar uma chance. E antes de eu lhe dar a solução, realmente deixe-me ir aqui para o Visual Studio Code. E quantos itens você acha que eles devem ser? Intuitivamente, para quantos nós filhos você acha que eles serão? Bem, se você pegar apenas o comentário e os itens, você pode ver os cinco itens em um comentário. Então, os seis nós básicos, mas a resposta não é seis. Lembra-se? Também temos notas. Temos uma nova linha e caracteres antes do comentário. Aqui. Temos alguns fora para o comentário depois de cada hora que eu marcar. Então isso significa que esperaríamos os seis, ok, os seis básicos iniciais. Então esperaríamos 7, 8, 9, 10, 11, 12, 13. Vamos ver o que conseguimos. Então, se voltarmos aqui para o nosso console com acesso à nossa lista, e agora queremos acessar os nós filhos, nós filhos, e queremos acessar a propriedade length. Eles são úteis, nós temos. Temos 13. Então, espero que isso tenha feito sentido. Espero que tenha gostado desta tarefa. Acho que é muito divertido. E também está ensinando a usar os nós filhos e filhos. E acredite em mim, isso vai ser muito benéfico para você como desenvolvedor. Continue, fique motivado, tome um café, e te vejo na próxima palestra. 15. Siblings: Por último, mas não menos importante, em um nós para discutir rapidamente seus irmãos. E sabemos que irmãos são apenas elementos que compartilham o mesmo pai. Então você pode dizer que irmãos são como irmão e irmã. Todos eles localizados no mesmo nível de árvore dentro do DOM. Deixe-me esclarecer uma coisa primeiro. Irmãos não precisam ser do mesmo tipo. Assim como seu irmão ou irmã não é o mesmo que você, você provavelmente completamente diferente deles. É o mesmo na árvore DOM. Eles não têm que ser ao mesmo tempo. Também sabemos que nós mais altos do que um irmão, nossos ancestrais, e aqueles abaixo dele são descendentes. Estas são tipo de terminologias comuns usadas na comunidade de programação. E caso esteja se perguntando, já vimos alguns desses antes. Eles são alguns métodos que podemos usar para acessar os irmãos anteriores e próximos irmãos. Vamos dar uma olhada em alguns desses métodos em ação. 16. Siblings — exemplo: Então aqui estamos nós, olhando para irmãos. O que eu quero fazer é acessar nosso segundo, eu vou pegar o do meio e eu quero apenas mudar esse estilo. E eu sei que é terrível usar um estilo inline, mas este é um exemplo tão simples. Só quero mantê-lo assim. E isso muda a cor de fundo para verde. Agora é ir para o nosso navegador. Vamos excluir o exemplo anterior. Ele tem a missão, nós acabamos de fazê-lo. Agora podemos, e o item do meio deve ser verde. Esse é o que acabamos de estilizar. Isso é acessar o console e vamos limpar o console antes de começar a codificação, Eu só quero enfatizar aqui que as propriedades e métodos irmãos funcionam muito semelhante aos métodos filhos que acabamos de ver. Em que alguns métodos irão atravessar apenas nós de elemento, enquanto outros métodos irão realmente atravessar cada único tipo de nó. Novamente. Já passamos por isso antes, não deveria ser surpresa. Mas a coisa legal com irmãos é que ele é muito mais intuitivo, apenas a palavra do método em si. Então irmão anterior e Nick irmão ou retornar qualquer tipo de nó, qualquer tipo de irmão. Considerando elementos anteriores irmão ou próximos elementos irmão, por outro lado, é claro, irá retornar apenas esses elementos irmãos. Então isso é mais intuitivo nesse sentido. Em primeiro lugar, quero perguntar-lhe, como chegamos a este ponto do meio 2? Como faríamos isso? Porque o que eu quero fazer é que eu estou querendo mudar a cor de apenas item 1 e item 3. Romancista, como faríamos isso? Bem, o ponto de partida mais fácil em minha mente seria acessar o item para um no meio. E então tudo o que temos que fazer é mudar uma cor de fundo dos elementos anteriores, Sibley, e os próximos elementos de chumbo. É como eu estou pensando em fazer isso. Então o ponto de partida é existir esse item do meio para aliar, como faríamos isso? O ponto de partida deve ser para realmente acessar o preço sugerido não ordenado, porque então podemos começar a acessar a sala de armazenamento. Então, em primeiro lugar, vamos definir uma variável chamada URL. O que queremos fazer é acessar o getElementsBytagName. Já passamos por isso, você percebe que sabemos que isso vai retornar uma coleção HTML, não é? E nós sabemos que eu vou página inteira um documento inteiro consiste apenas em um, seu Altaic. Portanto, queremos acessar o primeiro item desta lista. Então aqui vamos nós, aqui está o nosso U L, e se nós consola logar isso, eu posso prová-lo para você. Lá está ele. Fazer sentido é intuitivo até agora. Mas agora como acessamos o item do meio? Bem, se você pensou que poderíamos usar crianças, você está 100% correto porque as crianças só contém itens de elementos e podemos ver o item de três elementos. Queremos acessar o segundo, certo? A do meio. Então, tudo o que temos que fazer é definir uma variável chamada valor do eixo médio L sai dos filhos dentro dessa tag UL. E queremos o item do meio, também conhecido como o segundo item dentro dessa coleção. Então lá vamos nós. Consolamos o log do meio. Nós literalmente temos acesso a ele agora em uma variável. Também. Agora, se quisermos mudar esse item, um, essa cor de fundo, para dizer rosa, como fazemos isso? Lembrem-se que temos métodos diferentes e se trata de irmãos. Nós temos irmão anterior, e nós temos elementos anteriores. Irmão. Se usarmos o irmão anterior, deixa-me mostrar-te o que ganhamos. Irmão anterior. O problema com isso é que ele retorna todos os nós e isso significa que nós realmente sendo retornado para nós esse texto. E neste caso, o gosto é apenas para retornar personagem com todos os cachos de espaços. Isso não é o que queremos, é que estamos realmente querendo o elemento em si. Então, aqui está uma maneira de fazer isso é fazer irmão anterior e imitação existir novamente, o irmão anterior. E então nos dará o item que precisamos novamente. Mas é complicado. É por isso que a API DOM nos dá uma abordagem mais intuitiva para isso. E essa abordagem intuitiva está acessando a variável do meio. E é chamado apenas os elementos anteriores irmão. Isso é tudo o que há para ele. E, claro, podemos acessá-lo propriedade de estilo. E podemos mudar a cor de fundo para dizer rosa. Lá vamos nós. Acabamos de mudar a cor de fundo do item 1 para rosa. E agora átomo três? Bem, sim. Novamente, podemos acessar próximo irmão pode prever irmão, como você pode ver no console, ele vai retornar o nó de texto. Então, sim, podemos acorrentá-lo novamente, mas é mais complicado. A maneira mais fácil é acessar nossa variável e visar acessar diretamente o próximo elemento no método irmão. Podemos então acessar essa propriedade de estilo, alterar a cor de fundo para dizer. Então, hoje temos. Nós acabamos de usar Nick irmão, próximo elemento, irmão, irmão anterior, e elementos anteriores irmão. Espero que faça cenas que você possa ver que são bastante intuitivas. Não é tão difícil. Então, nós vimos pais, nós vimos crianças, nós vimos irmãos. Eu não acho que você percebe isso, mas agora você está realmente se tornando bastante avançado em trabalhar no DOM. E muitas pessoas não entendem quais são esses métodos. Então, enquanto eu estou super, super impressionado, nós fizemos muito melhor. Ainda não terminamos. É muito mais elevador neste curso. 17. Resumo: Sério, sério, você fez uma quantia incrível. Estou super entusiasmada. Acabamos de terminar a seção sobre como você pode atravessar o DOM. E às vezes eu acho que você não percebe o quão longe você realmente chegou. Quero dizer, agora e você sabe, se a cúpula é, você sabe, como difere do seu código HTML. Passamos por métodos de acesso. Então, se você souber o ID ou o nome do custo do nome da tag, você pode acessar literário esse item específico diretamente do DOM. Mas ainda mais do que nós com apenas toda a travessia do DOM. que significa que mesmo que você não saiba qual é o nome da turma ou a identificação, podemos mover para cima e para baixo o DOM e mudar as coisas quando quiser. Então Walden e eu pensamos em aceitar e você já aprendeu uma quantia incrível. Nós passamos por exemplos práticos, nós passamos em teoria, nós até fizemos gostos para chegar. Assim como Silverstein, Walden, como continuar, ficar motivado. E agora só quero fazer uma breve recapitulação do que aprendemos. E na próxima seção, tudo, vai explodir sua mente porque agora nós realmente vamos começar não só nos mover no cachorro e eu vou parar de manipulá-lo. Então você vai para a América vai ser. Então, muito obrigado, Walden. Obrigado. Respire, relaxe e aproveite o resto desta palestra muito curta. E te vejo na próxima seção. - Áudios. Estamos quase, quase terminando. Esta é apenas uma conclusão rápida sobre o que realmente aprendemos nesta seção sobre atravessar o DOM. Aprendemos a acessar nós. E ao fazer isso, agora sabemos como andar na árvore DOM, como dizem na comunidade de desenvolvimento. E isso envolveu como aprender sobre os pais, aprender sobre as crianças. E, claro, entre as crianças, aprender como os irmãos funcionam, agora você deve ser capaz de acessar com confiança qualquer nó no DOM e não tomar essa habilidade como garantida é realmente importante. Como eu disse, ainda temos uma tonelada de informações para aprender e um longo caminho a percorrer. Então sente-se, pegue um criador, aproveite, e te vejo na próxima seção. 18. Agora é hora de criar elementos dinâmicos: Bem-vindo a esta nova seção sobre a criação de elementos no DOM. Então é muito legal que agora e você pode realmente acessar elementos no DOM. Você pode atravessar para cima e para baixo o cão. Mas você sabe o que é ainda mais Colombo? Ele está criando novos elementos no DOM porque meus amigos, isso é o que faz sites de semana e aplicativos funcionar. Precisamos criar sites dinâmicos. E para lembrá-lo, site estético é uma espécie de nós apenas apodrecendo nosso HTML e então nada mais acontece. Entedioso, não é? Muito mais emocionante para nós, é criar dimensionamento de largura dinâmico. E isso significa que usamos linguagens, mais comumente JavaScript que podemos usar outros para acessar e manipular o DOM que criam novos elementos em tempo real. Então esta vai ser uma seção super excitante. Confie em mim, vamos aprender com uma mãe de informação legível. Então canções ninjas digitais, pronto, Prepare-se. Vamos aprender sobre como criar elementos no DOM. Estou super entusiasmada. Isso é um guia. 19. Sites estáticos em x dinâmicos: Certo, então o que vem a seguir? Aprendemos a usar brilhos. São estas etiquetas excêntricas, cetera, para encontrar qualquer nó no DOM. E novamente, não tome isso como garantido. É uma habilidade incrível. Apodreça. Agora também podemos usar propriedades pai-filho e irmão para atravessar para cima e para baixo ao amanhecer. E vou enfatizar isso de novo. Isto é fixe. Mas sabe o que é ainda mais legal? Ter a capacidade de criar e modificar elementos no DOM. Então, dando um passo atrás, podemos dizer que temos dois tipos de sites, estáticos e dinâmicos. Por estático, quero dizer apenas elementos são adicionados à página escrevendo diretamente código em seu arquivo index.html. Quando uma Jane chata, chata e simples saqueia, você ganha os pontos. Sites estáticos, apenas meio que mais. Especialmente no mundo em que vivemos agora. O que me leva a sites dinâmicos. É aqui que os elementos são adicionados com JavaScript. Oh doce NAS, os tempos da SEC. Você ganha os pontos. Isto é fixe. Isto é o que queremos em nossos sites. Isto é o que nós, na verdade , não é nem um 12. Isso é uma necessidade. Se você não tem sites dinâmicos agora, você só vai ser deixado para trás a curva, que é y. A primeira parte dessas seções neste curso vamos todos sobre o acesso dela ao DOM. Mas não é suficiente porque acessar o DOM só nos leva a meio caminho. Também precisamos aprender a criar itens dinamicamente no DOM. Então eu estou super, super animado na seção são realmente m. Eu só quero responder algumas perguntas antes de passar para realmente codificação. Especificamente, eu quero olhar para como podemos criar itens e também trigo como o método vem, que nos permite fazê-lo. Vamos dar uma olhada nisso rapidamente. 20. Onde vem a createElement(): A maneira mais comum de criar um elemento é método de elemento de rolo de tambor que é dado a nós pela API DOM. A pergunta que você provavelmente tem, porém, é, onde encontramos este método vai simplesmente saltar para o console e dar uma olhada. Então, aqui estamos nós. Acabo de abrir uma página do Google Chrome lá em cima. Nada para ele. Eu quero encontrar com a gente criar método elemento vem de. Então vamos inspecionar nosso documento como costumamos fazer. Você deve estar muito familiarizado com este banal. E vamos para a consola. Vamos limpar o console e vamos começar a procurar com este método é, você pode pensar, Ok, legal. Vamos começar olhando dentro do documento. O problema ao digitar documento como este, como já vimos antes, é que na verdade nos dá a representação HTML do nosso documento. Nós não queremos isso. Queremos que a notação JavaScript ou as representações JSON façam isso, como eu tenho certeza que você se lembraria. Consolamos sujeira do documento para a tela. Isso agora nos dá um documento em formato JSON como. E sabes que mais? Deixa-me livrar-me de mim, porque não quero atrapalhar. Agora o que podemos fazer é começar a olhar para este documento. Se abrirmos este documento e olharmos para criar elementos e olhar para os mares. E você pode ver que não está em nenhum lugar para ser encontrado. Assim que isso aconteceu com você, o próximo ponto do carvão é olhar para seu protótipo. Então, se nós rolar na parte inferior, você vê este proto, seu protótipo é o documento HTML. Não se preocupe, vamos entrar em tudo isso mais tarde no curso. Por enquanto, só estamos tentando encontrá-la. Então vamos abrir este próton. É sim. Criar elementos. Não, não, não é. Então, novamente, a mesma coisa que rolar para baixo para seu protótipo, que é documento. Mas sim, é um “D “maiúsculo. Vamos abrir isto. E isso tem cria elemento? Será que isso tem o método de criação de elemento. Cooh, isso é o que todos esses prótons e o que é este grande D para documentos? Vamos voltar para os slides rapidamente. Quero discutir isso com um pouco mais de detalhes. 21. A diferença entre documento e documento: Acabamos de ver onde encontrar este método de elemento de criação. Agora, esta é uma palestra realmente interessante que vamos passar e é muito avançada. Poucas pessoas sabem como tudo isto se encaixa. Então considere-se um dos poucos sortudos. Espero que gostem e que apreciem. Mas é contínuo. Então acabamos de ver que podemos encontrar isso cria elemento no objeto de documento. E a coisa chave que eu quero salientar é que não é o mesmo que o pequeno d. Este é um D maiúsculo, o objeto do documento. Então o que eu quero fazer agora é comparar o documento com o documento que todos usamos fazer com o pequeno d. Qual é a diferença e por que o documento é o que olha para isso? Sabemos que tivemos que começar consolando o documento para a tela. Nós não poderíamos simplesmente consolá-lo diretamente porque isso nos dá a representação HTML. E vimos que o proto deste documento é o documento HTML. Todo homem, o que isso significa, este documento HTML e por que ele tem o dia e como ele se relaciona com o documento? Vamos registrar o console a função construtor deste documento. Vamos dar uma olhada agora. Vamos fazer agora é eu quero ver o que isso construiu que vamos acessar nossa janela, nosso documento com na janela. E vamos acessar essa função construtor, construtor. Se retornarmos isso, podemos ver que o que é retornado para nós é este documento HTML construir uma função. Isto é muito, muito importante. Como vimos, podemos concluir que o objeto de documento é construído a partir do construtor de documento HTML. Então podemos dizer que parte do propósito deste objeto documento HTML é criar esse documento para nós. Maxine está na frente. Vai vir de alguma forma e é daí que vem. Ok, ótimo. Então agora temos nosso documento que todos costumávamos usar. Mas o que é que esse documento vai fazer? Descubra que podemos apenas console log recebe tipo de nó. Então saímos do documento da janela sem tempo. E como você vai descobrir que o console logs 99 é o código para o nó do documento. Sabemos que o documento HTML construir uma função cria o documento. E também sabemos que está fora do tipo nó do documento. Por que isso é relevante para nós? Porque o documento é um objeto de nó de documento. Sabemos que ele herda do nó do documento. E sim, é um D maiúsculo não é o mesmo que r pequeno d. Este é o grande D. E porque ele herda do documento e você quase poderia dizer que o nó do documento é teoricamente a raiz do documento. Mas não é realmente a raiz do documento em todos os propósitos práticos. Porque a raiz da nossa página web é o primeiro nó elemento no documento, que é o elemento HTML. Deixa-me mostrar-te isto agora. Vamos apenas mudar para o console fofinho ou íon. Então podemos ver o tipo de na raiz de todo o nosso sistema é este nó de documento. Mas em toda a praticidade não é realmente a raiz do nosso documento. Deve ser o documento HTML e eu vou mostrar-lhe por que, Porque queremos acessar o primeiro elemento dentro deste nó documento. Então, para fazer isso, vamos consolar. Vou documentar Archea. E, claro, o que podemos fazer é abrir este documento. Podemos então rolar para baixo até seu próton, que é o documento HTML. Podemos então rolar para baixo até o documento. E eu só quero mostrar a vocês aqui, se olharmos para a criança do primeiro elemento, o que há lá dentro? Lá vamos nós. Esse é o nosso HTML. Este é um propósito prático, a raiz do nosso documento HTML. Então, Rebecca, foi aqui que paramos. Sabemos que a raiz da nossa página está em todos os fins práticos, o elemento HTML. Então, podemos dizer que o elemento HTML é a raiz ou o elemento de nível superior do nosso documento HTML. E quando este arquivo HTML é carregado em nosso navegador, sabemos que essa função construtor chuta e se torna o objeto de documento. E o documento capital D é o nó final do qual eu vou documentar herdar do PS, tanto o documento como os construtores de documentos HTML todos instanciados pelo navegador automaticamente. Quando você carrega um documento HTML. É daqui que eles vêm, caso esteja se perguntando. E normalmente o uso desses métodos está associado ao fornecimento de um documento HTML para um iframe. Mas de qualquer forma, isso é um pouco avançado. Mas o que aprendemos nesta palestra é incrivelmente avançado. Agora você sabe a diferença entre o pequeno objeto d documento. Em seguida, ele finalmente herda deste grande nó de documento D. E então no meio você meio que tem este nó elemento HTML e pescoço chuta com um construído para negrito o documento é 100, pode parecer um pouco confuso, mas acredite em mim, é muito avançado e bem feito para chegar até aqui. Espero que esteja aprendendo muito, mas não pare. Vejo-te na próxima palestra. 22. Mais no createElement(): Vamos entrar na carne de criar um elemento em nossa página. E isto é, eu quero que falemos sobre o método de criação do elemento. Tudo o que temos a fazer é chamar o elemento de criação em nosso objeto de documento. Então, acessamos nosso documento usando a notação de pontos. Nós acessamos o método elemento. Isso é simples. E como argumento, tudo o que temos que passar como o nome da tag HTML, também conhecido como temos que dizer qual elemento queremos criar. Faz sentido. Deixe-me saltar rapidamente para o console e mostrar-lhe como isso funciona. No final desta seção, você será um grande mestre criando elementos. Quero que saímos rapidamente das linhas que estávamos olhando. E eu quero que nós rapidamente apenas olhar para criar elemento. Quero que veja como é fácil e intuitivo. Então, aqui vamos nós. Tenho um Google Chrome normal. Abra. Isso, basta acessar o console. C. Aqui vamos nós. Temos o Google Chrome aberto com o console. Limitador muito simples zoom em para que você possa ver o console que melhor. E digamos que queremos adicionar um parágrafo no DOM. Como fazemos isso. Bem, vamos definir uma nova variável chamada new pará. Para criar um elemento, temos que acessar nosso objeto de documento. Nós sabemos disso. Usamos a notação de pontos para acessar todas essas propriedades e métodos. E o que queremos é criar elemento. É muito intuitivo. Queremos criar, é claro que é uma tag de parágrafo. E então nós vamos, nós realmente criamos um elemento de parágrafo. Como era fácil e divertido. Eu posso mostrar-lhe que nós criamos isso por apenas console logout variável, e aqui está a nossa tag de parágrafo. Mas o que pode não ser tão intuitivo é, você acha que isso foi adicionado ao DOM? Ou como descobrimos? Vamos definir uma nova variável chamada HTML ramada. Defina isso. Nós olhamos para os três objetos mais importantes em nosso DOM, um dos quais é o HTML. Para obter isso, basta acessar a propriedade do elemento de documento em um documento. Simples assim. E se nós registrarmos nossos dados HTML, e se abrirmos nosso corpo, não teremos o par de Billy. Nenhum lugar para ser encontrado na carne. Até mesmo fazer isso um pouco mais largo para que você possa vê-lo. Não há parágrafo e este é o ponto de tentar fazer e nós o criamos. Isso é apenas na terra de ninguém. Vamos rapidamente voltar para os slides porque eu quero falar sobre isso com um pouco mais de detalhes. Incrível. Acabamos de ver como é fácil criar um novo elemento. Em particular, um elemento de parágrafo. Para recapitular, criamos uma nova variável chamada new pará e net new pair of variable hold um tom de referência, elemento recém-criado. Nós literalmente criamos um novo elemento de parágrafo. Sim. Bem, não tão rápido em seus cavalos. Criar este elemento de parágrafo é muito rápido e fácil, mas ele está apenas flutuando perfeitamente no espaço por si só. A razão pela qual o elemento de parágrafo é perdido porque o DOM não tem idéia de que existe. Todos inclinados, o que fazemos? Como dizemos ao dominante que existe? Para que este elemento, este parágrafo faça parte do DOM, precisamos de alguma maneira de colocá-lo. Não se preocupe. Deixe-me cortar o xadrez para que um elemento faça parte do DOM. As outras duas coisas que precisamos fazer. Então vamos dar um passo atrás. Nós criamos nossa tag de parágrafo que está flutuando ao redor sem rumo, e nós usamos para criar método elemento para fazê-lo. As duas coisas que precisamos fazer para anexá-lo ao DOM. Primeiro, precisamos encontrar um elemento que irá atuar como um parágrafo de pastas pai. É a primeira coisa que precisamos fazer. A segunda coisa que precisamos fazer é que temos para o elemento que queremos, neste caso o parágrafo para um elemento pai. E nós geralmente fazemos isso usando uma criança pintura que pintar o método criança. Isso faz sentido? Então dê um passo para trás. A primeira declaração na criação de um elemento é realmente criá-lo. Mas isso não é suficiente. Precisamos então definir onde queremos colocá-la no DOM. Para fazer isso, temos que pensar, ok, legal, o que queremos que seja pai? E então precisamos anexá-lo ao pai. Espero que esteja fazendo sentido, mas não se preocupe se não for. Porque, como sempre, precisamos ver isso em cena de ação. 23. Vamos adicionar um elemento ao DOO: Ok, então nós vimos que quando usamos criar elemento, que ele meio que flutua ao redor do espaço. E a razão para isso é que o DOM não tem conhecimento real de que esse elemento existe. E também vimos que, para que um elemento seja parte do DOM, as duas coisas que precisamos fazer para lembrar o que eles eram. Isso é certo. A primeira coisa é que tivemos que encontrar qual elemento queríamos atuar como pai. E em segundo lugar, uma vez feito isso, usamos um método chamado criança dor para adicionar esse elemento ao pai. Deixa-me mostrar-te o que quero dizer. Então, aqui estamos nós. Eu tenho o Visual Studio Code aberto e eu tenho o navegador à direita. Eu realmente encorajo você a codificar junto comigo porque eu me diverti mais. Você aprende mais. Então vamos começar rachando. Eu só quero criar um modelo HTML muito simples aqui. E sim, vamos ter uma seção de cabeça dentro da cabeça. Vamos ter um título. Podemos chamar o nosso título criando elementos. E é claro que podemos ter uma tag de estilo, que não estávamos fazendo agora, mas vamos fazer em breve. Então essa é a nossa cabeça. Dentro do nosso corpo, quero uma página muito razoável e ela só quer uma etiqueta H1. E isso pode ser chamado de MI real. Salvamos isso e atualizamos o navegador. Podemos ver que são H1. Até agora, tudo bem. Agora vamos adicionar um parágrafo a isso. Bem, você sabe o que, na verdade, em primeiro lugar, vamos estilizar esta rapidinha. Legal. Que tipo de estilo podemos fazer? Vamos apenas fazer uma cor de fundo simples porque o branco é horrível. Assim, podemos mudar a cor de fundo para outra. Digamos que um bom legal, desfocado, cor púrpura. Lá vamos nós. E vamos adicionar um pouco de estofamento a isso. Então, estes são o corpo. Eu quero que nós agora estilo nossa tag h1 também porque eu realmente não posso ler isso muito, muito claramente. Então vamos mudar a cor da nossa tag H1 para inserir uma para se, se, se sete. Só para que seja mais legível, podemos realmente vê-lo agora, vamos aumentar o tamanho da fonte deste. Podemos mudar a família das fontes. Vamos apenas colocar um sublinhado sobre este gosto. Então, como está a LMR? E agora o que eu quero que nós façamos é que eu quero que nós adicionemos um parágrafo a esta página. O que vamos fazer? Bem, vamos usar JavaScript para fazer isso. Então eu vou incluir um script na parte inferior desta página e precisa de codificação de pontos e JavaScript. Vamos adicionar nossa tag de parágrafo para lembrar como fazer isso. Bem, em primeiro lugar, vamos definir um novo elemento. E este novo elemento vai ser um parágrafo. Bem, nosso ponto de partida em uma página inteira é esse objeto de documento. Saímos de uma de suas propriedades e métodos e o que queremos é criar elemento. Sabemos disso, já fizemos isso antes. E o elemento que queremos criar é este parágrafo. E este é o primeiro passo. Lembre-se que fizemos isso da última vez que criamos um elemento burnouts flutuando no espaço. É tudo por si só. Como é que anexamos isto agora ao DOM? Fácil, primeiro temos de encontrar o pai e depois temos de usar uma criança com dor. Então vamos ver como isso se parece. Então chame-o de passo 1. Vamos pegar o pai. E vamos apenas dizer que queremos obter este parágrafo para o nosso corpo. Então, é claro, vamos apenas definir uma variável chamada elemento corpo. Claro, documento e como podemos usar uma infinidade de métodos. Já fizemos isso antes, mas eu quero usar o seletor de consulta. E queremos pegar o corpo. Deixe-me fazer isso um pouco maior. Como é que está? Senta em uma linha. Lá vamos nós. Então esse é o primeiro passo. O segundo passo é, vamos agora anexar nossa tag de parágrafo a este corpo. E isso é super simples. Tudo o que temos a fazer é acessar nosso pai, que definimos uma variável chamada elemento corpo. E temos que acessar um método neste elemento chamado uma criança dolorida. Isso é o que eu estava dizendo. Esta é a segunda parte de anexar um item ao DOM. Porque agora ele está dizendo, “Ok, legal, nós queremos realmente anexar este par ao corpo. E definimos o nosso emparelhado em uma variável chamada elemento novo. Se salvarmos isto, temos feito literalmente. Se inspecionarmos nosso documento, se inspecionarmos este documento e formos aos nossos elementos aqui, olhamos dentro do corpo. Eles são o nosso parágrafo. Quão incrível é isso? Então nós literalmente agora editar nossa tag de parágrafo para o DOM que o, algumas coisas que eu quero dizer sobre este período de fita porque nós não podemos vê-lo na vela tela, nós adicionamos nenhum gosto. Então, como é que fazemos isso? Bem, vamos pular para a próxima palestra. Só quero resumir o que fizemos. E então eu quero mostrar a vocês como adicionamos texto. 24. Como adicionar texto conteúdo() para adicionar texto a um elemento: Primeiro passo, vamos representar nosso código em uma árvore DOM. Como é que parece? Bem, aqui vamos nós. Já vimos como antes, você deve estar muito familiarizado com isso. Começamos nossa janela, acabamos por chegar ao nosso HTML. Ele se divide em dois ramos, a cabeça e o corpo. Estes são filhos do elemento HTML, a cabeça como vimos, e ele tem um título e estilo, e nosso corpo tem uma tag H1. E incluímos essa tag de script. Realmente não me lembrava dentro dessa tag script que quando escrevemos nosso JavaScript para adicionar este parágrafo ao DOM. Então lá vai você, a árvore DOM do exame. Mas qual foi a próxima coisa que fizemos dentro da nossa tag de script? Lembra o que era? Tetrad, editamos esta etiqueta de parágrafo. Deixa-me mostrar-te como é isso. O ego. Nós literalmente editamos essa tag de parágrafo. Sim. São boas notícias. Nós literalmente adicionamos algo ao DOM pela nossa primeira vez, tão bem feito. E eu espero que você possa ver que é bastante intuitivo e não é tão difícil. Mas quero que falemos sobre esta etiqueta de parágrafo e um pouco mais de detalhes. Como você sabe, este elemento de parágrafo recém-criado não é muito útil sem qualquer gosto. Na verdade, não podíamos ver nada exibido na tela. Nós só tivemos que inspecionar o inspetor de elementos a fim descobrir que um par de foi realmente adicionado ao DOM. Terceira boa notícia, porém, é que podemos adicionar texto usando a propriedade text content. Mas como isso leva o conteúdo corretamente aparência de risco de trabalho e como vemos isso em ação? Deixe-me saltar rapidamente para o editor de texto e eu vou mostrar-lhe agora. Você me conhece até agora, Eu amo exemplos práticos e nós acabamos dizer que, a fim de adicionar leva tempo elemento do cabelo de elementos. Em particular, que podemos usar essa propriedade chamada conteúdo de texto. Então vamos ver como funciona. Estamos no código que literalmente colocamos juntos. E eu quero usar isso leva propriedade de conteúdo. Como fazemos isso? Bem, a primeira linha de código ainda dentro nosso JavaScript podemos ver que criamos uma nova variável chamada novos elementos. Deck é o nosso parágrafo. Então, se acessarmos essa variável, podemos acessar uma propriedade chamada conteúdo de texto. E isso é o que eu quero te mostrar. É literalmente tão fácil e atribuímos esse valor do conteúdo que queremos adicionar a uma página. Neste caso, o que queremos fazer? Bem, eu quero adicionar um par fora e vamos apenas dizer ou um produto de sua imaginação. E se nós salvarmos isso e boom, nós literalmente temos esse parágrafo em nosso navegador. Mas esse parágrafo parece horrível, não o leu mal. Então vamos entrar em nossa tag de estilos aqui, e vamos começar a estilizar este parágrafo. O jogo, podemos realmente usar as mesmas calorias perdidas no tamanho da fonte. Podemos dizer de 36 pixels. Nós também podemos mudar a família fonte apenas para ser consistente, é realmente um pouco longe de ter feito tudo isso e colocá-lo no corpo superior, o que teria ajudado. Mas de qualquer forma, esta é apenas uma das muitas maneiras que podemos fazer isso. E vamos apenas fazer este parafuso de peso da fonte em negrito. Feito. Como é que isso parece? Então lá vamos nós. Temos um parágrafo com editor para o DOM e agora com também editar texto estava em um elemento de parágrafo. Sem esperança. Científico parece maior aqui, console para adoçar CS. E eles, vamos com um G criou nosso novo parágrafo que então acessamos essa propriedade chamada leva conteúdo para adicionar conteúdo à página e saber, você já sabe disso. Vamos voltar para a palestra. Legal, lá vamos nós. Você pode ver que não foi tão difícil enquanto Dan, e como eu estou gritando é que a combinação de criar elemento e isso leva propriedade conteúdo criou nosso nó elemento completo. Super, super excitante. Mas esta pergunta que me fazem muito dos alunos e é, poderíamos não ter usado no HTML em vez desse conteúdo de texto? E a resposta é sim, você poderia ter usado no HTML. Lembre-se do que eu continuo dizendo neste curso que há muitas maneiras de esfolar um gato, mas eles são algumas desvantagens com o uso de HTML interno. Em HTML expressa seu site dois possíveis cross-site scripting ou XSS. Porque JavaScript embutido pode ser adicionado a um elemento. Em outras palavras, leva conteúdo é apenas mais seguro porque ele tira a tag HTML. Isso é bastante técnico, então não se preocupe se você não entender o que cross-site scripting é um tópico de outra coisa em si mesmo. Por enquanto, basta entender que você poderia ter usado em HTML. É apenas usar conteúdo de texto com segurança, que foi o que fizemos. Espero que tenha aprendido muito nesta palestra. Mas como sempre, temos um longo caminho a percorrer. 25. O método do appendChild(): Gostaria que falássemos sobre uma criança dolorida e Annelida um pouco mais de detalhes antes de seguirmos em frente. Como sabemos, usando este método anexa seu elemento a um pai. Importante, porém, ele sempre adiciona os elementos para se tornar o filho perdido daquele pai em particular. No exemplo que acabamos de codificar juntos, vimos que nosso elemento corpo já lidera o H1 e os elementos de script como filhos. E é por isso que quando usamos a criança dor, eu vou tag parágrafo foi adicionado fora da tag R script para lembrar. Então você poderia dizer que este parágrafo é a criança mais nova no caso de você para obter meados de quem foi Editar fora para o script. Deixa-me saltar rapidamente para a consola e eu mostro-te. Para lembrá-lo, aqui estava o código de operação. Nós criamos rafe aparente e depois terminamos este parágrafo para o nosso elemento corporal. Então vamos para o console. Vamos inspecionar este documento. Vá para a guia Elementos, abra o corpo e boom, Eu vou parágrafo foi adicionado como a criança perdida vai chamá-lo de a criança mais nova para um pai corpo. Esse é o comportamento padrão de uma criança com dor. Então lá vamos nós. Acabamos de ver que uma criança dor e Zao elemento ou dores esse elemento como a criança mais nova para o pai. Animações de cobra. Vocês podem estar pensando neste momento, homens, eu nunca tenho controle do caminho? Eu quero colocar este elemento recém-criado. A boa notícia é que você tem controle. Temos vários métodos de adição de elementos, como uma criança dor, que vimos, inserir antes e substituir criança atende. O que quero que vejamos agora é inserir. Antes de inserir executar método é muito simples. Um que leva dois argumentos. O primeiro argumento é o elemento que você está querendo inserir em seu DOM. No nosso caso, seria a tag de parágrafo. O segundo argumento é uma referência ao irmão, também conhecido como o filho do pai que queremos preceder. O pouco confuso, não enfatize o topo para o editor de texto. E vamos olhar para esta inserção antes do método. Vejo-te agora. 26. O método insertBefore () — exemplo: Espero que você tenha esquecido e isso é incrível. Isso realmente, realmente é. E agora estamos olhando para como usar inserção antes. Então lembre-se da abordagem padrão e eu tenho isso no editor de texto inimigo basta rolar um pouco para baixo e em zoom in. Esta é a nossa abordagem padrão. Lembre-se que criamos um elemento, então encontramos um pai e, em seguida, usamos um pino filho. É o nosso bastão para lembrar, vamos agora tocar nosso pagamento para este corpo usando uma criança dolorida. Então abordagem padrão, mas não temos controle se inclinar no caminho. Queremos que o novo elemento seja colocado. Então agora eu quero que nós tipo de ajuste este código e eu quero que nós vejamos como inserir antes funciona. Por outras palavras, não quero que usemos um emprego remunerado. Então deixe-me remover isso. E eu quero dizer, sim, desta vez, vamos usar inserir antes para que possamos excluir esse código. E agora como isso funciona? Será que o primeiro passo neste método é encontrar o irmão que fomos preceder. Queremos encontrar o local em que queremos inserir uma tag de parágrafo. E digamos que queremos inserir nossa tag de parágrafo para essa tag H1 e um câncer, será antes dessa tag script. Isso faz sentido? Atualmente, sabemos que nosso parágrafo foi adicionado como filho muito, muito mais novo, então ele foi adicionado após a tag script. Mais, queremos que seja antes da tag de script. Então o primeiro passo é dizer aqui, vamos encontrar o irmão. Queremos prosseguir. Para fazer isso, vamos definir uma variável chamada Inequality, qualquer coisa que você quiser. Eu só vou chamá-lo de elemento script porque sabemos que este é o elemento que queremos inserir parágrafo antes. E, claro, você conhece todos os métodos de acesso agora, podemos obter o script acessando um seletor de consulta. E sabemos que estamos atrás daquela tag de script. Então isso é meio legal. Ficou um de dois. Agora temos a segunda instrução dentro do estado dois, e que está usando o Inserir usar o método insert before. Como é que fazemos isto? Lembra-te, eu disse para encontrarmos o nosso nódulo pai, que está no elemento corporal. Nós acessamos sua propriedade chamada inserir antes, que leva dois argumentos. O único é o novo filho, que definimos como novo elemento, que é a nossa tag de parágrafo. O segundo argumento é o item que queremos prosseguir, nesse caso, sim, é o elemento de script. Aqui vamos nós. E se salvarmos isto, espero que se tudo correr bem, deve funcionar. Então vamos abrir nossos sites. Você pode ver que nosso parágrafo ainda está aqui. Vamos inspecionar o documento. Vamos abrir este corpo. E eles como nosso parágrafo, quão legal é isso? Espero que sim, e isso é tão incrível porque agora colocamos nosso parágrafo antes que eles script tag. Muito, muito legal. Espero que esteja se divertindo. 27. Há um método de insertAfter().: Antes de seguirmos em frente, eu só quero mencionar mais algumas coisas sobre este método inserir executar. O ponto de partida, como sempre, é desenhar a árvore DOM. Então aqui vamos nós, sabemos disso. E o comportamento padrão é que se usarmos uma criança com dor para o elemento do corpo, ele pintará nosso parágrafo como a criança mais nova. Em outras palavras, ele vai pintar esse parágrafo depois da tag script. Às vezes, como desenvolvedores, queremos mais controle, não é? E em nosso exemplo, queríamos inserir seu parágrafo antes dessa tag script entre 81 e o script. E como fizemos isso? Isso é certo. Chamamos inserir antes no elemento corpo dentro especificado que os novos elementos, em outras palavras, esse elemento parágrafo deve ser inserido antes de nossos elementos de script. Havia isso simples e eu poderia estar pensando, ok, legal, isso é meio estranho porque, por que devemos ter que encontrar o irmão mais recente e inserido antes? Certamente? Certamente eles devem ser um método de inserção muitas vezes, também. Como se vê, não é um método de inserção após. Não sei porquê. É apenas o jeito que é. E isso significa que não há uma maneira integrada amplamente suportada de inserir um elemento de um elemento em vez de antes. Mas não se preocupe, podemos enganar o navegador combinando o método insert before com o método seguinte irmão. O que isso significa? Bem, isso só significa que o que estamos fazendo é inserir um elemento antes do elemento extra à frente que acabamos de adicionar? Isso é um pouco confuso. Deixa-me mostrar-te o que quero dizer. Então temos um corpo, temos o nosso H1 e temos o nosso guião. E suponha que, por enquanto, nós nem temos texto dentro dessa cobertura um dia, nós temos literalmente apenas uma tag H1 vazia. Nesse caso, o nosso elemento vai ser o único e o próximo irmão daquele H1 vai ser aquele script, certo? Então tudo o que queríamos fazer era inserir esse parágrafo antes do próximo irmão H1. Em outras palavras, antes desse elemento de script no palco ainda pode estar coçando sua cabeça. Então vamos pular para o console e eu vou te mostrar isso em ação. 28. Tricking o método insertBefore (): Quero que voltemos ao básico de novo. Então eu tenho todos os códigos na nossa frente que estão despojados de tudo o resto. E novamente, se voltarmos ao nosso navegador, temos apenas MRL. E é o que temos. Não temos mais o emparelhado. Certo, vamos voltar ao Visual Studio Code. Agora. Quero que demos um passo atrás e pensem no que queremos fazer. Temos o nosso H1 e temos as nossas etiquetas de script, certo? E queremos adicionar este parágrafo antes da tag script? Sim, podemos usar o método inserir antes. Mas às vezes seu código fica tão complicado. Às vezes você quer realmente inserir algo fora em algo. E como eu disse, não há inserções fora do método, é por isso que eu quero apenas passar por um exemplo rápido e rápido. A primeira coisa que quero fazer é pegar o corpo e a etiqueta H1, é a primeira coisa que quero fazer. Então lista definir uma variável elemento H1 como nossa tag H1. E eu vou estar apenas usando os seletores de consulta. E sabemos que esse é o 81. E claro que posso fazer exatamente a mesma coisa. Sim, mas eu queria encontrar agora o elemento corporal. E isso, claro, vai ser a etiqueta do corpo. Então eles passariam muito rápido. Agora eu quero que nós enganemos a inserção antes da função. Agora, a fim de enganar isso em função super completa, eu quero criar um novo elemento após o elemento. E então ainda temos o elemento H1. Vou te mostrar o que quero dizer. Então eu quero definir uma nova variável chamada H1. Isso é legal para o próximo elemento. E quero que acessemos nosso elemento H1. E eu quero chamar emitido. Lembre-se do próximo método irmão elemento. Já passamos por isso, você percebe que ele encontra o próximo elemento irmãos. Eu só quero dizer, sim, eu poderia usar o próximo irmão. Eu não tenho que usar os próximos elementos irmão. Só quero partilhar mais o que estou a fazer. Próximos elementos irmão irá literalmente agarrar o próximo elemento. Ser irmão que tag script em não vai pegar ele toma notas. Essa é a única razão pela qual eu fiz isso. Agora tudo o que eu quero fazer é que eu estou querendo acessar nosso elemento corporal. Eu quero usar esta inserção antes da função. E lembre-se que a inserção antes leva dois argumentos. O primeiro argumento é o nosso novo elemento que queremos colocar no DOM. E o segundo argumento é que o irmão de referência, nesse caso, sim, definimos como H1, próximo elemento. Quão legal é isso? Hoje nós vamos, nós literalmente fizemos isso e eu vou filmar para o navegador e eu vou mostrar-lhe que ele realmente funcionou. Mas basta retomar e pensar sobre por que é que nós gostaríamos de fazer isso. Bem, a única razão pela qual eu uso isso como às vezes você nem sempre sabe qual é o próximo irmão no seu código. E é por isso que o tratamos com uma árvore. Pegue o elemento atual em que, neste caso, é tag H1. Em seguida, acessamos o próximo método de irmãos. No nosso caso, usamos próximos elementos irmão que poderíamos ter usado Nick irmão. E então nós apenas tratamos o desempenho de inserção usando que próximos elementos Irmão que acabamos de criar. E então Hertz soa estranho, mas confie em mim, e às vezes você vai precisar usar esse carro admitido. A fim de inserir um item onde você deseja que ele no DOM. Mas deixe-me mostrar que realmente funcionou. Antes de passarmos para a próxima foto. Veja como conseguimos isso. Basta ir para o navegador. Vamos inspecionar o elemento. Vamos para os elementos. É abrir o corpo e eles, nós temos. Nosso parágrafo é inserido antes dessa tag script. Em outras palavras, isso é inserido após a tag H1. Então, eu espero que você tenha aprendido muito ARPU achando isso divertido e intuitivo. E vejo-te na próxima palestra. 29. Como remover elementos do DOComo DOM: Você veio de forma incrível, incrível. Agora você sabe como criar elementos e adicioná-los ao DOM. E, claro, o passo final agora é aprender a remover nós do DOM. E direto do bastão, eu só quero dizer que temos alguns métodos disponíveis para remover itens do DOM. O primeiro que quero que vejamos é chamado remove criança. Vamos dar uma olhada em como isso funciona. Bem-vindo de volta a este código testado e testado. Espero que esteja se divertindo agora quem estaria aprendendo uma tonelada? Agora sabemos como criar elementos e editar para o DOM. Claro, temos que aprender agora como removê-lo. E como eu acabei de dizer, um dos métodos disponíveis para nós como o que é conhecido como remover conjuntos infantis. Quando eu quero olhar para agora, Aqui estamos nós, nós temos nossa tag de parágrafo recém-criado. A primeira coisa que eu quero fazer é adicionar este parágrafo elementos para o DOM para lembrar como fazer isso. Bem, primeiro como fonte, todos os elementos do corpo, acessamos nosso documento, que QuerySelector. Pegamos nosso elemento corporal. E é claro que acessamos nossos elementos corporais. E, neste caso, não somos muito rápidos sobre como colocamos esta tag de parágrafo. Então, podemos apenas acessar este método append filho. E podemos obter nossos elementos. Tão simples. Se salvarmos este dia vamos, temos um parágrafo adicionado ao DOM. E eu sei que parece contra-intuitivo, mas agora vamos remover este parágrafo do DOM. E como fazemos isso? Bem, não pode ser mais fácil do que o que estou prestes a te mostrar. Tudo o que temos que fazer é acessar nosso nó pai. Neste caso, é o elemento corporal. Temos então de aceder a um dos seus métodos. E o método que queremos acessar restante é chamado remover filho. E a criança que queremos remover é que rastreia elementos de parágrafo recém-criados. Então, podemos apenas remover elemento. E se eu salvar isso, olhe para aquilo, ela se foi, ela está fora disso. Nós literalmente removemos um item do DOM e para prová-lo para você, deixe-me ir para o navegador, ouvir, falar este documento. Vamos fazer isso um pouco maior. E vocês podem ver aqui, esta é literalmente a nossa etiqueta corporal. Se abrirmos essa apatia é tag de parágrafo normal, nós literalmente removemos do DOM, tão bem feito. Você acabou de usar seu primeiro método. E eu já disse que não é tão difícil. Que, como sempre, são mais de uma maneira de esfolar um gato. E quero mencionar mais algumas coisas sobre isso. 30. Como usar o parentNode com o removeChild: Como eu disse, eu só quero falar um pouco mais sobre este método remover criança. A principal coisa a notar é que temos que chamar remover criança do pai da criança. Queremos remover. Em outras palavras, este método filho removido não viajará cima e para baixo nosso DOM para encontrar o elemento que queremos remover. Agora, digamos que não temos acesso direto aos elementos pai, e não queremos perder tempo encontrando-o. O que podemos fazer? Bem, ainda podemos remover esse elemento muito facilmente usando a propriedade nó pai. Em outras palavras, usamos apenas a propriedade do nó pai. E na propriedade net acessamos o método filho removido. Deixa-me mostrar-te o que quero dizer. Tudo bem, então aqui vamos nós. Aqui está o nosso código. Lembre-se que fizemos isso antes de usar a criança removedor em um elemento corporal. Que se não soubermos necessariamente o que é o pai do elemento que queremos remover. Em outras palavras, nós realmente definimos elemento corpo com o quê? Se não soubermos o que é isso? Bem, nesse caso, como eu disse, podemos acessar o nó pai e, em seguida, remover filho em seu nó pai. Como faríamos isso? Como se vê, é super simples. Pegamos nosso elemento que queremos remover. E parece meio estranho começar assim. Isso é o que fazemos dentro de acessar sua propriedade de nó pai, que nos dará seu pai. E aquele pai. Então nós dizemos, ok, legal, então vamos remover este elemento em si. Eu sei que é uma maneira meio indireta, mas é assim que temos que fazer isso usando essa abordagem. Se eu salvar isso e atualizarmos nosso navegador, não veremos nenhuma alteração. Lembre-se se eu comentar este código, nós temos nosso parágrafo no navegador. Se eu levar isso de volta em, se eu não comentou e nós salvamos o leitor, que literário faz remover esse parágrafo do nosso DOM. Então, espero que esteja se tornando mais intuitivo. Há outra coisa que eu só quero discutir, gracinha. 31. O método remove(): Tudo bem, com bactérias e eu vou código, nós apenas olhamos para CG remover criança. Algo que eu tenho que mencionar, porque eu nem uso criança removida muito mais. E a razão é que colocamos uma maneira muito grossa e muito nova de remover elementos do DOM. E isso nos é fornecido diretamente da caixa da API DOM. Qual é esse método? É super simples, É apenas remover frio. Então, sim, nós temos, nós apenas fizemos um exemplo. Deixe-me mostrar-lhe como funciona a função de remoção. E não pode ser mais intuitivo e simples do que isso. Tudo o que temos que fazer é o lado xy e queremos remover neste caso, bem, deixe-me apenas salvar isso. Então você pode vender parágrafo está no navegador. Quero removê-lo agora, tudo o que temos que fazer é acessar nosso novo elemento. Neste elemento temos direto para fora da caixa e método chamado remove. E se eu salvar isso, boom, ele se foi. Quão fácil e intuitivo foi isso? Era? Por que não começo apenas dizendo qual era o método de remoção e podemos até esquecer o método de criança removido. Bem, eu não sei cantarolando as duas principais razões que eu tinha discutir todos os métodos, incluindo todos os métodos. O primeiro é, ele lhe dá uma compreensão mais intuitiva no caminho que nós, sobre como chegamos onde estamos agora. Em outras palavras, isso nos ajuda a entender melhor nosso código. Você vai estar se deparando com cartão antigo também. Tem essas crianças removidas e você vai ficar como o que é isso? Essa é a primeira razão. A segunda razão pela qual eu não mencionei isso no início é que os navegadores suportam o método remove é um método muito novo. Isso significa que alguns dos navegadores mais antigos não suportarão isso. Então, se você quiser ser extra seguro, use o método remove filho. Se você quer que seja como eu, nova era, você meio que quer entender como as velhas abordagens funcionam, mas não realmente, eles ficam com o método de remoção. Isso é o que eu uso. E confie em mim, 95% das vezes, está tudo bem. E o método remove, como você acabou de ver, era muito mais intuitivo e nos permite acessar diretamente o elemento e simplesmente remover. Dói muito, muito simples. Mas é importante, independentemente do método que você escolher, ambos os métodos nos permitem remover um elemento DOM, incluindo aqueles que estavam originalmente em nossa marcação HTML, não apenas criados dinamicamente uma vez que isso seja importante. Outra coisa que vale a pena mencionar é que o elemento DOM que estamos removendo tem muitos filhos e netos. Esses serão removidos também. Então, é um método bastante perigoso que apenas atingiu um ponto que fora antes de começar a remover tudo e, em seguida, descobrir que literalmente tudo é removido. Então lá vamos nós. Então você tem um Tóquio se divertindo muito. E a propósito, se você está se perguntando o que são essas caixas, inicialmente, é Trek nós. É literalmente compartilhar grilos de Natal. Eu estou olhando para o 22º desativador antigo três dias antes do Natal, mas eu adoro essas coisas e isso é o riso geral. Talvez fazer algumas filmagens. Eu, continue com o meu curso porque quando eu coloco isso juntos, você sabe, e adoro, como se eu realmente gostasse de ouvir signatário. Espero que seu Natal tenha sido bom. E vejo-te na próxima palestra. 32. Elementos de clonagem: Estou super animado com esta seção. Estamos indo de novo para algo que nós realmente, realmente incrível. O que, desculpe-me, uma constante porque é muito fixe. Quero dizer, novamente, eu estou indo todos os dias de um vigarista lidar com isso. Que esquisito. De qualquer forma, vou tentar continuar de onde paramos. O que você está dizendo é que este link vai ser sobre clonagem, sobre replicar coisas. Que você pode começar com um único e um do tipo. Então vai ser super interessante. Que tal café? Espero que você também. E ele se junta mais tarde, sente-se, relaxe e vamos começar rachando. Ver anónimo. Woo hoo. Esta seção continua recebendo WIDA. E quando o mais longe em que entramos não. Mas, felizmente, nós praticamente na última seção quando se trata de manipular o DOM, a única técnica de manipulação DOM restante que precisamos estar cientes é aquela que gira em torno de elementos de clonagem. E por elementos de treinamento, quero dizer apenas criar réplicas idênticas de um determinado elemento. Mas isso está ficando estranho? É quase como se pensasses que tens uma impressão digital única. E, de repente, ele definiu que há muitos outros idênticos, o mesmo. E essa impressão digital, sua impressão digital costumava ser única. E esta é a ideia da clonagem. Tudo bem, a parede inclinada, como nós clonamos é muito fácil. Usamos um método chamado nó clone no elemento que queremos replicar ou clonagem. Mas segurem seus cavalos. Há mais uma coisa que precisamos fazer. Precisamos fornecer este método um argumento verdadeiro ou falso. E isso especifica se queremos clonar apenas o elemento, se queremos clonar o elemento e todos os seus filhos. Se você está querendo clonar um elemento, bem como todos os seus filhos, passamos o valor verdadeiro para este método. Se você está apenas querendo replicar o próprio elemento no nível alto, passamos o argumento false. E agora você pode estar pensando, legal, entenda como funciona, mas por que quereríamos clonar algo? Basta dar um passo para trás e pensar se há algum cenário em que este algum tipo de repetição em seu site, então a clonagem seria benéfica. Por exemplo, digamos que você tenha uma ShoppingList dinâmica E toda vez que um usuário adiciona um item à ShoppingList, ele é adicionado ao carrinho ou é adicionado a uma lista. Toda essa etiqueta LI e todos os estilos e as crianças que você tem nela. Se você fizer isso, será incrível se você puder apenas cloná-lo toda vez que o usuário clicar no botão Adicionar, certo? Como se fizesse sentido, na verdade é bastante intuitivo. Mas neste momento você provavelmente coçando a cabeça. Não se preocupe, vamos entrar no console e começar a codificar. Vamos começar a ver como esse método funciona. Estou super entusiasmada por te ver agora. 33. Clonagem — exemplo: Certo, é hora de um exemplo prático. Então você pode ver em segundo plano eu tenho código e volta para o Visual Studio Code. Tira isso para baixo. Eu só tenho um H 1.5 por parágrafo. E se eu te mostrar como é se colocarmos nossa tela aqui, é isso. Simples, não é nada mais. É tudo o que tenho o que quero fazer. Bem, digamos que queremos replicar este parágrafo. Em outras palavras, nós meio que queremos isso, certo? Mas eu não sei, digitei estaticamente no HTML. Quero que isto seja adicionado dinamicamente, e quero que clonemos este parágrafo. Como faríamos isso? Bem, é disso que se trata esta palestra. Então vamos entrar nisso. Permitam-me que apague estes parágrafos. E aqui temos um início tardio na codificação. A primeira coisa que eu quero fazer é adicionar uma classe a este parágrafo. E vamos chamar uma mensagem de classe. Podemos chamar-lhe o que quisermos. E agora quero que adicionemos nosso JavaScript. Agora as duas coisas que quero fazer. Em primeiro lugar, quero definir onde queremos colocar o parágrafo e queremos colocá-lo dentro do corpo, não se preocupe. Queremos que seja uma criança do corpo. Então eu preciso de um acesso ao nosso elemento corporal. A segunda coisa que precisamos fazer é definir o que queremos escalar. E neste caso, queremos clonar a tag de parágrafo. Espero que isso faça sentido. Então, o primeiro passo é pegar nosso elemento corpo, bem como o item que queremos fixar, que é o elemento parágrafo. Faz sentido? Então vamos definir o nosso elemento corpo como variável elemento corpo. E podemos pegar isso de várias maneiras. Nós vimos como realmente no curso você deve ser um masterizado isso já. A primeira coisa que temos que fazer é, como sempre, acessar o elemento raiz inicial do nosso DOM, que é este objeto de documento com nossa rede, temos uma infinidade de métodos disponíveis para nós. Os 10, 12 anos agora é o QuerySelector. E é claro que queremos obter este elemento corporal. Vamos fazer a mesma coisa. Mas para o parágrafo, vamos chamá-lo de elemento para. E novamente, começamos o documento. Agora podemos usar o seletor de consulta. Mais uma vez, quero misturar as coisas. E foi por isso que pensei em colocar uma aula lá. E como sabemos, tem uma classe de mensagem. Hoje temos dívidas. Nosso primeiro passo, a próxima coisa que eu quero fazer é eu quero executar uma função. E essa função vai adicionar esta tag de parágrafo dinamicamente à nossa página web. Se você não sabe o que são funções, como escrever na sintaxe demonstra, eu tenho um curso completo real sobre JavaScript e como as funções funcionam. Se você está interessado, você sabe, dar uma chance. Se não, sem estresse. Vou escrever uma cauda com você de qualquer maneira. Tudo bem, então vamos começar a definir nossa função. Vamos definir o nosso, e vamos chamá-lo de aplicativos modernos dizer o que função qualitativa queremos. Sim, usamos a palavra-chave de função em JavaScript. Então definimos o nome da nossa função, que é dizer o quê? Dentro das duas chaves, aqui é onde nós realmente temos a carne do nosso código. A primeira coisa que quero fazer é descobrir qual é o nosso texto clone. Vamos definir uma variável chamada texto clonado. E o que queremos clonar? Isso mesmo, queremos clonar nosso parágrafo. Não estamos elemento para foi, menos que elemento podemos agora acessar o nosso método clone Node. Lembre-se que na palestra anterior, Vou clonar método Node. E você se lembra do argumento que precisávamos para fornecer esse método? Vamos escrever, precisávamos fornecer um booleano, verdadeiro ou falso. O que acha que devemos colocar aqui? Quero que pense sobre isso. Eu quero que você pense se nós precisamos colocar verdadeiro ou falso neste argumento aqui, neste clone Node. Dê um passo para trás. O que vamos clonar? Clonando esse parágrafo. E o parágrafo está embaixo da etiqueta H1, não é? O parágrafo tem filhos? É uma pergunta enganosa e você pode estar pensando que não tem filhos, caso em que você deve colocar falso. Mas isso seria errado. Que eu vou te mostrar no dia seguinte para você, por enquanto. Ele tem filhos. Na verdade, tem que toma nodo como uma criança. Então temos que passar o argumento verdadeiro. Então lá vamos nós. Neste ponto no tempo, nós literalmente clonou nosso texto incrível direitos bit. Da mesma forma que quando usamos o método de criar elemento. Lembre-se de como ele simplesmente flutua em torno de sol sozinho perfeitamente. A mesma coisa vai acontecer aqui. Criamos este elemento de sabor clone, este parágrafo. Então está flutuando por aí. Temos que anexá-lo a um pai. E é exatamente por isso que tivemos que criar esse elemento corporal. Você precisa rolar um pouco para baixo para que você possa ver, lá vamos nós. Então tudo o que temos que fazer agora é ter acesso ao nosso elemento corporal. Temos notícias de hoje, o método “Applid Child” onde não temos que fazer exatamente o que vamos fazer aqui. E, claro, o argumento ou a criança que queremos acrescentar é o nosso texto clonado. Não faz sentido. Mas neste momento, se pararmos aqui e formos para o navegador, nada estava acontecendo para nós e podemos inspecionar o documento. E podemos abrir nosso corpo. E vocês podem ver que só temos um parágrafo. Não há segundo parágrafo. Nós não fizemos nada. Em outras palavras, não executamos disfunção. Nós criamos a função, mas não executamos nela. E como eu quero fazer isso? Ou podemos apenas executar a função por arrefecimento, digamos água aqui. Podemos voltar ao nosso navegador, e lá vamos nós. Nós literalmente adicionamos um parágrafo à nossa alcalose DOM. Mas eu quero fazer isso dinamicamente e eu queria continuar acontecendo cada 1 segundo. Então, como faríamos isso? Vamos voltar ao nosso código. E eu quero usar agora um método embutido DOM chamado intervalo sic. Então, aqui vamos usar um parafuso na função DOM, que por sinal é a partir do objeto janela. Para executar a nossa palavra, que função a cada 1 segundo. E o método que eu quero usar é chamado de intervalo de sessão. E apenas um pouco de uma mosca, um monte de pessoas, e se você começar a pesquisar o intervalo de sentados no Google, eles acham que é um método JavaScript. Não é um método JavaScript. Ele vem do objeto janela dentro do nosso DOM novamente. Então aqui está apenas um pouco de informação para você que você pode colocar para fora na próxima era da festa. Método de intervalo Sit leva dois argumentos. O primeiro argumento que leva é o manipulador. Em outras palavras, é a função que você deseja executar. Queremos executar o, dizer qual função, não é? O segundo argumento é com que frequência queremos que esta função execute o tempo limite. Sim, queremos executar esta função a cada 100 milissegundos, em outras palavras, a cada 1 segundo. Agora, se eu salvar isso e vamos para o nosso navegador, veja o que vai acontecer. Sim, faz-te desligar isto. Deixe-me refrescar. Olha o que está acontecendo. Um centro que está soprando sua mente. Quão legal é isso? E se inspecionarmos elementos em nossa página e abrirmos este corpo é apenas refrescos, emparelhar com ele e começar de novo. Conosco. Olhe para o parágrafo deles sendo adicionado ao nosso DOM. Dinamicamente. Whoo, Isso é incrível como um homem adulto, esperança anos Hampton animado como eu estou literalmente manipulando o DOM na mosca. É automático, confunde minha mente. Eu acho que é incrível. Uma coisa que quero mostrar rapidamente é que se voltarmos ao nosso código, se falharmos como nosso argumento aqui, o que acha que aconteceria? Você acha que o parágrafo seria adicionado ao DOM? Você pode ter dito não, mas na verdade o parágrafo ainda é editado para o DOM. Mas sem qualquer intuição Jordan, são crianças TXT. Não é preciso nenhum, é senso econômico. Então, se voltarmos para nossa página agora, você pode ver que nossa página em si não está sendo atualizada porque não há texto dentro do parágrafo. Mas se inspecionarmos este documento e me deixar atualizar. Você pode ver no seu console, no seu DOM que o parágrafo está sendo editado a cada 1 segundo. Espero que faça sentido que na próxima palestra, eu quero olhar para este código com mais detalhes e apenas resumir o que fizemos. 34. Analisando nosso código de clone: Eu quero que nós apenas dar um passo para trás e entender o que é que nós acabamos de fazer porque é um tópico tão legal e interessante faz e nomear outros tutoriais que são encontrados em cursos. Se um cobriu esse tipo de coisa. Espero que tenha gostado da diversão dela. Mas de qualquer forma, o segredo do que está acontecendo está no nosso código. Vamos realmente ficar melhor ocorreu. E, especificamente, não precisamos falar sobre o H1 e o parágrafo faz um bastante simples. O que precisamos fazer é saltar de volta para o nosso script tag. E precisamos de um momento para entender o que está a acontecer. No topo, temos a nossa variável elemento corporal. A primeira coisa que fazemos é definir nossa variável elemento corporal. E isso faz referência ao elemento do corpo em nosso HTML. Bastante direto. Da mesma forma, definimos a nossa variável elemento pai e, em seguida, faz referência nosso elemento parágrafo com um valor de classe de mensagem não é nada muito especial acontecendo aqui, você deve estar muito familiarizado com isso. Agora, aqui é onde as coisas ficam interessantes e divertidas. Temos a nossa função de temporizador de intervalo definido que chama a função dizer o que a cada 100 milissegundos, a cada 1 segundo. Está dentro disso, diga qual função onde a clonagem real está ocorrendo. Então você poderia dizer que a parte mais importante do código para nós é esta. Diga qual função? Como é que isto funciona? Será novamente, definimos uma variável chamada texto clonado. E atribuímos a isso o valor do nosso clonado eliminado. A fim de clonar um elemento. Tudo o que fizemos foi usar o método clone Node em nosso elemento parágrafo. O resultado de nós fazer isso é que uma cópia do nosso elemento de parágrafo agora é criada e armazenada como parte da variável de texto clonado. O último passo é adicionar o nosso novo impulso nos dormitórios para que ele apareça. Lembre-se, sem fazer isso, está flutuando no nome, está perdido. Precisamos anexá-lo a um pai. Faz sentido. E é por isso que acessamos o elemento pai. Em seguida, usamos esse método de pintura infantil, que vimos em palestras anteriores. E, claro, adicionamos o texto clonado a este elemento corpo. E graças ao nosso intervalo definido, todo o código sob o dizer que função repete para manter adicionando são clonados elemento para a página. E, claro, a última coisa que você notou foi que passamos o valor verdadeiro ou falso. Yaks, é o último exemplo que mostramos, mas nós realmente pausar verdadeiro como o argumento nesta função clone Node. Por que fizemos isso? Nosso elemento de parágrafo não parece ter filhos, certo? Bem, é aqui que a distinção entre elementos e nós entra em jogo. Nossa tag de parágrafo não tem nenhum filho ou elementos que o texto dentro da tag de parágrafo é realmente um nó filho. Especificamente, um filho toma nó. E esse detalhe é muito importante ter em mente quando você está encontrando uma clonagem suave e não espera ver o que você fez. Espero que isso esteja fazendo cenas. Um hub está se tornando mais intuitivo para você agora. E acima de tudo, espero que esteja se divertindo. 35. Desafio de curso final — introdução: Achei que seria divertido fazer outro exercício para aplicar o que aprendeu. Você pode ver aqui no fundo, eu tenho uma página muito simples chamada animais legais. E sob isso, eu tenho um monte de itens da lista. E o que eu quero que você faça é que eu quero que você pense sobre como você pode adicionar dinamicamente esses itens de lista à página como eu fiz. Então eu vou te mostrar o código e são fornecidos na palestra. Você pode baixar um romance. Mas este é o ponto de partida. Você pode ver apenas em um CSS muito simples. E se rolarmos para baixo, é aqui que o cerne do exercício entra em jogo. Tenho uma etiqueta 81 e uma etiqueta UL. Bastante direto. Então eu tenho o script R, eu tenho o nosso JavaScript, encontrar uma matriz chamada animais. Isso é o que eu fiz. O que eu quero que você faça é que eu quero que você adicione todos esses itens dentro dessa tag UL dinamicamente. Com JavaScript. Consegues descobrir como fazê-lo? Você sabe como acessar o DOM, você sabe como criar elementos, você sabe como colocar esses elementos no DOM, dar-lhe um diodo. E na próxima palestra, mostrarei como fiz. Realmente não é tão difícil, mas deve apenas reforçar ou desviar, ter sim. 36. Desafio de curso final — solução: Você deu uma chance? Espero que sim. E você verá aqui como é intuitivo e fácil, na verdade , uma vez que você entende todos esses métodos, é realmente divertido. Então vamos entrar nisso. Qual é a primeira coisa que precisamos fazer? Bem, vamos tentar. Precisamos definir onde queremos colocar essa tag LI na qual vamos criar. Lembre-se que colocamos anexado a ele aparente, nesse caso, nosso pai é a tag alt. Então, o primeiro passo é definir uma URL. Vamos chamá-lo de elemento UL. E podemos literalmente encontrá-lo. Podemos atribuir-lhe um valor. Sim, começamos a documentar. Esta é a raiz da nossa página. Nós acessamos um método chamado QuerySelector e nós apenas encontrar a tag UL. Lá, nós temos. Este é o primeiro passo. O segundo passo que precisamos fazer é criar uma tag LI. Precisamos, em seguida, adicionar takes a essa tag LI, e, em seguida, precisamos editar para este novo elemento. Como é que vamos fazer isso? Bem, em primeiro lugar, temos uma matriz chamada animais. Precisamos de uma espécie de loop através dessa matriz. Precisamos pegar cada item que estamos passando. Inclua isso como as tomadas para a tag LI e, em seguida, adicionamos isso à URL. Espero que isso faça sentido. Deixa-me mostrar-te como é a nossa terra. Novamente, há muitas maneiras de esfolar um gato quando, quero dizer, poderíamos usar o tradicional for-loop, eu quero usar nós quatro apenas mais intuitivo para mim. Se você não sabe o que isso significa. Mais uma vez, você pode fazer o meu curso JavaScript. Você pode apenas pesquisar no Google. É muito simples para loop. Então, sim, tudo o que quero fazer é definir um “for of loop”. Iterador é cada item na matriz. E vamos ligar para aquele animal. Podemos chamá-lo do que quisermos de que objeto enquanto queríamos percorrer aquela matriz chamada animais. Então lá vamos nós. Cada vez que ele itera através desta matriz, ele vai nos jogar de volta o nome do animal em uma variável chamada animal. Isso é tudo o que ele faz código significa e tudo o que ele está fazendo. Por favor, não se intimide. Tsunami. Saiba que cada vez que ele passa por essa matriz, nós vamos ter esse nome animal em uma variável chamada animal legal. Isso é fixe. Mas qual é o primeiro passo? O primeiro passo é criar nosso item de lista. Vamos chamá-lo de item da lista. Como criamos isso? Lembre-se que começamos nosso documento. Nós acessamos um método chamado criar método. Criar elemento, desculpe. E o elemento que queremos criar é este ataque dos Aliados. Até agora tudo bem, agora você concordaria comigo que criamos uma tag de aliado, mas está vazia. Não há gosto. E em uma das palestras anteriores, muito, muito mais cedo, discutimos como adicionar texto a um elemento recém-criado. Lembra-se de como fizemos isso? Vamos escrever acessamos uma propriedade no elemento chamado conteúdo de texto. Poderíamos usar em HTML. entanto, para ataques de script entre sites, é muito mais seguro usar tomadas para conteúdo. Então vamos fazer isso. Vamos acessar nosso item de lista recém-criado. Então queremos mudar o seu conteúdo de tomadas, não é? E a que queremos que isso seja igual? que queremos atribuir isso? Onde queremos que seja o nome do animal. E como mencionei, temos essa variável chamada animal para cada iteração de loop. Então lá vamos nós. Nós literalmente agora ou manipulado, leva conteúdo. Qual é o último passo? O último passo é adicionar isso ao nosso DOM, certo? O novato está flutuando no espaço por si só. Temos que editar algo. Sim, definimos o elemento UL como seu pai. Queremos acessar o método da criança dor, NGS. Fomos pintar o que queremos acrescentar este item de lista. Então, lá temos. Antes de salvar, se eu for para o navegador, você pode ver aqui nós temos apenas um título chamado animais legais. Voltarei ao código do Visual Studio aqui e salvo. O que você acha que vai acontecer? Bem, espero que tenha funcionado. Vamos para o nosso navegador. E boom, a IGA, isso é incrível. Literalmente temos o que queríamos. Espero que faça sentido. Espero que tenha se divertido com esse exercício. Isso realmente colocou um monte de conceitos diferentes que você aprendeu no curso juntos na criação de algo realmente legal e divertido. Enquanto isso, estou muito, muito impressionado. 37. Curso de melhor uso: Alto-falante que você tem um vendedor, certo? Literalmente acabou de terminar uma aula enorme. Falando em manipular a maneira dominante, movendo-se com a adição de elementos HTML dinâmicos a ele. Vamos lá, isso deve ser emocionante Walden sério, você aprendeu sobre nós. Você aprendeu que na indústria de desenvolvimento nós meio que olhamos para nós como um relacionamento pai, filho e irmão. E uma vez que você entende isso, realmente não é tão difícil, é bastante intuitivo atravessar o DOM Walden a sério, tapar a si mesmo nas costas e não tomar como garantido o quanto você aprendeu até agora. Mas para mim é sempre um morcego, não está lá. Ainda não terminamos. Porque nas próximas aulas, na verdade, na próxima perda, vamos falar agora sobre um conceito crucial no DOM e que são os eventos. Porque muitas vezes você não quer apenas criar algo estaticamente. Você deseja reagir a determinados eventos quando um usuário clica em um botão ou em uma veia, você quer fazer algo quando você usa uma rolagem com o mouse, quando um usuário executa um evento de chave para cima, só então você costuma querer fazer algo. Então, com isso dito, vamos fazer uma pausa, tomar um café. E na próxima palestra, Vamos começar a falar sobre veias dormi são chamadas de branco.