coxosclassic Posted September 1, 2018 at 03:07 PM Report #611713 Posted September 1, 2018 at 03:07 PM (edited) 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 September 1, 2018 at 03:30 PM by coxosclassic Cumps, cc
pwseo Posted September 2, 2018 at 08:25 AM Report #611716 Posted September 2, 2018 at 08:25 AM @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. 1 Report
coxosclassic Posted September 2, 2018 at 08:36 PM Author Report #611727 Posted September 2, 2018 at 08:36 PM 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
pwseo Posted September 2, 2018 at 09:56 PM Report #611730 Posted September 2, 2018 at 09:56 PM 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). 1 Report
coxosclassic Posted September 3, 2018 at 12:11 AM Author Report #611732 Posted September 3, 2018 at 12:11 AM 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
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now