De um tradutor: David Gilbertson é um autor conhecido que escreve sobre tecnologias da Web e de criptomoeda. Ele conseguiu reunir um grande público de leitores, que conta sobre todo tipo de truques e áreas interessantes.
Pequena introduçãoVamos discutir a diferença entre HTML e DOM.
Por exemplo, pegue o elemento de
tabela do HTML. Você pode usá-lo em um arquivo com a extensão .html. Nele, indicamos um conjunto de atributos que determinam a aparência e o "comportamento" da página.
E isso é tudo, não há nada a ver com JavaScript.
O DOM é algo que permite combinar seu código JavaScript com elementos HTML em um documento para que você possa interagir com eles como objetos.
Este é um modelo de documento em objeto.
Qualquer tipo de elemento em HTML possui sua própria interface "DOM", que define propriedades e métodos. Por exemplo, a
tabela possui uma interface chamada
HTMLTableElement .
Você pode obter um link para um elemento específico escrevendo algo como isto:
Você tem acesso a todas as propriedades e métodos disponíveis para um tipo específico de elemento. Por exemplo, você pode acessar as propriedades do valor usando searchBox.value ou defina o cursor para uma posição específica usando searchBox.focus ().
Agora vamos discutir mais uma coisa importante: a maioria dos elementos não possui métodos interessantes, por isso é fácil perder algo importante se você não se aprofundar nessa questão de propósito.
Felizmente, porém, a atenção aos detalhes e um estudo de especificações é o meu forte. Portanto, fiz todo o necessário e escrevo sobre os resultados deste artigo.
Se você quiser tentar lidar com o DOM, use as ferramentas do navegador para aprender alguns elementos. Para fazer isso, selecione um deles na árvore de elementos e digite $ 0 no console. Isso fornecerá um link para o item selecionado. Para convertê-lo em um objeto, digite dir ($ 0).
Há muitas coisas que
você pode fazer no console .
A Skillbox recomenda: Curso Online para Desenvolvedor Web
Lembramos que: para todos os leitores de Habr - um desconto de 10.000 rublos ao se inscrever em qualquer curso Skillbox usando o código promocional Habr.
No. 1. Métodos de tabela
Existem muitos métodos convenientes que permitem montar mesas como móveis na Ikea.
const tableEl = document.querySelector('table'); const headerRow = tableEl.createTHead().insertRow(); headerRow.insertCell().textContent = 'Make'; headerRow.insertCell().textContent = 'Model'; headerRow.insertCell().textContent = 'Color'; const newRow = tableEl.insertRow(); newRow.insertCell().textContent = 'Yes'; newRow.insertCell().textContent = 'No'; newRow.insertCell().textContent = 'Thank you';
Aqui você vê não apenas document.createElement (). Por exemplo, o método .insertRow () alinhará o corpo se você organizar uma chamada para esse elemento diretamente na árvore. Isso não é incrível?
No. 2. scrollIntoView ()
Você sabe que, se você tiver #algo no URL, quando a página for carregada, o navegador rolará para o elemento com esse ID?
Isso geralmente ajuda muito, mas não funciona se você renderizar esse elemento após o carregamento da página. Para aproveitar a oportunidade descrita acima, basta prescrever document.querySelector (document.location.hash) .scrollIntoView ();
Número 3. oculto
Bem, sim, é como um método, mas como existe um setter (método para definir uma propriedade), ele pode ser considerado um método.
Seja como for, você já usou myElement.style.display = 'none' para ocultar um elemento? Nesse caso, não faça isso.
Onde é melhor usar myElement.hidden = true.
Número 4. alternar ()
Podemos usar esse método para adicionar ou remover uma classe de elemento usando myElement.classList.toggle ('some-class').
E se você já adicionou uma classe usando if, pense: talvez você deva tentar outra coisa?
Por exemplo, você pode simplesmente usar o segundo parâmetro para o método de alternância. Você precisa passá-lo para o método de alternância. Se isso acontecer, sua classe será adicionada ao elemento:
el.classList.toggle('some-orange-class', theme === 'orange');
Sim, entendo o que você está pensando agora: não é isso que significa a palavra "toogle". Aqueles por trás do Internet Explorer? concorda com isso e expressa seu protesto sem usar o segundo parâmetro.
Mas vamos recuperá-lo. Liberdade de opções!
No. 5. querySelector ()
Bem, você definitivamente deveria saber disso, mas suspeito que aproximadamente 17% dos leitores não estejam cientes de como esse método pode ser usado em conjunto com elementos.
Exemplo: myElement.querySelector ('. My-class') mostrará a correspondência dos elementos que possuem a classe my-class e os "filhos" de myElement.
No. 6. mais próximo
Este método está disponível para todos os elementos que visualizam a árvore de elementos. Isso é um pouco inverso para querySelector (). Portanto, podemos usar o título da seção atual desta maneira:
myElement.closest('article').querySelector('h1');
Começamos com o
artigo e terminamos com o primeiro
h1 .
Número 7. getBoundingClientRect ()
O método retorna um objeto com informações detalhadas sobre o elemento que especificamos.
{ x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }
Mas tenha cuidado: este exemplo causa um redesenho. Dependendo do dispositivo e da complexidade da sua página, isso pode levar vários milissegundos. Portanto, lembre-se disso se você chamá-lo repetidamente, por exemplo, em uma animação.
Nem todos os navegadores retornam todos esses valores.
Número 8. correspondências ()
Gostaria de verificar se um determinado elemento pertence a uma determinada classe.
Dificuldade máxima:
if (myElement.className.indexOf('some-class') > -1) { // do something } , : if (myElement.className.includes('some-class')) { // do something }
O que você precisa:
if (myElement.matches('.some-class')) {
No. 9. insertAdjacentElement ()
Eu descobri hoje! Isso é semelhante ao appendChild (), mas oferece um pouco mais de controle no processo de adição de filho.
parentEl.insertAdjacentElement ('beforeend', newEl) faz o mesmo que parentEl.appendChild (newEl), mas você pode especificar beforebegin, afterbegin ou afterend para colocá-lo no lugar que esses nomes indicam.
Quanto controle!
No. 10. contém ()
Você já quis saber se existe um elemento dentro de outro? Eu quero saber isso o tempo todo.
Por exemplo, se eu manipular um clique do mouse e quiser entender se aconteceu dentro ou fora (para que eu possa fechá-lo), faço o seguinte:
const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; };
Aqui modal El é uma referência à janela modal e e.target é o elemento para clicar.
É engraçado, mas muitas vezes eu cometo erros de lógica quando tento usar o método pela primeira vez. E então, quando tento corrigir o erro, estou errado novamente. E esse método ajuda a lidar imediatamente com isso.
No. 11. getAttribute ()
Um dos métodos mais inúteis de elementos, mas não neste caso particular.
Você se lembra que geralmente as propriedades se referem a atributos?
Às vezes, esse não é o caso, por exemplo, quando href é um atributo de um elemento, por exemplo, a href = "/ animals / cat"> Cat </ a.
O el.href não nos fornecerá / animals / cat, como você poderia esperar. Isso ocorre porque o elemento implementa a interface HTMLHyperlinkElementUtils, que é um monte de propriedades auxiliares como protocolo e hash que apontam para o objeto de link.
Essa é uma das propriedades úteis da href que fornecerão o L completo, não a URL relativa no atributo.
Portanto, você deve usar el.getAttribute ('href') se precisar de uma string literal dentro do atributo href.
No. 12. diálogo
O elemento de
diálogo relativamente novo possui dois bons métodos e um ideal. show () e close () fazem exatamente o que é esperado deles. E isso é bom, suponho.
Mas showModal () exibirá uma
caixa de
diálogo sobre qualquer outro elemento colocado na página. Não há necessidade de z-index, nem a adição manual de um fundo escuro, nem o rastreamento do pressionamento do botão Escape. O navegador sabe como as janelas modais funcionam e fará tudo por você. E isso é ótimo.
No. 13. forEach ()
Às vezes, quando você precisa de uma referência a uma lista de elementos, pode usar forEach ().
Mas e se você precisar registrar todos os URLs para todos os links da página? Você pode fazer isso e ver o erro.
document.getElementsByTagName('a').forEach(el => { console.log(el.href); });
Ou faça o seguinte:
document.querySelectorAll('a').forEach(el => { console.log(el.href); });
O ponto é que, getElementsByTagName e outros métodos get ... retornam um HTMLCollection, mas querySelectorAll retorna um NodeList.
E a interface NodeList nos fornece o método forEach () (junto com as chaves (), valores () e entry ()).
Os mocinhos da ECMA nos deram o Array.from (), que transforma tudo que se parece com um array no próprio array.
Array.from(document.getElementsByTagName('a')).forEach(el => { console.log(el.href); });
Bônus! Ao criar uma matriz, você pode usar map () e filter (), e reduzir () ou qualquer outro método. Por exemplo, retornando uma matriz de links externos:
Array.from(document.querySelectorAll('a')) .map(el => el.origin) .filter(origin => origin !== document.origin) .filter(Boolean);
Eu realmente gosto de prescrever .filter (booleano), porque sem ele eu teria que coçar a cabeça no futuro, tentando lembrar o que é e como funciona.
No. 14. Formulários
O formulário , como você provavelmente já sabe, possui um método submit (). Um pouco menos provável que você saiba que os formulários têm um método reset () e pode relatar um valor Validity () se você usar a validação em seus elementos de formulário.
Você também pode usar a propriedade de notação de ponto dos elementos do formulário para se referir a um elemento pelo atributo name. Por exemplo, myFormEl.elements.email retornará o
nome de entrada = "email" / elemento que pertence ao
formulário ("pertence" não significa necessariamente que é seu "descendente").
E agora eu menti. O fato é que os elementos não retornam uma lista de elementos. Ele retorna uma lista de controles (e, é claro, isso não é uma matriz).
Exemplo: se você tiver três botões de opção, cada um com o mesmo nome que animal, formEl.elements.animal fornecerá um link para esse conjunto de botões de opção (1 controle, 3 elementos).
E formEl.elements.animal.value retornará o valor do botão de opção selecionado.
Essa é uma sintaxe estranha, se você pensar sobre isso. Divida isso pessoal: formEl é um elemento, os elementos são um HTMLFormControlsCollection, e não um array, em que cada elemento não é necessariamente um elemento HTML. Animal possui vários comutadores combinados apenas porque eles têm o mesmo atributo de nome (existe uma interface RadioNodeList para isso) e o valor examina o atributo de valor de qualquer comutador na coleção.
Número 15. selecione ()
O método .select () selecionará todo o texto em qualquer entrada que você chamar.
Obrigado pela leitura, espero que tudo isso seja útil para você. Sempre verifique os recursos do seu navegador para que mais tarde não seja dolorosamente doloroso.
Prático da Skillbox , que ajudará um programador iniciante a se tornar um especialista procurado: