Jump to content
coxosclassic

Aceder a elementos por id

Recommended Posts

coxosclassic

Olá a todos,

Surgiu-me uma situação que me deixou com algumas dúvidas.

Ex:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<div id="elem"></div>
	<script>
		console.log(elem); //<div id="elem"></div>
	</script>
</body>
</html>

Apesar de a variável "elem" não ter sido declarada consigo aceder ao elemento com o mesmo id.

O resultado na consola não deveria dar erro? Sempre pensei que para aceder a um elemento por id, precisava de:

const elem = document.getElementById("elem");
console.log(elem) //<div id="elem"></div>

As coisas sempre foram assim?

Não encontro nenhuma documentação que mencione isto, pois parece que os ids de elementos HTML são variáveis globais em JS automaticamente declaradas/iniciadas(?).

Assim sendo, qual a vantagem de usarmos document.getElementById para aceder a um elemento HTML?

Alguém me consegue dar umas luzes sobre isto?

 

Cumps, cc

Edited by coxosclassic

Cumps,

cc

Share this post


Link to post
Share on other sites
pwseo

@coxosclassic

Esse comportamento é «normal», está definido no standard (embora isto seja algo controverso, e tenha surgido com o IE). Posto isto, imagina que num local qualquer do código eu escrevo alvo como elem = 'foobar'. A partir de agora, se quiseres aceder ao elemento DOM com id #elem, precisas mesmo de utilizar getElementById, caso contrário irás obter apenas 'foobar'; ficas muito susceptível a fenómenos de shadowing se utilizares directamente as variáveis globais (aliás... propriedades do objecto window). Mesmo em termos de legibilidade, a utilização das funções de manipulação do DOM é mais clara, pois deixa explícito que uma determinada variável é um elemento do DOM e não apenas uma variável global qualquer.

  • Vote 1

Share this post


Link to post
Share on other sites
coxosclassic

Obrigado @pwseo !

Podes-me dar um link para a definição desse standard? Ando perdido no w3.org mas nem aí consigo encontrar info sobre isto.

A grande vantagem que encontro aqui é a quantidade de código que se poupa (principalmente na manipulação de layout), o que me poderá ser muito útil nas aplicações web que vou fazendo. Para a legibilidade tento sempre usar uma nomenclatura adequada, pois JS sempre foi um problema para mim nesse aspeto.

Este comportamento é exclusivo a getElementById ou existe algo do género para outras manipulações (getElementsByClassName por ex.)?

cumps.

 


Cumps,

cc

Share this post


Link to post
Share on other sites
pwseo

Podes ver aqui: https://html.spec.whatwg.org/#dom-window-nameditem

De qualquer modo, mesmo que te pareça que poupe na quantidade de código, é uma abordagem que não recomendo (pelos motivos que já expus). Penso que não existe nada de análogo para a getElementsByClassName. Para tudo isto podes sempre utilizar a querySelectorAll (e até mesmo fazer alias dela para um nome de escrita mais fácil).

  • Vote 1

Share this post


Link to post
Share on other sites
coxosclassic

 Muito Obrigado! Irei ler o link com atenção.

Percebo e entendo que este tipo de abordagem não seja recomendável nem pretendo aplica-la na prática. Apenas quero aprofundar o assunto pois não fazia ideia que tal seria possível. Ou se calhar preciso ler a DOM spec. mais a fundo :)

O que acho interessante é a "redundância" de uma função amplamente utilizada. É apenas por uma questão de legibilidade?

Porque acho que a utilização possa ter algum sentido em páginas estáticas(?), ou mesmo em questões de performance(?)

 

 


Cumps,

cc

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.