Propriedades dos nós e elementos

Os nós do DOM possuem um conjunto de propriedades que nos nos permitem aceder/alterar o seu conteúdo, ver o tipo de nó, o seu nome, etc..

Algumas das propriedades mais importantes são:

nodeType

Os tipos de nós mais importantes são:

Tipo de elemento NodeType
Elemento 1
Atributo 2
Texto 3
Comentário 8
Documento 9

Exemplo:

  <body>
    <p id="intro">Hello World!</p>
    <script type="text/javascript">
      x = document.getElementById("intro");
      console.log(x.nodeType);  //Output: 1

    </script>
  </body>

nodeName

A propriedade nomeName devolve o nome de um nó.

O nodeName de um nó de elemento é o mesmo do nome do elemento HTML.
O nodeName de um nó de atributo é o nome do atributo.
O nodeName de um nó de texto é sempre #text.
O nodeName de um nó de documento é sempre #document.

Exemplo:

  <body>
    <p id="intro">Hello World!</p>
    <script type="text/javascript">
      x = document.getElementById("intro");
      console.log(x.nodeName);  //Output:  P
    </script>
  </body>

nodeValue

A propriedade nodeValue especifica o valor de um nó.

O nodeValue de nós de elemento é null.
O nodeValue de nós de texto é o próprio texto.
O nodeValue de nós de atributo é o valor do atributo.

Exemplo:

<body>
    <p id="intro">Hello World!</p>
    <script type="text/javascript">
      x = document.getElementById("intro");
      console.log(x.firstChild.nodeValue);  //Output: Hello World
    </script>
  </body>

tagName

A propriedade tagName devolve uma string com o nome do elemento.

A diferença para a propriedade nodeName é que a propriedade tagName só devolve o nome de elementos enquanto a propriedade nodeName devolve o nome de todo o tipo de nós, como elementos, atributos, texto e comentários.

innerHTML

A propriedade innerHTML permite ler/alterar o conteúdo de HTML dos elementos de HTML.

Exemplo:

  <body>
    <div id="div1">
      <p>Linha 1</p>
    </div>

    <script>
      const div = document.getElementById("div1");
      console.log(div.innerHTML); //Output: <p>Linha 1</p>
    </script>
  </body>

innerText

A propriedade innerText permite ler/alterar o conteúdo de texto de um elemento e de todos os seus filhos.

A propriedade innerText retorna o conteúdo de texto de todos os elementos filho, exceto de elementos SCRIPT e STYLE.

Exemplo:

  <body>
    <div id="div1">
      <p>Linha 1</p>
    </div>

    <script>
      const div = document.getElementById("div1");
      console.log(div.innerText);  //Output: Linha 1
    </script>
  </body>

textContent

A propriedade textContent permite ler/alterar o conteúdo de texto de um elemento e de todos os seus filhos.

Exemplo:

  <body>
    <div id="div1">
      <p id="p1">Linha 1</p>
    </div>

    <script>
      const p = document.getElementById("p1");
      console.log(p.textContent);  //Output: Linha 1
      p.textContent = "Linha alterada";
    </script>
  </body>

className

A propriedade className permite ler/alterar o nome da classe de um elemento, definido no atributo class. Para definir mais do que uma classe basta especificar os nomes das classes separadas por vírgulas.

Exemplo:

<head> 
   <style> 
      .red { 
         color: maroon; 
         font-weight: bold; 
      } 
   </style> 
</head> 
<body> 
   <h2>CSS Tutorial</h2> 
   <script> 
      let h2 = document.querySelector("h2"); 
      h2.className = "red"; 
   </script> 
</body>

classList

A propriedade classList devolve os nomes das classes definidas no atributo class de um elemento.

Podemos adicionar, remover ou alternar classes na propriedade classList, com os métodos add(), remove() e toggle().

Esta propriedade possui as seguintes propriedades e métodos:

length: devolve o número de classes na lista.

add(class1, class2, …): adiciona uma ou mais classes à lista. Se forem várias classes, os nomes das classes devem estar separadas por vírgulas. Se uma das classes já existir na lista, ela não é adicionada.
remove(class1, class2, …): remove uma ou mais classes da lista. Se forem várias classes, os nomes das classes devem estar separadas por vírgulas.
toggle(class): remove uma classe da lista se a classe existir. Se a classe não existir é adicionada à lista.
contains(class): Verifica se uma classe existe na lista. Se existir retorna true. Se não existir, retorna false.
item(índex): retorna a classe com o índice índex. Se o índice estiver fora do alcance, retorna null.

Exemplo1:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

Exemplo2:
document.getElementById("myDIV").classList.remove("mystyle");

Exemplo3:
document.getElementById("myDIV").classList.toggle("newClassName");

value

A propriedade value permite ler/alterar o valor de uma caixa de texto.

Exemplo:

  <body>
    Nome: <input type="text" name="nome" id="nome">
    <script>
      const input = document.getElementById("nome");
      console.log(input.value)
    </script>
  </body>