One place for hosting & domains

      Изменение атрибутов, классов и стилей в DOM


      Введение

      В предыдущем руководстве данной серии, «Внесение изменений в DOM», мы рассказали о том, как создать, вставить и удалить элементы в объектной модели документов (DOM) с помощью встроенных методов. Благодаря повышению вашего уровня владения манипуляциями с DOM, вы сможете более эффективно использовать интерактивные возможности JavaScript и изменять веб-элементы.

      В этом руководстве мы узнаем, как вносить дальнейшие изменения в DOM, меняя стили, классы и другие атрибуты узлов HTML-элементов. Это позволит вам получить более полное представление о том, как манипулировать основными элементами в DOM.

      Описание выбора элементов

      До недавнего времени популярная JavaScript-библиотека jQuery чаще всего использовалась для выбора и изменения элементов в DOM. jQuery упрощал процесс выбора одного или нескольких элементов и внесения изменений для всех этих элементов одновременно. В статье «Доступ к элементам в DOM» мы описали методы DOM для захвата и работы с узлами в ванильном JavaScript.

      Напоминаем, что document.querySelector() и document.getElementById() — это методы, которые используются для доступа к отдельному элементу. Используя div с атрибутом id в примере ниже, мы так или иначе можем получить доступ к этому элементу.

      <div id="demo-id">Demo ID</div>
      

      Метод querySelector()​​​ обладает большей надежностью, поскольку с его помощью можно выбрать элемент на странице по любому типу селектора.

      // Both methods will return a single element
      const demoId = document.querySelector('#demo-id');
      

      Получая доступ к отдельному элементу, мы легко можем обновить часть элемента, например, текст внутри него.

      // Change the text of one element
      demoId.textContent = 'Demo ID text updated.';
      

      Однако при получении доступа к нескольким элементам с общим селектором, например, к какому-то конкретному классу, мы вынуждены проходить по всем элементам в списке. В коде ниже мы имеем два элемента div с общим значением класса.

      <div class="demo-class">Demo Class 1</div>
      <div class="demo-class">Demo Class 2</div>
      

      Мы будем использовать querySelectorAll() для захвата всех элементов с примененным атрибутом demo-class и forEach() для прохождения по ним и внесения изменений. Также возможно доступ к определенному элементу с помощью querySelectorAll() таким же образом, как и к массиву, т.е. с помощью квадратных скобок.

      // Get a NodeList of all .demo elements
      const demoClasses = document.querySelectorAll('.demo-class');
      
      // Change the text of multiple elements with a loop
      demoClasses.forEach(element => {
        element.textContent = 'All demo classes updated.';
      });
      
      // Access the first element in the NodeList
      demoClasses[0];
      

      Это одно из самых важных отличий, о которых необходимо помнить при переходе с jQuery на ванильный JavaScript. Многие примеры изменения элементов не будут объяснять процесс применения этих методов и свойств для нескольких элементов.

      Свойства и методы в этой статье часто будут сопровождать слушателей событий для ответа на клики, наведения или прочие триггеры.

      Примечание. Методы getElementsByClassName() и getElementsByTagName() будут возвращать коллекции HTML, которые не имеют доступа к методу forEach(), в отличие от querySelectorAll(). В этих случаях вам нужно будет использовать стандартный цикл for для прохождения по коллекции.

      Изменение атрибутов

      Атрибуты — это значения, которые содержат дополнительную информацию об элементах HTML. Обычно они идут в паре название/значение и могут быть обязательными в зависимости от элемента.

      Среди самых распространенных атрибутов HTML необходимо отметить атрибут src тега img, href для тега a, class, id и style. Полный список атрибутов HTML см. в списке атрибутов в Mozilla Developer Network. Пользовательские элементы, которые не являются частью стандарта HTML, будут сопровождаться префиксом data-.

      В JavaScript есть четыре метода для изменения атрибутов элементов:

      Метод Описание Пример
      hasAttribute() Возвращает true или false element.hasAttribute('href');
      getAttribute() Возвращает значение определенного атрибута или null element.getAttribute('href');
      setAttribute() Добавляет или обновляет заданный атрибут element.setAttribute('href', 'index.html');
      removeAttribute() Удаляет атрибут элемента element.removeAttribute('href');

      Давайте создадим новый файл HTML с тегом img с одним атрибутом. Мы привяжем открытое изображение через URL, но вы можете использовать другое локальное изображение, если вы работаете оффлайн.

      attributes.html

      <!DOCTYPE html>
      <html lang="en">
      <body>
      
          <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">
      
      </body>
      
      </html>
      

      При загрузке указанного выше файла HTML в современном веб-браузере и открытии консоли разработчика, вы должны получить примерно следующий вывод:

      Первый рендеринг classes.html

      Теперь мы можем протестировать все методы атрибутов на ходу.

      // Assign image element
      const img = document.querySelector('img');
      
      img.hasAttribute('src');                // returns true
      img.getAttribute('src');                // returns "...shark.png"
      img.removeAttribute('src');             // remove the src attribute and value
      

      К этому моменту вы удалите атрибут src и значение, связанное с тегом img, но вы можете сбросить этот атрибут и присвоить значение другому изображению с помощью img.setAttribute():

      img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
      

      Второй рендеринг classes.html

      Наконец, мы можем изменить атрибут напрямую, присвоив новое значение атрибуту в качестве свойства элемента, установив src обратно для файла shark.png.

      img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';
      

      Любой атрибут можно изменить таким образом, а также с помощью описанных выше методов.

      Методы hasAttribute() и getAttribute() обычно используются с условными операторами, а методы setAttribute() и removeAttribute() используются для прямого изменения DOM.

      Изменение классов

      Атрибут class соответствует селекторам класса CSS. Не путайте с классами ES6, особым типом функции JavaScript.

      Классы CSS используются для применения стилей для нескольких элементов, в отличие от идентификаторов, которые могут существовать только один раз на странице. В JavaScript есть свойства className и classList для работы с атрибутом класса.

      Метод/Свойство Описание Пример
      className Получает или устанавливает значение класса element.className;
      classList.add() Добавляет одно или несколько значений класса element.classList.add('active');
      classList.toggle() Включает или отключает класс element.classList.toggle('active');
      classList.contains() Проверяет, существует ли значение класса element.classList.contains('active');
      classList.replace() Заменяет существующее значение класса на новое значение класса element.classList.replace('old', 'new');
      classList.remove() Удаляет значение класса element.classList.remove('active');

      Мы создадим другой файл HTML для работы с методами класса, с двумя элементами и несколькими классами.

      classes.html

      <!DOCTYPE html>
      <html lang="en">
      
      <style>
          body {
              max-width: 600px;
              margin: 0 auto;
              font-family: sans-serif;
          }
          .active {
              border: 2px solid blue;
          }
      
          .warning {
              border: 2px solid red;
          }
      
          .hidden {
              display: none;
          }
      
          div {
              border: 2px dashed lightgray;
              padding: 15px;
              margin: 5px;
          }
      </style>
      
      <body>
      
          <div>Div 1</div>
          <div class="active">Div 2</div>
      
      </body>
      
      </html>
      

      При открытии файла classes.html в браузере вы должны получить примерно следующий результат:

      Первый рендеринг classes.html

      Свойство className было введено для предотвращения конфликтов с ключевым словом class в JavaScript и другими языками, которые имеют доступ к DOM. Вы можете использовать className для присвоения значения напрямую в классе.

      // Select the first div
      const div = document.querySelector('div');
      
      // Assign the warning class to the first div
      div.className = 'warning';
      

      Мы присвоили класс warning, определенный в значениях CSS в classes.html, для первого div. Вывод должен выглядеть следующим образом:

      Второй рендеринг classes.html

      Обратите внимание, что если любые классы уже существуют в элементе, это действие будет перезаписывать их. Вы можете добавить несколько классов с разделителями-пробелами с помощью свойства className или используйте его без операторов присвоения для получения значения класса в элементе.

      Другой способ изменения классов — это свойство classList, которое имеет несколько полезных методов. Эти методы аналогичны методами addClass, removeClass и toggleClass в jQuery.

      // Select the second div by class name
      const activeDiv = document.querySelector('.active');
      
      activeDiv.classList.add('hidden');                // Add the hidden class
      activeDiv.classList.remove('hidden');             // Remove the hidden class
      activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
      activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class
      

      После использования описанных выше методов ваша веб-страница будет выглядеть следующим образом:

      Первый рендеринг classes.html

      В отличие от примера с className, использование classList.add() будет добавлять новый класс в список существующих классов. Также вы можете добавить несколько в виде разделенной запятыми строки. Также вы можете использовать setAttribute для изменения класса элемента.

      Изменение стилей

      Свойство style отражает вложенные стили элемента HTML. Часто стили будут применяться к элементам через таблицу стилей, как мы делали ранее в этой статье, но иногда нам будет нужно добавить или изменить вложенный стиль напрямую.

      Мы создадим небольшой пример для демонстрации редактирования стилей с помощью JavaScript. Ниже представлен новый файл HTML с блоком div, который имеет вложенные стили, применяемые для отображения квадрата.

      styles.html

      <!DOCTYPE html>
      <html lang="en">
      
      <body>
      
          <div style="height: 100px;
                      width: 100px;
                      border: 2px solid black;">Div</div>
      
      </body>
      
      </html>
      

      После открытия в браузере, styles.html будет выглядеть примерно следующим образом:

      Первый рендеринг styles.html

      Один из вариантов редактирования стилей подразумевает использование setAttribute().

      // Select div
      const div = document.querySelector('div');
      
      // Apply style to div
      div.setAttribute('style', 'text-align: center');
      

      Однако при этом будут удалены все существующие вложенные стили для элемента. Поскольку это вряд ли является желаемым результатом, рекомендуется использовать напрямую атрибут style

      div.style.height = '100px';
      div.style.width = '100px';
      div.style.border = '2px solid black';
      

      Свойства CSS записаны в кебаб-регистре, т.е. в нижнем регистре, разделенные тире. Важно отметить, что свойства CSS в кебаб-регистре не могут использоваться для свойства стиля JavaScript. Вместо этого они будут заменены на их эквивалент в верблюжьем регистре, когда первое слово имеет нижний регистр, а все последующие слова начинаются с заглавной буквы. Иными словами, вместо text-align мы будем использовать textAlign для свойства стиля JavaScript.

      // Make div into a circle and vertically center the text
      div.style.borderRadius = '50%';
      div.style.display = 'flex';
      div.style.justifyContent = 'center';
      div.style.alignItems = 'center';
      

      После внесения описанных выше изменений стиля итоговый рендеринг styles.html будет представлять собой круг:

      Итоговый рендеринг styles.html

      Если для элемента применяется много стилистических изменений, лучше всего будет применять стили для класса и добавить новый класс. Однако в некоторых случаях необходимо использовать изменение атрибута вложенного стиля или более простой формат.

      Заключение

      HTML-элементы часто содержат дополнительную информацию в форме атрибутов. Активы могут состоять из пар название/значение, а самыми распространенными атрибутами являются атрибуты class и style.

      В этом руководстве мы узнали, как получить доступ, изменять и удалять атрибуты для элемента HTML в DOM с помощью простого JavaScript. Также мы научились добавлять, удалять, переключать и заменять классы CSS для элемента и редактировать вложенные стили CSS. Для получения дополнительной информации ознакомьтесь с документацией по атрибутам в Mozilla Developer Network.



      Source link

      How To Modify Attributes, Classes, and Styles in the DOM


      Introdução

      No tutorial anterior nesta série, “Como fazer alterações no DOM,” falamos sobre como criar, inserir, substituir e remover elementos do Modelo de Objeto de Documentos (DOM) com métodos integrados. Ao ampliar sua capacidade de gerenciar o DOM, você se tornará mais capacitado para utilizar as funcionalidades interativas do JavaScript e modificar elementos Web.

      Neste tutorial, vamos aprender como fazer mais alterações no DOM, modificando estilos, classes e outros atributos de nós do elemento HTML. Isso dará a você uma maior compreensão sobre como manipular elementos essenciais no DOM.

      Revisão de seleção de elementos

      Até recentemente, a biblioteca de JavaScript chamada jQuery era a mais usada para selecionar e modificar elementos no DOM. O jQuery simplificou o processo de selecionar um ou mais elementos e de aplicar alterações a todos eles ao mesmo tempo. Em “Como acessar os elementos no DOM,” analisamos os métodos DOM para apreender e trabalhar com nós no vanilla JavaScript.

      Para revisão, o document.querySelector() e o document.getElementById() são os métodos usados para acessar um único elemento. Ao usar um div com um atributo id no exemplo abaixo, poderemos acessar aquele elemento de qualquer maneira.

      <div id="demo-id">Demo ID</div>
      

      O método do querySelector() é mais robusto no ponto de que ele pode selecionar um elemento na página por qualquer tipo de seletor.

      // Both methods will return a single element
      const demoId = document.querySelector('#demo-id');
      

      Ao acessar um único elemento, podemos atualizar facilmente uma parte do elemento como o texto dentro dele.

      // Change the text of one element
      demoId.textContent = 'Demo ID text updated.';
      

      No entanto, ao acessar vários elementos por um seletor comum, como uma classe específica, precisamos percorrer todos os elementos na lista. No código abaixo, temos dois elementos div com um valor de classe comum.

      <div class="demo-class">Demo Class 1</div>
      <div class="demo-class">Demo Class 2</div>
      

      Vamos usar o querySelectorAll() para captar todos os elementos com demo-class aplicado a eles e usaremos o forEach()para percorrê-los e aplicar uma alteração. Também é possível acessar um elemento específico com o querySelectorAll() da mesma forma que você utilizaria um array — usando a notação entre parênteses.

      // Get a NodeList of all .demo elements
      const demoClasses = document.querySelectorAll('.demo-class');
      
      // Change the text of multiple elements with a loop
      demoClasses.forEach(element => {
        element.textContent = 'All demo classes updated.';
      });
      
      // Access the first element in the NodeList
      demoClasses[0];
      

      Esta é uma das diferenças mais importantes que você deve saber ao passar do jQuery para o vanilla JavaScript. Muitos exemplos de modificação de elementos não irão explicar o processo de aplicação desses métodos e propriedades a vários elementos.

      As propriedades e métodos neste artigo serão, muitas vezes, anexadas aos event listeners para responder aos métodos de seleção via cliques, passar o mouse ou outros gatilhos.

      Nota: os métodos getElementsByClassName() e o getElementsByTagName() retornarão coleções do HTML que não têm acesso ao método forEach() que o querySelectorAll() tem. Nestes casos, será necessário usar um padrão para for loop iterar na coleção.

      Modificando atributos

      Os atributos são valores que contêm informações adicionais sobre elementos do HTML. Normalmente, eles vêm em pares de nome/valor e podem ser essenciais dependendo do elemento.

      Alguns dos atributos do HTML mais comuns são os atributos src de uma tag img, o href de uma tag a, class, id e style. Para obter uma lista completa de atributos do HTML, veja a lista de atributos na Rede de Desenvolvedores da Mozilla. Os elementos personalizados que não fazem parte do padrão do HTML serão anexados no início com o data-.

      No JavaScript, temos quatro métodos para modificar atributos do elemento:

      Método Descrição Exemplo
      hasAttribute() Devolve valores lógicos boolianos do tipo true ou false element.hasAttribute('href');
      getAttribute() Retorna o valor de um atributo especificado ou null element.getAttribute('href');
      setAttribute() Adiciona ou atualiza o valor de um atributo especificado element.setAttribute('href', 'index.html');
      removeAttribute() Remove um atributo de um elemento element.removeAttribute('href');

      Vamos criar um novo arquivo de HTML com uma tag img com um atributo. Vamos vincular uma imagem pública disponível através de um URL, mas você pode trocá-la por uma imagem local alternativa se estiver trabalhando offline.

      attributes.html

      <!DOCTYPE html>
      <html lang="en">
      <body>
      
          <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">
      
      </body>
      
      </html>
      

      Quando carregar o arquivo de HTML acima em um navegador Web moderno e abrir o Console do desenvolvedor integrado, deverá ver algo assim:

      First rendering of classes.html

      Agora, podemos testar todos os métodos de atributo rapidamente.

      // Assign image element
      const img = document.querySelector('img');
      
      img.hasAttribute('src');                // returns true
      img.getAttribute('src');                // returns "...shark.png"
      img.removeAttribute('src');             // remove the src attribute and value
      

      Neste ponto, você terá removido o atributo src e o valor associado ao img, mas poderá redefinir aquele atributo e atribuir o valor para uma imagem alternativa com o img.setAttribute():

      img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
      

      Second rendering of classes.html

      Finalmente, podemos modificar o atributo diretamente atribuindo um novo valor ao atributo como uma propriedade do elemento, definindo o src de volta para o arquivo shark.png

      img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';
      

      Qualquer atributo pode ser editado desta maneira, bem como com os métodos acima.

      Os métodos hasAttribute() e getAttribute() são normalmente usados com declarações condicionais, e os métodos setAttribute() e removeAttribute() são usados para modificar diretamente o DOM.

      Modificando as classes

      O atributo classe corresponde aos seletores de classe CSS. Não pode ser confundido com as classes ES6, um tipo especial de função do JavaScript.

      As classes CSS são usadas para aplicar estilos a vários elementos, ao contrário das IDs que só podem existir uma vez por página. No JavaScript, temos as propriedades de className e de classListpara trabalhar com o atributo de classe.

      Método/Propriedade Descrição Exemplo
      className Obtém ou define o valor de classe element.className;
      classList.add() Adiciona um ou mais valores de classe element.classList.add('active');
      classList.toggle() Liga ou desliga uma classe element.classList.toggle('active');
      classList.contains() Verifica se o valor de classe existe element.classList.contains('active');
      classList.replace() Substitui um valor de classe existente com um novo valor de classe element.classList.replace('old', 'new');
      classList.remove() Remove um valor de classe element.classList.remove('active');

      Vamos fazer outro arquivo de HTML para trabalhar com os métodos de classe, com dois elementos e algumas classes.

      classes.html

      <!DOCTYPE html>
      <html lang="en">
      
      <style>
          body {
              max-width: 600px;
              margin: 0 auto;
              font-family: sans-serif;
          }
          .active {
              border: 2px solid blue;
          }
      
          .warning {
              border: 2px solid red;
          }
      
          .hidden {
              display: none;
          }
      
          div {
              border: 2px dashed lightgray;
              padding: 15px;
              margin: 5px;
          }
      </style>
      
      <body>
      
          <div>Div 1</div>
          <div class="active">Div 2</div>
      
      </body>
      
      </html>
      

      Quando abrir o arquivo classes.html em um navegador Web, receberá uma renderização parecida com a seguinte:

      First rendering of classes.html

      A propriedade className foi introduzida para evitar conflitos com a palavra-chave class encontrada no JavaScript e outras linguagens que têm acesso ao DOM. É possível usar o className para atribuir um valor diretamente à classe.

      // Select the first div
      const div = document.querySelector('div');
      
      // Assign the warning class to the first div
      div.className = 'warning';
      

      Atribuímos a classe warning definida nos valores CSS de classes.html para o primeiro div. Você receberá o seguinte resultado:

      Second rendering of classes.html

      Note que se alguma classe já existir no elemento, isso irá substituí-las. É possível adicionar várias classes com espaço delimitado usando a propriedade className, ou usá-las sem operadores de atribuição para obter o valor da classe no elemento.

      A outra maneira de modificar as classes é através da propriedade ](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)classList[, que vem com alguns métodos úteis. Estes métodos são semelhantes aos métodos do jQuery addClass, removeClass e toggleClass.

      // Select the second div by class name
      const activeDiv = document.querySelector('.active');
      
      activeDiv.classList.add('hidden');                // Add the hidden class
      activeDiv.classList.remove('hidden');             // Remove the hidden class
      activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
      activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class
      

      Após realizar os métodos acima, sua página Web se parecerá com esta:

      Final rendering of classes.html

      Ao contrário do exemplo className, usar classList.add() adicionará uma nova classe na lista de classes existentes. Também é possível adicionar várias classes como strings separadas por vírgula. Também é possível usar o setAttribute para modificar a classe de um elemento.

      Modificando os estilos

      A propriedade estilo representa os estilos embutidos em um elemento HTML. Muitas vezes, os estilos serão aplicados aos elementos através de uma folha de estilos, como fizemos anteriormente neste artigo. Porém, às vezes precisamos adicionar ou editar diretamente um estilo embutido.

      Vamos fazer um exemplo curto para demonstrar a edição de estilos com o JavaScript. Abaixo está um novo arquivo de HTML com um div que tem alguns estilos embutidos aplicados para mostrar um quadrado.

      styles.html

      <!DOCTYPE html>
      <html lang="en">
      
      <body>
      
          <div style="height: 100px;
                      width: 100px;
                      border: 2px solid black;">Div</div>
      
      </body>
      
      </html>
      

      Quando aberto em um navegador Web, o styles.html se parecerá com isso:

      First rendering of styles.html​

      Uma opção para editar os estilos é com o setAttribute().

      // Select div
      const div = document.querySelector('div');
      
      // Apply style to div
      div.setAttribute('style', 'text-align: center');
      

      No entanto, isso removerá todos os estilos embutidos do elemento. Uma vez que este provavelmente não é o efeito desejado, é melhor usar o atributo style diretamente.

      div.style.height = '100px';
      div.style.width = '100px';
      div.style.border = '2px solid black';
      

      As propriedades CSS são escritas em kebab-case, que são palavras minúsculas separadas por traços. É importante notar que as propriedades CSS em kebab-case não podem ser usadas na propriedade de estilo do JavaScript. Em vez disso, elas serão substituídas por seu equivalente em camelCase, que é quando a primeira palavra é minúscula e todas as palavras subsequentes são maiúsculas. Em outras palavras, em vez de text-align, vamos usar textAlign para a propriedade de estilo do JavaScript.

      // Make div into a circle and vertically center the text
      div.style.borderRadius = '50%';
      div.style.display = 'flex';
      div.style.justifyContent = 'center';
      div.style.alignItems = 'center';
      

      Após completar as modificações de estilo acima, sua versão final de styles.html mostrará um círculo:

      Final rendering of styles.html

      Se muitas alterações estilísticas tiverem que ser aplicadas a um elemento, o melhor a se fazer é aplicar os estilos para uma classe e adicionar uma nova classe. No entanto, existem alguns casos nos quais será necessário ou mais direto modificar o atributo estilo embutido.

      Conclusão

      Os elementos do HTML têm, frequentemente, informações adicionais atribuídas a eles na forma de atributos. Os atributos podem consistir em pares de nome/valor e alguns dos atributos mais comuns são de class e style.

      Neste tutorial, aprendemos como acessar, modificar e remover atributos em um elemento HTML no DOM usando o JavaScript simples. Também aprendemos como adicionar, remover, alternar e substituir as classes CSS em um elemento e como editar estilos de CSS embutidos. Para saber mais, verifique a documentação sobre atributos na Rede de Desenvolvedores da Mozilla.



      Source link

      Cómo modificar atributos, clases y estilos en el DOM


      Introducción

      En el tutorial anterior de esta serie, “Cómo realizar cambios en el DOM”, abordamos la forma de crear, insertar, sustituir y eliminar elementos del Document Object Model (DOM) con métodos incorporados. Al aumentar su competencia en el manejo del DOM, podrá usar mejor las capacidades interactivas de JavaScript y modificar elementos web.

      En este tutorial aprenderemos a cambiar más el DOM modificando estilos, clases y otros atributos de nodos de elementos HTML. Esto le permitirá comprender mejor la manera de manipular elementos esenciales dentro del DOM.

      Revisión de la selección de elementos

      Hasta hace poco, una biblioteca popular de JavaScript llamada jQuery se usaba muy a menudo para seleccionar y modificar elementos del DOM. jQuery simplificó el proceso de selección de uno o varios elementos y aplicación de cambios en todos ellos al mismo tiempo. En “Cómo acceder a elementos del DOM”, revisamos los métodos del DOM para capturar nodos y trabajar con ellos en Vanilla JavaScript.

      Para la revisión, document.querySelector() y document.getElementById() son los métodos utilizados para acceder a un único elemento. Usando un div con un atributo id en el siguiente ejemplo, podemos acceder a ese elemento de cualquier forma.

      <div id="demo-id">Demo ID</div>
      

      El método querySelector() es más sólido, ya que puede seleccionar un elemento en la página a través de cualquier tipo de selector.

      // Both methods will return a single element
      const demoId = document.querySelector('#demo-id');
      

      Accediendo a un único elemento, podemos actualizar fácilmente una parte del elemento, como el texto interno.

      // Change the text of one element
      demoId.textContent = 'Demo ID text updated.';
      

      Sin embargo, al acceder a varios elementos a través de un selector común, como una clase específica, debemos repetir todos los elementos de la lista. En el siguiente código, tenemos dos elementos div con un valor de clase común.

      <div class="demo-class">Demo Class 1</div>
      <div class="demo-class">Demo Class 2</div>
      

      Utilizaremos querySelectorAll() para capturar todos los elementos con demo-class que se les aplicaron y forEach() para repetirlos y aplicar un cambio. También es posible acceder a un elemento específico con querySelectorAll() de la misma forma que con una matriz: usando una notación entre paréntesis.

      // Get a NodeList of all .demo elements
      const demoClasses = document.querySelectorAll('.demo-class');
      
      // Change the text of multiple elements with a loop
      demoClasses.forEach(element => {
        element.textContent = 'All demo classes updated.';
      });
      
      // Access the first element in the NodeList
      demoClasses[0];
      

      Es una de las diferencias más importantes que se deben tener en cuenta al pasar de jQuery a Vanilla JavaScript. Muchos ejemplos de modificación de elementos no explicarán el proceso de aplicación de esos métodos y propiedades a varios elementos.

      A menudo, las propiedades y los métodos de este artículo se adjuntarán a escuchas de eventos para responder a clics, desplazamientos u otros activadores.

      Nota: Los métodos getElementsByClassName() y getElementsByTagName() mostrarán colecciones HTML que no tienen acceso al método forEach() que querySelectorAll() tiene. En estos casos, deberá usar un bucle estándar for la repetición en la colección.

      Modificación de atributos

      Los atributos son valores que contienen información adicional sobre elementos HTML. Normalmente vienen en pares de nombre y valor, y pueden ser esenciales según elemento.

      Algunos de los atributos HTML más comunes son el atributo src de una etiqueta img, el href de una etiqueta a, class, id y style. Para obtener una lista completa de atributos HTML, consulte la lista de atributos en la Mozilla Developer Network. Los elementos personalizados que no formen parte del estándar HTML se prefijarán con data-.

      En JavaScript, tenemos cuatro métodos para modificar atributos de elementos:

      Método Descripción Ejemplo
      hasAttribute() Muestra un booleano true o false. element.hasAttribute('href');
      getAttribute() Muestra el valor de un atributo especificado o null. element.getAttribute('href');
      setAttribute() Agrega o actualiza el valor de un atributo especificado. element.setAttribute('href', 'index.html');
      removeAttribute() Elimina un atributo de un elemento. element.removeAttribute('href');

      Crearemos un nuevo archivo HTML con una etiqueta img con un atributo. Estableceremos un vínculo a una imagen pública disponible a través de una URL, pero puede cambiarla por una imagen local alternativa si trabaja sin conexión.

      attributes.html

      <!DOCTYPE html>
      <html lang="en">
      <body>
      
          <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png">
      
      </body>
      
      </html>
      

      Cuando cargue el archivo HTML anterior en un navegador web moderno y abra la consola para desarrolladores integrada, verá algo como lo siguiente:

      Primera representación de classes.html

      Ahora podemos probar todos los métodos de atributos sobre la marcha.

      // Assign image element
      const img = document.querySelector('img');
      
      img.hasAttribute('src');                // returns true
      img.getAttribute('src');                // returns "...shark.png"
      img.removeAttribute('src');             // remove the src attribute and value
      

      En este punto, habrá eliminado el atributo src y el valor asociado con img, pero puede reiniciar ese atributo y asignar el valor a una imagen alternativa con img.setAttribute():

      img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');
      

      Segunda representación de classes.html

      Por último, podemos modificar el atributo directamente asignándole un nuevo valor como una propiedad del elemento, haciendo que el src vuelva al archivo shark.png.

      img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';
      

      Cualquier atributo puede editarse de esta forma y también con los métodos anteriores.

      Los métodos hasAttribute() y getAttribute() se utilizan normalmente con instrucciones condicionales y los métodos setAttribute() y removeAttribute() se usan para modificar directamente el DOM.

      Modificación de clases

      El atributo de class corresponde a los selectores de clase de CSS. No se debe confundir con las clases ES6, un tipo especial de función de JavaScript.

      Las clases CSS se utilizan para aplicar estilos a varios elementos, a diferencia de los ID que solo pueden existir una vez por página. En JavaScript, contamos con las propied className y classList para trabajar con el atributo de clase.

      Método/Propiedad Descripción Ejemplo
      className Obtiene o establece un valor de clase. element.className;
      classList.add() Agrega uno o más valores de clase. element.classList.add('active');
      classList.toggle() Activa o desactiva una clase. element.classList.toggle('active');
      classList.contains() Comprueba si el valor de clase existe. element.classList.contains('active');
      classList.replace() Sustituye un valor de clase existente por uno nuevo. element.classList.replace('old', 'new');
      classList.remove() Elimina un valor de clase. element.classList.remove('active');

      Crearemos otro archivo HTML para que funcione con los métodos de clase, con dos elementos y algunas clases.

      classes.html

      <!DOCTYPE html>
      <html lang="en">
      
      <style>
          body {
              max-width: 600px;
              margin: 0 auto;
              font-family: sans-serif;
          }
          .active {
              border: 2px solid blue;
          }
      
          .warning {
              border: 2px solid red;
          }
      
          .hidden {
              display: none;
          }
      
          div {
              border: 2px dashed lightgray;
              padding: 15px;
              margin: 5px;
          }
      </style>
      
      <body>
      
          <div>Div 1</div>
          <div class="active">Div 2</div>
      
      </body>
      
      </html>
      

      Cuando abra el archivo classes.html en un navegador web, debería recibir una representación similar a la siguiente:

      Primera representación de classes.html

      La propiedad className se introdujo para evitar conflictos con la palabra clave de class que se encuentra en JavaScript y otros lenguajes que tienen acceso al DOM. Puede utilizar className para asignar un valor directamente a la clase.

      // Select the first div
      const div = document.querySelector('div');
      
      // Assign the warning class to the first div
      div.className = 'warning';
      

      Hemos asignado la clase warning definida en los valores CSS de classes.html al primer div. Obtendrá el siguiente resultado:

      Segunda representación de classes.html

      Tenga en cuenta que si ya hay clases en el elemento, esto las anulará. Puede agregar varias clases delimitadas por espacios usando la propiedad className o usarla sin los operadores de asignación para obtener el valor de la clase en el elemento.

      La otra forma de modificar clases es a través de la propiedad classList, que incluye algunos métodos útiles. Dichos métodos son similares a los de addClass, removeClass y toggleClass de jQuery.

      // Select the second div by class name
      const activeDiv = document.querySelector('.active');
      
      activeDiv.classList.add('hidden');                // Add the hidden class
      activeDiv.classList.remove('hidden');             // Remove the hidden class
      activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
      activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class
      

      Tras aplicar los métodos anteriores, su página web tendrá este aspecto:

      Renderización final de classes.html

      A diferencia del ejemplo de className, al utilizarse classList.add() se añadirá una nueva clase a la lista existente. También puede agregar varias clases como cadenas separadas por comas. También es posible utilizar setAttribute para modificar la clase de un elemento.

      Modificación de estilos

      La propiedad de estilo representa los estilos incorporados en un elemento HTML. A menudo, se aplicarán estilos a elementos a través de una hoja de estilos como lo hemos hecho antes en este artículo, pero a veces debemos agregar o editar un estilo alineado directamente.

      Haremos un breve ejemplo para mostrar estilos de edición con JavaScript. A continuación, se muestra un nuevo archivo HTML con un div que tiene algunos estilos incorporados para mostrar un cuadrado.

      styles.html

      <!DOCTYPE html>
      <html lang="en">
      
      <body>
      
          <div style="height: 100px;
                      width: 100px;
                      border: 2px solid black;">Div</div>
      
      </body>
      
      </html>
      

      Cuando se abra en un navegador web, styles.html tendrá este aspecto:

      Primera representación de styles.html

      Una opción para editar los estilos es setAttribute().

      // Select div
      const div = document.querySelector('div');
      
      // Apply style to div
      div.setAttribute('style', 'text-align: center');
      

      Sin embargo, esto eliminará todos los estilos alineados existentes del elemento. Debido a que este probablemente no sea el efecto deseado, es mejor utilizar el atributo style directamente.

      div.style.height = '100px';
      div.style.width = '100px';
      div.style.border = '2px solid black';
      

      Las propiedades de CSS se escriben en kebab-case, que son palabras minúsculas separadas por guiones. Tenga en cuenta que las propiedades de CSS de kebab-case no se pueden utilizar en la propiedad de estilo de JavaScript. Se sustituirán por su equivalente en camelCase, en el cual la primera palabra se escribe con minúscula y las siguientes con mayúsculas. En otras palabras, en vez de text-align utilizaremos textAlign para la propiedad de estilo de JavaScript.

      // Make div into a circle and vertically center the text
      div.style.borderRadius = '50%';
      div.style.display = 'flex';
      div.style.justifyContent = 'center';
      div.style.alignItems = 'center';
      

      Tras completar las modificaciones de estilo anteriores, en su representación final de styles.html se mostrará un círculo:

      Representación final de styles.html

      Si deben aplicarse muchos cambios estilísticos a un elemento, lo mejor es aplicar los estilos a una clase y agregar una nueva clase. Sin embargo, hay algunos casos en los que será necesario o más práctico modificar el atributo de estilo alineado.

      Conclusión

      Los elementos HTML a menudo tienen información adicional asignada en forma de atributos. Los atributos pueden incluir pares de nombre y valor, y algunos de los más comunes son class y style.

      En este tutorial, aprendió a acceder, modificar y eliminar atributos de un elemento HTML del DOM usando JavaScript simple. También aprendió a agregar, eliminar, activar y sustituir clases de CSS en un elemento y editar estilos de CSS alineados. Para obtener más información, consulte la documentación sobre atributos en la Mozilla DeveloperNetwork.



      Source link