Selecionar elementos
Para podermos manipular um elemento de HTML temos de selecionar primeiro.
O objeto document possui vários métodos para o fazer:
| Método | Descrição |
| document.getElementById(id) | Obtém um elemento pelo seu id |
| document.getElementsByTagName(nome) | Obtém um array de elementos pelo nome do elemento |
| document.getElementsByClassName(classe) | Obtém um array de elementos com uma mesma classe |
| document.querySelector(seletor) | Obtém o primeiro elemento correspondente ao seletor |
| document.querySelectorAll() | Obtém um array de elementos correspondentes ao seletor |
| document.getAttributeNode(nome) | Obtém um nó de atributo com o nome nome. |
document.getElementById()
Seleciona um elemento pelo seu id. Como os ids são únicos numa página, este método retorna um único elemento ou nenhum.
Sintaxe:
document.getElementById(id)
id: id do elemento a selecionar
Seleciona um elemento pelo seu id. Como os ids são únicos numa página, este método retorna um único elemento ou nenhum.
Exemplo:
<body>
<p id="p1">Linha 1</p>
<p id="p2">Linha 2</p>
<p id="p3">Linha 3</p>
<script>
let p = document.getElementById("p2");
console.log(p.innerText);
</script>
</body>O output na consola será:
Linha 2
document.getElementsByTagName()
Seleciona elementos pelo nome do elemento. Pode retornar vários elementos.
Sintaxe:
document.getElementsByTagName(tagname)
tagname: nome do elemento a selecionar
Exemplo:
<body>
<p id="p1">Linha 1</p>
<p id="p2">Linha 2</p>
<p id="p3">Linha 3</p>
<script>
let ps = document.getElementsByTagName("p");
for(let i=0; i < ps.length; i++){
console.log(ps[i].innerText);
}
</script>
</body> O output na consola será:
Linha 1
Linha 2
Linha 3
document.getElementsByClassName()
Seleciona todos os elementos que tenham uma mesma classe de CSS.
Sintaxe:
document.getElementsByClassName(classname)
classname: seletor de CSS do elemento a selecionar
Exemplo:
<body>
<p id="p1" class="c1">Linha 1</p>
<p id="p2">Linha 2</p>
<p id="p3" class="c1">Linha 3</p>
<p id="p3" class="c2">Linha 4</p>
<script>
let elems = document.getElementsByClassName("c1");
for(let i=0; i < elems.length; i++){
console.log(elems[i].innerText);
}
</script>
</body> O output na consola será:
Linha 1
Linha 3
document.querySelector()
Seleciona o primeiro elemento que corresponde ao seletor de Css selector.
Sintaxe:
document.querySelector(selector)
selector: nome da classe de CSS a selecionar
Exemplo:
<body>
<p id="p1" class="c1">Linha 1</p>
<p id="p2">Linha 2</p>
<p id="p3" class="c1">Linha 3</p>
<p id="p3" class="c2">Linha 4</p>
<script>
let elem = document.querySelector(".c1");
console.log(elem.innerText);
</script>
</body> O output na consola será:
Linha 1
document.querySelectorAll()
Seleciona todos os elementos que correspondem ao seletor selector.
Sintaxe:
document.querySelectorAll(selector)
selector: nome da classe de CSS a selecionar
Exemplo:
<body>
<p id="p1" class="c1">Linha 1</p>
<p id="p2">Linha 2</p>
<p id="p3" class="c1">Linha 3</p>
<p id="p3" class="c2">Linha 4</p>
<script>
let elems = document.querySelectorAll(".c1");
for(let i=0; i < elems.length; i++){
console.log(elems[i].innerText);
}
</script>
</body>O output na consola será:
Linha 1
Linha 3
element.getAttributeNode()
Seleciona um nó de atributo do elemento element com o nome nome.
Sintaxe:
element.getAttributeNode(nome)
nome: nome do atributo
Exemplo:
<body>
<p class='green'>Linha de texto 1</p>
<script>
//seleciona o elemento P:
let p = document.getElementsByTagName('P')[0];
//obtém o nó de atributo com o nome ‘class’:
let attr = p.getAttributeNode('class');
</script>
</body> element.getAttribute()
Retorna uma string com o valor do atributo com o nome nome.
Sintaxe:
element.getAttribute(nome)
nome: nome do atributo
Exemplo:
var href = document.getElementById("a1").getAttribute("href");