JavaScript: trabalhando com o Document Object Model (DOM)

Name: JavaScript: trabalhando com o Document Object Model (DOM)
Author: Joseph Barrett

Como utilizar o Document Object Model.

Preview the first lesson free — get full access to all 6 lessons.

Curso: sob demanda

Nesta lição, veremos como criar e inserir novos elementos no Document Object Model. Então, vamos ver o que temos até agora. Tenho sua caixa de seleção de variedades de jardim aqui, e eu tenho um tamanho de cinco especificado para que saia como uma caixa de lista, e temos alguns elementos de opção existentes. Digamos, por exemplo, que talvez este seja um site de viagens. As pessoas querem escolher uma cidade para visitar. Damos a eles algumas opções padrão. Também queremos permitir que eles adicionem uma nova cidade à lista e eles serão capazes de fazer isso digitando o nome da cidade bem aqui. Agora, isso ainda não funciona. Vamos adicionar o código para fazer isso. Portanto, tenho um manipulador de eventos aqui para o botão de envio e eu selecionei que representa esta caixa que já temos aqui. Vou passar por duas etapas aqui. A primeira coisa é criar meu novo elemento e a segunda é que vou inseri-lo no elemento existente em um determinado lugar. Este é apenas um pequeno método auxiliar que criei que me permite pegar uma cidade com espaços no nome e transforme isso em um valor específico. Mas o ponto crucial disso é observe que estou fazendo document.createElement e estou criando um elemento de opção. Quando você quiser especificar atributos para esse elemento, você pode simplesmente identificá-los com seus valores. Então, o valor será aquela string em minúsculas que eu crio aqui e o texto será o valor real da caixa da cidade que fizemos lá. Então, nós criamos isso. Agora, como vamos colocá-lo onde queremos que esteja? E nós temos algumas maneiras diferentes que podemos ir aqui. O primeiro é prefixar. Então, estou pegando aquele elemento selecionado e isso apenas o insere antes do primeiro elemento filho. Então, se voltarmos aqui e dermos uma olhada, aqui está sua coleção de elementos filhos para a caixa de lista de seleção. Então eu vou levar isso. Vou adicionar isso no início. Então, vamos digitar Tóquio e clico no botão enviar, e lá ele o torna o primeiro. Agora, também podemos fazer isso de uma maneira ligeiramente diferente. Também temos insertBefore. InsertBefore leva o item que vamos inserir, o elemento que vamos inserir, como o primeiro parâmetro e diz para onde queremos que ele vá. Então, neste caso, nós filhos de zero, e vamos salvar isso e refazer a página novamente. E isso deve funcionar bem ali no começo novamente. Certamente não estamos restritos ao primeiro elemento. Eu poderia dizer para fazer isso e acabamos descobrindo que está aqui embaixo. Agora observe que não é o quarto ou mesmo quinto elemento, mas o que você precisa entender sobre esses elementos é que as opções não são os únicos nós lá. O espaço em branco, por exemplo, vem como um nó de texto. Então você tem que observar com muito cuidado quando você está rastreando os elementos dessa coleção. Agora, se você quiser inseri-lo no final, podemos fazer isso também. Vamos tentar isso como outra maneira de fazer isso. Aqui vamos nós. Append apenas o coloca no final. Então, se tentarmos mais uma vez, lá vamos nós, esse é o último. Então, nesta lição, aprendemos algumas maneiras diferentes para garantir que nosso novo elemento apareça em um local específico no elemento existente no DOM. Obrigado por assistir. Em nossa próxima lição, falaremos mais sobre navegando pela hierarquia do Document Object Model.

Intermediário Fornecedor : Joseph Barrett 6 lições · 29m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

O modelo de objecto de documento (DOM) é uma função básica do JavaScript. Neste curso, aprenderás a criar e inserir elementos no DOM, como navegar no DOM e como mover itens na página da web. Farás um exercício sobre como mudar a aparência de tua página e aprender a mudar os atributos HTML. Por fim, obterás dicas para alterar as folhas de estilo em cascata (CSS), que descrevem como tua página aparece visualmente no ecrã.

O Que Você Vai Aprender

Crie e insira novos elementos no Document Object Model (DOM) usando JavaScript
Navegue pelo DOM para localizar e trabalhar com elementos da página
Mova elementos em torno de uma página web
Altere a aparência de sua página e manipule atributos HTML
Aplique dicas e truques para trabalhar com folhas de estilo em cascata (CSS) em JavaScript

Principais Conclusões

O modelo de objeto de documento (DOM) é uma função básica de JavaScript.
JavaScript pode ser usado para criar e inserir elementos no DOM, bem como navegá-lo.
Elementos podem ser movidos na página web e seus atributos HTML podem ser alterados usando JavaScript.
Folhas de estilo em cascata (CSS) descrevem como uma página aparece visualmente na tela, e o curso abrange dicas para alterá-las.

Perguntas Frequentes

O que este curso abrange?

Ele abrange criação e inserção de elementos no DOM, navegação do DOM, movimentação de itens na página web, alteração da aparência da página, alteração de atributos HTML e dicas para alteração de folhas de estilo em cascata (CSS).

Quais habilidades vou ganhar com este curso?

Você desenvolverá habilidades no Document Object Model, DOM Scripting, HTML Document Object Models, HTML Scripting, JavaScript (Programming Language) e Object-Oriented JavaScript.

O curso inclui prática prática?

Sim, você fará um exercício sobre como alterar a aparência de sua página.

Quais aulas estão incluídas?

As aulas são Creating and Inserting New Elements, Navigating the DOM, Moving Elements on the Page, Changing the Page Appearance, Attribute Manipulation e CSS JavaScript Tricks.