Bem vindo de volta.
Neste vídeo, vamos passar o tempo falando sobre as diferentes formas de selecionar elementos usando
javascript e a boneca.
Antes de falar sobre os seletores reais, precisamos apenas rever o documento mais uma vez.
Lembre-se de que todo o nosso dormitório todos os objetos, todas as representações de nossos elementos, todos vivem
dentro desse objeto de documento.
É o objeto de nível superior ou o nó raiz.
Então, rapidamente, vamos abrir qualquer janela do navegador.
Eu vou usar o Google e vamos tentar digitar essas quatro linhas.
Então abra o console e digite o documento do ponto em que você está l e ele nos mostra o URL da página em
que estamos.
Você pode fazer links de pontos de documentos e essa é uma lista completa de cada link na página.
Cada marca de âncora única que podemos fazer documentar que Vadi e este é o corpo inteiro com todos os outros elementos
dentro dela que vivem no corpo e podemos fazer documento cabeça de ponto.
Então já vimos isso nos últimos vídeos.
que todos os seletores todos os métodos que vamos aprender também vivem dentro do documento.
A razão pela qual eu estou mostrando para você novamente é
Então, tudo sobre o que aprendemos neste vídeo vai começar com o documento com algo de ponto.
Então, vou mostrar-lhe quais são essas coisas.
Existem cinco métodos principais sobre os quais vamos falar neste vídeo.
Estão todos incorporados ao documento.
Todos começam com o ponto do documento.
Você pode vê-los aqui, obter elemento por identificação, obter elementos por nome da classe, obter elementos por seletor de nomes de tags
e seletor estranho.
Tudo se você pode pensar de volta ao vídeo que eu fiz ao adicionar métodos a um objeto onde basicamente
podemos armazenar uma função como um valor em vez de um objeto.
Nós tínhamos como espaço de gato no espaço do cão e nós precisamos falar o método que adicionamos ao nosso objeto de espaço para cães.
Isso é exatamente o que está acontecendo aqui.
Estes cinco métodos foram todos adicionados ao objeto do documento.
Então, antes de realmente começar aqui, quero mostrar o e-mail H-G que vou usar
para fins de demonstração.
É uma página muito simples, apenas tem alguns elementos.
Portanto, nossa cabeça normal está praticamente vazia além de um título ou corpo.
E então dentro do corpo para H-1 é aquele que diz olá.
Outro que diz adeus.
E, em seguida, três aliados em vez de um UL e os três aliados lista item dois e três são
ligeiramente diferentes.
O primeiro tem um destaque ID e o último a ter uma classe chamada negrito.
Então vamos usar isso.
O fato de que alguns deles são H-1 alguns dos elementos são aliados.
Alguns têm aulas.
Um tem um ID.
Nós vamos usar essas propriedades diferentes para selecioná-las de maneiras diferentes e combinações diferentes.
Então eu estou usando este mesmo código aqui nos exemplos e estou desenhando uma caixa verde para que você possa ver
nos próximos slides.
Uma caixa verde em torno do que for selecionado.
OK então vamos começar com o primeiro método.
Obter elemento por ID.
Então, seu nome é um pouco auto-explicativo.
É necessário um nome de identificação e vai retornar o único elemento que corresponde a essa ID.
Lembre-se de que uma ID só pode ocorrer uma vez em uma página.
Então, aqui está um documento de exemplo diked get element by ID.
Highlight selecionará esse aliado que tenha o Id resaltado, portanto ele seleciona o objeto e depois retorna
para nós.
Vou mostrar rapidamente isso no conselho.
de documento, obter o elemento pelo ressalto do ID, que é o nosso nome ID.
Então, vamos abrir o console para um tipo
Vamos salvá-lo para uma variável chamada de tag.
Clique em Enter.
E vamos ver o TAG.
E você pode vê-lo nos dá a primeira linha que tem ID igual a destacar.
Então selecionamos algo por um ID.
Novamente está nos mostrando como se realmente fosse envelhecer bem, mas o resultado disso é
realmente um objeto javascript.
Então, podemos fazer isso cancelado que Diyar novamente na etiqueta.
E isso é realmente o que parece.
Todas essas propriedades.
Então, este é apenas um atalho agradável para que possamos visualizar visualmente o que selecionamos, mas, na realidade, é uma
representação de objeto.
Tudo bem, então é tudo o que há para obter um elemento por ID.
Nós chamamos o método que passamos em um único argumento de seqüência de caracteres o nome de um ID que
queremos e depois ele vai e encontra o elemento correspondente que tem a mesma ID e retorna a representação do objeto para nós.
O próximo é obter elementos pelo nome da classe, então o nome dele diz exatamente o que ele faz.
Assim como obter um elemento por ID.
Embora este seja um pouco diferente Obtenha elementos em plural com um S pelo nome da classe.
Lembre-se de que uma classe pode ocorrer quantas vezes quisermos em uma página.
Então, passamos uma string como em negrito e isso vai retornar uma lista de todos os elementos da página que têm
o nome da classe em negrito em negrito.
Neste caso, há dois deles, mas se houvesse dez mil elementos na página que tivessem essa classe,
obteríamos todos os 10000 em uma lista.
Então, vamos demonstrar isso, por isso classificará o documento, obtendo o elemento pelo nome da classe e você pode ver se conseguimos esse pequeno autocomplete
aqui para que possamos selecionar aquele que queremos obter elementos pelo nome da classe e, em seguida, o nome
da classe que queremos é em negrito.
Vamos salvá-lo em uma variável.
Tags não tags, mas tags, porque nós vamos recuperar várias tags se olharmos para quais tags são.
É uma lista de duas mentiras tanto com classe igual a negrito.
Tecnicamente, não é uma matriz.
É algo chamado uma lista de nós que é como uma matriz.
Eu gosto de pensar nisso como uma matriz leve.
Então, vem com algumas das coisas que você esperaria de uma matriz.
Mas algumas das características mais avançadas estão faltando.
Então, por exemplo, podemos acessar elementos como esse usando uma tag de índice 0.
Nós podemos fazer tags para flanquear, mas não podemos fazer uma para cada tag de loop para cada ponto.
E se eu apenas fizer isso, ele vai me dizer que as tags são para cada um.
Não é uma função.
não existe uma definição definida para essas listas de nó definidas para arrays e estas não são arrays.
Então, é porque
E, assim como com o elemento get by id, mostra-nos essa agradável representação de string, mas nos bastidores
é realmente um objeto.
Então, novamente, apenas para provar isso para você console dot DIR e nós fazemos tag zero.
E é realmente este grande objeto complexo e louco com toneladas de propriedades.
OK, então, obtenha elementos pelo nome da classe.
Ele retorna uma lista.
Não é uma matriz.
E contém todos os elementos da página que correspondem ao nome da classe que fornecemos.
Em seguida, obtemos elementos por nome etiquetado.
Então, este funciona como obter um elemento por ID ou obter elementos pelo nome da classe.
Exceto que ele retorna uma lista de elementos que combinam um nome de tag determinado como Ally ou H-1.
Então, neste caso, eu estou executando arquivos de documento para obter elementos pelo nome da tag Alhaj, que vai
me retornar uma lista dos três aliados que existem nesta página.
iguais ao documento que obtém elementos pelo nome da etiqueta e vamos fazer o Alhaj primeiro e vamos ver as tags e nós
obtemos esta lista também não é uma matriz, é uma lista de nós que tem três aliados e não vou provar isso para você desta vez.
Então, novamente, vamos demonstrar que as tags var são
Fui ao cônsul o DJR.
Mas estes são objetos que não são apenas cordas ou não.
H tim, eles são realmente objetos javascript com todas essas propriedades.
Então eu posso fazer o mesmo para H-1.
Então, vamos selecionar todos os h e olhamos as tags e chegamos a h e à lista.
Não é apenas limitado às marcas que vemos dentro do corpo.
Eu também poderia fazer algo assim.
Obter elementos por nome do nome do corpo e ele vai voltar para mim uma lista com um elemento do
corpo dentro dele.
Ou eu também poderia fazê-lo para a cabeça ou o elemento de tempo ou título ou o que quer que eu queira, mas a parte
importante é que ele retorna uma lista, mesmo se houver apenas um elemento, ele ainda retorna uma lista.
Então, para selecionar o corpo, poderíamos fazer algo como o documento ECO do corpo de var que
obtém elementos pelo nome do nome e, em seguida, basta pegar o primeiro item porque há apenas um item nessa lista.
E se olharmos para o corpo, conseguimos esse objeto gigante que o corpo inteiro.
ESTÁ BEM.
Então, é Obter elementos pelo nome da etiqueta.
Apenas para reiterar que você lhe dá um nome como Ally.
Vai e encontra todos os elementos que o combinam e retorna todos para você em uma lista.
Mesmo se houver apenas um.
Então, aqui, eu tenho outro exemplo fazendo isso com um H-1.
Você pode ver que seleciona as duas H uma vez.
Ok então agora mudamos as mudanças um pouco.
Já não temos um elemento de obtenção ou obtem elementos por alguma sintaxe.
Isso é chamado de seer e o seletor de consulta é um método mais recente que não existe por
tanto tempo.
Isso realmente torna nossas vidas muito mais fáceis.
Então nós realmente podemos usá-lo para fazer tudo o que vimos com obter elemento por id obter elementos por
nome de classe obter elementos com nome de tag, podemos replicar tudo isso com o seletor de consultas.
Então, o que faz é que é necessário um seletor de estilo CSSA.
Portanto, um seletor de estilo CSSA significa apenas qualquer um dos seletores que usamos em vez de um documento CSSA.
tenho que fazer é usar a sintaxe CSSA com o símbolo de hash ou Octa Thorpe e depois destaque.
Então, neste exemplo, eu estou selecionando algo com base no destaque ID, então eu não posso simplesmente escrever a palavra destaque como eu
fiz com obter elemento por ID, mas eu
Então, é assim que você seleciona algo com o seletor de consulta.
Se você quer um ID como você faria com o C Ss e obteremos esse primeiro aliado com ID igual a destacar.
Antes de ir ao console e digitar isso, eu vou mostrar que podemos fazer o mesmo
com um nome de classe, a tag var é igual a que o ponto de seletor quebrado é dobrado, o que é como selecionar
a classe em negrito usando C Ss.
E o que é importante é que na verdade só nos dá a primeira partida.
Então, embora existam dois elementos que tenham negrito como classe, isso só nos dá o primeiro e esse é
o ponto de seletor.
Ele sempre retorna um elemento. Existe outro método que veremos em breve, que retornará todos os
elementos que combinam.
Portanto, um seletor de consulta também pode ter um nome de tag como o temos aqui.
H-1 e retorna o primeiro H-1.
Então, podemos tomar seletores CSSA que escrevemos o tempo todo e ver SS e podemos usar essa sintaxe para
selecionar elementos com seletor de consultas.
Então vou demonstrar isso aqui.
Deixe-me limpar isso e vamos selecionar isso primeiro.
H-1.
Então, tudo o que eu preciso fazer.
Var H-1 é igual ao seletor de consulta
de documento H-1.
E se olharmos para o que H1 é novamente, é uma boa representação de seqüência de caracteres, mas é realmente
um objeto que representa esse elemento inteiro.
Então, em seguida, vamos tentar selecionar com base em uma ID.
Então, eu apenas vou copiar esta linha em vez de H-1.
Este será um aliado e, ao invés de selecionar o primeiro, o H-1 selecionará o primeiro item
que possui o destaque ID.
E é claro que há apenas um item porque é uma identificação, é claro, é apenas um item que tem essa
idéia em uma página e precisamos disso.
Octa Thorgeir.
Caso contrário, vai procurar um nome de etiqueta chamado destaque que não existe e H. J. ele fora.
E se eu forçar Enter e olhar para Alhaj, eu obtenho esse primeiro aliado com o item da lista, um ID é igual a destaque.
Por último, vamos fazer o mesmo com uma classe.
Então eu uso o ponto CSSA Leichter dobrado, que é como selecionamos uma classe e, se olharmos para Ally, recebo o segundo
aliado com a classe de itens iguais com o item 2 da lista com marcadores.
Então, existem outras coisas que podemos selecionar.
Não se baseia apenas em um nome de etiqueta ou em uma ID ou em uma classe.
Esses são os mais comuns, mas podemos fazer outras coisas assim, o que não funcionará na minha
página, mas eu poderia selecionar todas as tags de âncora dentro de um aliado com uma classe especial.
E este é um seletor C Ss mais longo, mas é válido nos EUA.
Então, todas as tags de âncora têm classe especial que são aninhadas dentro de um aliado e isso é totalmente válido.
Novamente, eu não tenho isso configurado na minha página.
Então, se eu pressionar Enter, só vou me dar.
Não porque não encontrou nenhuma correspondência.
Então, como eu mencionei, o seletor Querrey retorna a primeira partida e é isso.
Às vezes, é útil, por exemplo, se você quisesse selecionar o corpo.
do seletor de consultas e isso lhe dá o corpo ao contrário do que eu fiz documento diked obter elementos pelo nome do nome do corpo.
Tudo o que tenho a fazer é dizer o corpo
Eles me deram uma lista e então eles tiveram que pedir o primeiro elemento.
Se eu usar um seletor de consultas, só vou pegar o corpo imediatamente.
Mas a alternativa é um seerero diferente.
Então, funciona exatamente da mesma maneira.
É preciso um C um seletor definido, mas ele retorna todos os elementos correspondentes.
Então, neste caso, estou usando o documento que consulta o seletor todos os H-1 retornam ambos h uma vez ou, neste caso, estou usando
a classe em negrito.
Então estilo CSSA.
Eu preciso de um ponto em negrito e isso me dá dois elementos com a classe em negrito em negrito.
Então vamos demonstrar isso no con. Vamos selecionar todos os aliados até agora.
Allies é igual ao documento que consulta o seletor.
Todos aliados.
E isso me dará todos eles.
Eu olho para os aliados.
Você pode ver que tem três aliados.
Uma última vez eu sei que sou um disco quebrado.
Estes são objetos.
Eles não são HMO.
Eles são objetos javascript que são construídos a partir do HMO.
E se eu fizer o mesmo, mas eu faço isso, em vez disso, com o seletor de consulta e presto Enter.
Se eu olhar para os aliados não é uma lista, é apenas uma.
Então, mesmo se eu fizesse por uma aula.
Então, vamos fazer isso para a aula em negrito.
Vamos chamá-lo em negrito e você documentou esse ponto de seleção de consulta em negrito.
E eu vejo que é apenas o item da primeira lista de itens também.
E se eu fizer consulta no seletor, eu então recebo
uma lista com os dois.
Um ponto de confusão freqüentemente para meus alunos é que
você ainda pode usar o seletor de consultas, mesmo que apenas um elemento que você está procurando.
Então, você poderia fazer algo como var ally igual a seletor de consulta de documento de ponto.
Toda uma identificação como destaque e eu olho para Ally e é uma lista com um item.
É muito raro que você faria isso, mas ainda funcionará se houver apenas uma partida.
Tudo bem, então cobrimos muito terreno neste vídeo.
Então vamos voltar ao começo e fazer uma conclusão muito rápida.
Começamos por falar sobre como todos esses métodos estão dentro do
objeto do documento que podemos selecionar por ID com get elemento por ID, podemos selecionar por nome
de classe com obter elementos por nome de classe e retorna uma lista que na verdade não é um matriz.
É chamada de uma lista de nós.
seletor de consulta que é um jack de todos os negócios.
Podemos fazer o mesmo, mas usando elementos GET por nome de etiqueta que também retornará uma lista de nós com base em um tipo de elemento que selecionamos, então temos um
Retorna o primeiro elemento que corresponde a um determinado seletor CSSA.
Então, podemos usá-lo para fazer tudo o que obtém o elemento pelo nome da classe id e
pelo nome da etiqueta, podemos dar-lhe uma ID, como nós fazemos aqui em uma classe, como nós fazemos aqui ou um nome de elemento.
E, em seguida, há um seletor de consulta que funciona da mesma maneira,
exceto que ele retorna uma lista que não é uma matriz.
Também é um nó estourando com todos os elementos que combinam com um determinado seletor.
Tudo bem.
Então, depois, vou fazer você fazer um exercício muito rápido