Atributos Globais

8.1 Atributo id

Os atributos globais são aqueles que podem ser usados com qualquer elemento HTML. Eles desempenham um papel chave na identificação, classificação e gerenciamento dos elementos das páginas web.

O atributo id é usado para identificar de forma única um elemento na página. O valor do atributo id deve ser único dentro de todo o documento HTML. Este atributo é frequentemente usado para associar elementos com CSS e JavaScript.

Sintaxe:

    
      <element id="unique-id">...</element>
    
  

Exemplo de uso:

    
      #header {
        background-color: #f4f4f4;
        padding: 10px;
      }
    
  

    
      <div id="header">
        <h1>Cabeçalho</h1>
      </div>
    
  

    
      document.getElementById('header').style.color = 'blue';
    
  

Vantagens:

• Identificação única: permite identificar elementos de maneira única na página
• Estilização: conveniente para aplicar estilos CSS
• Manipulação do DOM: fácil acesso aos elementos com JavaScript

8.2 Atributo class

O atributo class é usado para atribuir um ou mais classes a um elemento. Essas classes podem ser usadas para aplicar estilos CSS e manipular elementos com JavaScript. Ao contrário do id, os valores do class não precisam ser únicos.

Sintaxe:

    
      <element class="class-1 class-2">...</element>
    
  

Exemplo de uso:

    
      .highlight {
        background-color: yellow;
      }

      .bold {
        font-weight: bold;
      }
    
  

    
      <p class="highlight">Este texto está destacado em amarelo.</p>
      <p class="bold">Este texto está em negrito.</p>
      <p class="highlight bold">Este texto está em negrito e destacado em amarelo.</p>
    
  

Vantagens:

• Múltiplas classes: permite definir várias classes para um elemento
• Agrupamento de elementos: fácil aplicação de estilos a grupos de elementos
• Manipulação do DOM: permite trabalhar facilmente com grupos de elementos via JavaScript

8.3 Atributos data-*

Os atributos data-* permitem armazenar dados personalizados nos elementos HTML. Esses atributos começam com o prefixo data- e podem ter qualquer valor. Eles são frequentemente usados para armazenar informações que podem ser úteis para o JavaScript.

Sintaxe:

    
      <element data-key="value">...</element>
    
  

Exemplo de uso:

    
      <div data-user-id="12345" data-role="admin">
        Usuário com ID 12345, papel - administrador.
      </div>
    
  

    
// Encontrar o primeiro elemento na página que tenha o atributo data-user-id
const userElement = document.querySelector('[data-user-id]');

// Obter o valor do atributo data-user-id e imprimir no console
console.log(userElement.dataset.userId); // Saída: 12345

// Obter o valor do atributo data-role e imprimir no console
console.log(userElement.dataset.role); // Saída: admin
    
  

Vantagens:

• Armazenamento de dados: conveniente para armazenar e transmitir dados associados aos elementos
• Acesso via JavaScript: fácil acesso e alteração de dados através do dataset API
• Flexibilidade: permite adicionar qualquer dado sem violar os padrões HTML