As propriedades de navegação DOM são ótimas quando os elementos estão próximos uns dos outros. E se eles não forem? Como obter um elemento arbitrário da página?
Existem métodos de pesquisa adicionais para isso.
document.getElementById ou apenas id
Se um elemento tiver o id atributo, podemos obter o elemento usando o método document.getElementById(id), não importa onde esteja.
Por exemplo :
Além disso, há uma variável global nomeada por id que faz referência ao elemento:
… A menos que declaremos uma variável JavaScript com o mesmo nome, então ele tem precedência:
Este comportamento é descrito em a especificação, então é uma espécie de padrão. Mas é suportado principalmente para compatibilidade.
O navegador tenta nos ajudar misturando namespaces de JS e DOM. Isso é bom para scripts simples, embutidos em HTML, mas geralmente não é uma coisa boa. Pode haver conflitos de nomenclatura. Além disso, quando alguém lê o código JS e não tem HTML em vista, não é óbvio de onde vem a variável.
Aqui no tutorial, usamos id para fazer referência direta a um elemento por questões de brevidade, quando for óbvio de onde o elemento vem.
Na vida real, document.getElementById é o método preferido.
id deve ser exclusivo O id deve ser único. Só pode haver um elemento no documento com o id fornecido.
Se houver vários elementos com o mesmo id, então o comportamento dos métodos que o usam é imprevisível, por exemplo document.getElementById pode retornar qualquer um desses elementos aleatoriamente. Portanto, siga a regra e mantenha id exclusivo.
document.getElementById, não anyElem.getElementById O método getElementById pode ser chamado apenas em document. Ele procura o id fornecido em todo o documento.
querySelectorAll
De longe, a maioria método versátil, elem.querySelectorAll(css) retorna todos os elementos dentro de elem correspondentes ao seletor CSS fornecido.
Aqui, procuramos todos os <li> elementos que são os últimos filhos:
Este método é realmente poderoso, porque qualquer seletor CSS pode ser usado.
Pseudo-classes no seletor CSS como :hover e :active também são suportado. Por exemplo, document.querySelectorAll(":hover") retornará a coleção com os elementos sobre os quais o ponteiro está agora (em ordem de aninhamento: do <html> mais externo para o máximo aninhado).
querySelector
A chamada para elem.querySelector(css) retorna o primeiro elemento para o CSS fornecido seletor.
Em outras palavras, o resultado é o mesmo que elem.querySelectorAll(css), mas o último está procurando por todos os elementos e escolhendo um, enquanto elem.querySelector apenas procura um. Portanto, é mais rápido e mais curto de escrever.
corresponde
Os métodos anteriores estavam pesquisando o DOM.
O elem.matches (css) não procura por nada , ele apenas verifica se elem corresponde ao seletor CSS fornecido. Ele retorna true ou false.
O método é útil quando estamos iterando sobre elementos (como em um array ou algo assim) e tentando filtrar aqueles que nos interessam.
Por exemplo:
mais próximo
Ancestrais de um elemento são: pai, pai de pai, seu pai e assim por diante. Os ancestrais juntos formam a cadeia de pais do elemento ao topo.
O método elem.closest(css) procura o ancestral mais próximo que corresponda ao seletor CSS. O próprio elem também está incluído na pesquisa.
Em outras palavras, o método closest sobe do elemento e verifica cada um dos pais. Se corresponder ao seletor, a pesquisa para e o ancestral é retornado.
Por exemplo:
getElementsBy *
Existem também outros métodos para procurar para nós por uma tag, classe, etc.
Hoje, eles são principalmente históricos, já que querySelector é mais poderoso e mais curto de escrever.
Então, aqui nós os cobrimos principalmente para integridade, embora você ainda possa encontrá-los nos scripts antigos.
-
elem.getElementsByTagName(tag)procura por elementos com o dado tag e retorna a coleção deles. O parâmetrotagtambém pode ser uma estrela"*"para “quaisquer tags”. -
elem.getElementsByClassName(className)retorna elementos que têm a classe CSS fornecida. -
document.getElementsByName(name)retorna elementos com o atributonamefornecido, em todo o documento. Muito raramente usado.
Por exemplo:
Vamos encontrar todas as input tags dentro da tabela:
"s" carta! Os desenvolvedores novatos às vezes esquecem a letra "s". Ou seja, eles tentam chamar getElementByTagName em vez de getElementsByTagName.
O "s" a letra está ausente em getElementById, porque retorna um único elemento. Mas getElementsByTagName retorna uma coleção de elementos, então há "s" dentro.
Outro erro comum dos novatos é escrever:
Devemos iterar sobre a coleção ou obter um elemento por seu índice e, em seguida, atribuir, como este:
Procurando por elementos .article:
Coleções ativas
Todos os métodos "getElementsBy*" retornam uma coleção ativa. Essas coleções sempre refletem o estado atual do documento e “atualizam automaticamente” quando ele muda.
No exemplo abaixo, há dois scripts.
- O primeiro cria uma referência à coleção de
<div>. A partir de agora, seu comprimento é1. - Os segundos scripts é executado depois que o navegador encontra mais um
<div>, então seu comprimento é2.
Em contraste , querySelectorAll retorna uma coleção estática. É como uma matriz fixa de elementos.
Se usarmos em vez disso, os dois scripts geram 1:
Agora podemos ver facilmente a diferença. A coleção estática não aumentou após o aparecimento de um novo div no documento.
Resumo
Existem 6 métodos principais para pesquisar nós no DOM:
| Método | Pesquisas por … | Can cal l em um elemento? | Ao vivo? |
querySelector |
Seletor CSS | ✔ | – |
querySelectorAll |
Seletor CSS | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
tag ou "*" |
✔ | ✔ |
getElementsByClassName |
classe | ✔ | ✔ |
De longe, os mais usados são querySelector e querySelectorAll, mas getElement(s)By* pode ser esporadicamente útil ou encontrado nos scripts antigos.
Além disso:
- Existe
elem.matches(css)para verificar seelemcorresponde ao seletor CSS fornecido. - Há
elem.closest(css)para procurar o ancestral mais próximo que corresponda o seletor CSS fornecido. Oelemem si também é verificado.
E vamos mencionar mais um método aqui para verificar a relação pai-filho, pois às vezes é útil:
-
elemA.contains(elemB)retorna verdadeiro seelemBestiver dentro deelemA(um descendente deelemA) ou quandoelemA==elemB.