Attributes

getAttribute(), setAttribute(), and hasAttribute()

getAttribute(), setAttribute(), and hasAttribute() los métodos le permiten obtener, establecer y verificar la existencia de atributos (incluidos los atributos de datos) en un elemento.

  
  <section class="section" id="section" data-value="main">Section Content</section>
  

  
  let element = document.querySelector('#section');

  // Get value of an attribute
  let elementArea = element.getAttribute('data-value');

  console.log(elementArea); //-> main

  // Set value of an attribute
  element.setAttribute('data-value', 'side-bar');

  if(element.hasAttribute('data-value')) {
    console.log('Attribute exist');
  }
  

Estos métodos también se pueden usar para manipular otros tipos de atributos (como id, tabindex, name, etc.), pero estos se hacen mejor llamando directamente al atributo en el elemento.

Propiedades de atributo

Puede obtener y establecer atributos directamente en un elemento.

  
  <section class="section" id="section" data-value="main">Section Content</section>
  

  
  let element = document.querySelector('#section');

  // Get Attribute
  let id = element.id;

  console.log(id);

  // Set Atrribute
  element.id = "main";