Respostas interessantes marcadas com a tag

79 votos
Aceito

Qual a diferença entre $(document).ready() e window.onload?

O evento ready é disparado depois que o documento HTML foi carregado. O onload só é disparado quando todo o conteúdo é carregado (incluindo imagens, vídeos, etc). Repare que o ready é específico do ...
  • 69,2mil
69 votos
Aceito

Porque usar getElementById se o id está no window?

O facto de elementos nomeados* fazerem parte das propriedades de document e/ou window é uma infelicidade, fruto de aplicações bem simples que havia há muitos anos, no inicio do DOM e JavaScript. ...
  • 135mil
36 votos
Aceito

Criar elemento no HTML com JavaScript (appendChild vs innerHTML)

appendChild vs innerHTML O appendChild não causa uma reconstrução completa do DOM ou mesmo todos os elementos / nós dentro do alvo. O innerHTML causar uma reconstrução completa do conteúdo do ...
29 votos

Porque usar getElementById se o id está no window?

Antes de existirem padrões para o HTML, CSS e javascript quem definia isto eram os browsers, ou seja cada browser tinha a sua maneira de fazer as coisas, como por exemplo cada um tinha uma maneira de ...
29 votos
Aceito

O que é shadow DOM?

Shadow DOM O shadow DOM, ou shadow tree, é uma árvore de nós HTML assim como qualquer outra árvore que já conhecemos (a light tree), mas que é anexada a um elemento específico da light tree, não ao ...
  • 75,9mil
26 votos

Por que é considerado errado/ruim repetir uma ID em HTML?

Porque a finalidade do id é a de ser um identificador único para o elemento HTML onde ele é aplicado. Se ele não for único, isso vai contra a ideia para a qual ele foi concebido, e não faz sentido ...
18 votos
Aceito

Como verificar undefined de maneira correta no Javascript

O mais correto é utilizar typeof variavel === "undefined", pois undefined pode ser sobrescrito utilizando window.undefined, fazendo com que a comparação variavel === undefined retorne valores ...
17 votos
Aceito

Exibir muitos elementos no DOM pode prejudicar a performance?

Ter muitos elementos no DOM poderia prejudicar a performance? Sim, e vamos analisar dois aspectos: memória - quanto mais elementos o DOM tiver, obviamente mais memória irá consumir, abaixo coloquei ...
  • 22,6mil
16 votos
Aceito

O que é parse, e como funciona o parse do DOM no HTML5?

Parsing O parser é um analisador sintático. Sua função é ler uma entrada de dados que possuem certas regras específicas - em geral é um texto reconhecível por humanos - e montar uma estrutura de como ...
  • 475mil
16 votos

Por que é considerado errado/ruim repetir uma ID em HTML?

É errado porque está na especificação do HTML que o ID deve ser único. (Inclusive, se você olhar no documento linkado, que é a especificação oficial do HTML 5, é usada a palavra em inglês "must" - que ...
  • 31,4mil
15 votos

Por que é considerado errado/ruim repetir uma ID em HTML?

Ao meu ver atrapalha também no HTML, caso vc use ancoras internas na página normalmente se usa href="#link" e no elemento que sera ancorado o id="link". Se vc usar o id="link" em vários elementos a ...
  • 66,6mil
14 votos

Qual a diferença entre $(document).ready() e window.onload?

O evento ready ocorre depois que o documento HTML foi carregado, enquanto o evento onload ocorre mais tarde, quando todo o conteúdo (por exemplo, imagens) também foi carregado. O evento onload é um ...
  • 4.578
13 votos

Como verificar undefined de maneira correta no Javascript

As duas verificações que você mencionou servem para coisas diferentes. 1. Variáveis não declaradas Se uma variável não foi declarada, com var variável = ..., você não pode usá-la em comparações de ...
  • 65,9mil
11 votos
Aceito

document.getElementById('ID').func(....) vs ID.func(...)

Basicamente é um problema de visibilidade. O que acontece se o seu id for uma propriedade do objeto window? Não sei se sabe, todas propriedades que você acessa globalmente ou estão em window. O ...
  • 475mil
9 votos

Como verificar undefined de maneira correta no Javascript

Depende do que você quer testar: Se existe ou não uma variável com esse nome Nesse caso, eu tentaria fazer uma operação com ela e observaria um ReferenceError: var x; try { x + 1; ...
  • 82,3mil
9 votos

$ e $$ agora são funções nativas dos navegadores?

Isso são métodos somente da consola, atalhos para facilitar o programador. Isso confirma-se na documentação do Chrome aqui e na documentação do Edge aqui onde diz: $() é um atalho para document....
  • 135mil
8 votos

Criar elemento no HTML com JavaScript (appendChild vs innerHTML)

Eu costumo gerar sempre via string. Monto sempre identado para que eu tenha, assim que bater o olho, a visão do que aquelo código representa. Exemplo: var htmlTabela = "<table> ...
  • 12mil
8 votos

A ordem dos estilos CSS influenciam a árvore de renderização?

Eu já havia me feito essa pergunta antes :) Nessa pergunta similar do SO, as respostas dizem que não: Are there speed benefits of putting CSS attributes in alphabetical order? Embora não tenha ...
  • 22,6mil
8 votos
Aceito

Qual a diferença entre usar o appendChild e o insertAdjacentHTML?

appendChild insere um elemento html ao DOM, no final da lista de filhos, por isso precisa criar um elemento: let aBlock = document.createElement('block').appendChild( document.createElement('b') ); ...
  • 22,6mil
7 votos

Criar elemento no HTML com JavaScript (appendChild vs innerHTML)

Bom dia, bom, imagine a situação que você tem uma tabela que possui temas diferentes de acordo com o horário, de dia a tabela é clarinha e de noite a tabela é mais escura, você terá classes para esta ...
7 votos

A ordem dos estilos CSS influenciam a árvore de renderização?

Interessante tópico, sempre acreditei que a ordem não influenciaria porém ajudaria numa leitura de código. No Tableless, tem um artigo um pouco antigo não fala de performance mas sugere algumas boas ...
7 votos
Aceito

Como varrer um array e inserir os elementos no HTML com JS

Existem outras diferentes formas de se criar elementos DOM, aproximando ao teu exemplo pode criar da seguinte forma: function gerar(){ let nomes = ["Diego", "Gabriel", "Lucas"]; let ...
6 votos
Aceito

Adicionar propriedades ao elemento [Node]

É algo que geralmente se recomenda evitar. Principal motivo: você pode acabar causando uma colisão de nome com uma propriedade que venha a ser futuramente implementada no DOM. Então, mesmo que hoje o ...
  • 65,9mil
6 votos

Como funciona o processo de renderização das página web pelo browser?

Não existe algo especifico, isso não ocorre no front-end de fato, ou é dependente de javascript ou algo assim, a questão é que internamente um navegador tem um "motor" (mais de um) baseado em "...
6 votos
Aceito

A ordem dos estilos CSS influenciam a árvore de renderização?

De acordo com o artigo Quantum Up Close: What is a browser engine?, o mecanismo do navegador lê toda a folha de estilo CSS para então, finalmente, usar a style engine e pegar o CSS para aplicar ao DOM ...
6 votos
Aceito

Ao tentar criar um objeto usando `this` o console diz que a propriedade é undefined

Parte de seus problemas e o entendimento de algumas coisas em seu código, o primeiro que eu vejo é o seu entendimento do this. O this é o objeto de contexto de execução, sua utilização é um pouco ...
6 votos
Aceito

Qual a diferença entre innerHTML e appendChild no JS?

appendChild(), um método, adiciona um novo elemento ao DOM, portanto é uma ação sendo executada com a clara intenção de expandir o DOM criando um filho para um elemento já existente, não importa o que ...
  • 475mil
5 votos

Alterando texto em vários lugares diferentes da página HTML

acredito que a melhor maneira de se fazer isto, é fazendo uso de propriedades data-custom e um json com os valores. i18n = {}; i18n["pt"] = { "name": "Nome", "contact": "Contato" }; ...
  • 23,1mil
5 votos
Aceito

Velocidade de renderização de id agrupados vs class

Ferramenta O Google Chrome tinha um CSS profiler, mas este foi removido porque considera-se que o desempenho do CSS hoje é razoavelmente bom para os casos que eram lentos há alguns anos, então ...
  • 74mil
5 votos

Como posso exibir como string qualquer objeto JavaScript?

Acho que podes fazer isso assim: function stringify(algo) { function checktype(obj) { if (!obj || typeof obj == 'number' || typeof obj == 'string') return obj; if (typeof obj == '...
  • 135mil

Only top scored, non community-wiki answers of a minimum length are eligible