DOM parte 1 – Obtendo objetos
Oi pessoal, estou de volta. Por causa de alguns compromissos não consegui prosseguir escrevendo artigos no meu blog, mas agora eu estou voltando com força total e vou explicar alguns conceitos que conheço. Vou começar com DOM que é um conceito muito interessante
para manipulação de HTML através de javascript.
O que é DOM?
DOM significa Document Object Model – Documento de modelo de objetos – e é responsável por acessar, alterar e criar elementos num documento. Nesta primeira parte irei explicar alguns conceitos de como recuperar elementos de uma página.
Conceito de Nós
O documento é separado por Nodes ou nós. Cada Node representa um elemento na hierarquia do documento. Um conjunto de Nodes forma a árvore de Nós (Node tree). Todos os elementos dentro do HTML é um nó.
Ex:
<html>
<head>
<title>Título</title>
</head>
<body>
<p>Parágrafo</p>
</body>
</html>
A tag HTML é pai de todas as outras tag, pois ela envolve dentro dela outras tags. Pode se dizer então que o <html> é o parentNode. A tag <head> está dentro da tag <html>, então ela esta dentro de um no filho do HTML (childNode).
A seguir mostro como acessar os Nós de um documento:
Atributos
childNodes: Acessa nós filhos de um documento ou de outro nó
parentNode: Acessa o nó pai de um nó filho;
firstChild: Primeiro nó filho de um elemento. Equivalente a childeNodes[0];
lastChild: Último nó filho de um elemento. Equivalente a childeNodes[n] onde n
é o último valor de array de nós filhos.
nextSibling: o próximo nó filho numa mesma hierquia.
Ex:
var no1 = document.childeNodes[0];
var no2 = no1.NextSbling
Onde NextSibling seria equivalente a childeNodes[1];
previousSibling: Semelhante ao atributo anterior, porém com a diferença de pegar o nó anterior.
nodeName: A propriedade nodeName contém o nome do nó que geralmente se refere ao nome ou atributo de uma Tag.
nodeType: Essa propriedade retorna o tipo de nó
| Tipo de elemento | Tipo de nó |
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |
nodeValue: Contém o valor do nó, variando conforme o tipo de nó. Se o nó for do tipo texto, retorna o texto que está dentro do nó e se for um atributo, retorna o valor desse atributo. Para os outros tipos, essa propriedade não está disponível.
Outra forma de pegar objetos é através de “gets”
document.getElementsByTagName: Pega todos os elementos com a mesma tag. Para retonar todos os elementos você deve percorrer o documento através de um loop.
Ex:
var p = document.getElementsByTagName(“p”);
fo(i = 0; i<p.length; i++)
{
alert(“Paragrafo “ + i + “: “ + p[i].innerText);
}
Neste exemplo fazemos com que seja mostrado numa caixa de alerta o texto de cada parágrafo existente num documento.
document.getElementById: Pega apenas um elemento que contenha o atributo ID.
Ex:
<p id=”x”>Isso é um teste</p>
…
alert(document.getElementById(“x”).innerText);
Neste caso será retornado o conteúdo do parágrafo cujo id é “x”.
Bom, por enquanto é só, nos próximos artigos vou continuar falando sobre criar objetos, manipular tabelas e exluir objetos. Espero que gostem!
Muito bom ver que temos o mesmo gosto por distribuir ensinamentos muahahahahaha
DOM é uma coisa interessante. Uso muito quando brinco com Javascript. Muito esclarecedor seu texto. Eu não sabia ou não queria usar os “childs”.
Permita-me ser chato agora: no seu exemplo de getElementsByTagName o var p está no singular, talvez tenha, sem querer, esquecido o ’s’ de Element.
E o ruim do Wordpress é quando usamos “<” em scripts js. No loop for, o Wordpress comeu o que vem depois do sinal de maior. Odeio quando ele faz isso. Mas bom, nem uso ele mesmo 8D
E a propósito, o seu texto de paginação em php veio em boa hora.
Abraços!
Por acaso você vai mencionar removeChild, innerHTML, appendChild, lastChild etc? \o/ Hoje mesmo precisei usar num formulário para dar a opção de adicionar mais campos. Reafirmo que essa parte do javascript é muito interessante! 8D
Claro que sim, fará parte da 2ª parte do meu mini tutorial, a semana que vem o artigo já estará pronto.
I’d prefer reading in my native language, because my knowledge of your languange is no so well. But it was interesting! Look for some my links: