2

DOM parte 2 – Manipulando objetos

Posted by Ana Claudia on ago 7, 2007 in HTML, Javascript, dhtml, dom

Na primeira parte deste tutorial você viu como acessar objetos do html, seus valores, textos e atributos. Nesta segunda parte você irá ver que o DOM também pode criar e modificar objetos do HTML.

createElement

cria tags no HTML.
Sintaxe: createElement(nome)

1
2
3
4
5
6
7
8
9
10
11
12

<html>
 <head>
  <title>Create Element</title>
  <script type='text/javascript'>
   window.onload = function() {
    p = document.createElement("p");
   }
  </script>
 </head>
 <body>
 </body>
</html>

No exemplo acima apenas criamos o paragráfo, mas não o inserimos no documento ainda. A inserção no documento será vista adiante.

setAttribute

Modifica o atributo que já existe de um elemento ou o cria, caso o atributo não exista.
Sintaxe: setAttribute(nome,valor)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
 <head>
  <title>setAttribute</title>
  <script type='text/javascript'>
   window.onload = function() {
    link = document.getElementsByTagName("a")[0];
    link.setAttribute("href","http://www.terra.com.br");
   }
  </script>
 </head>
 <body>
  <a>Link</a>
 </body>
</html>

Aqui nos criamos o atributo href e passamos um link como valor para ele.

getAttribute

Pega o valor de um atributo especificado.
Sintaxe: getAttribute(nome)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 <html>
 <head>
  <title>getAttribute</title>
  <script type='text/javascript'>
   window.onload = function() {
    link = document.getElementsByTagName("a")[0];
    href = link.getAttribute("href");
    alert(href);
   }
  </script>
 </head>
 <body>
  <a href="http://www.terra.com.br">Link</a>
 </body>
</html>

No exemplo pegamos o valor que se encontra no atributo href.

createTextNode

Cria um novo texto para um nó.
Sintaxe: createTextNode(texto)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
 <head>
  <title>createTextNode</title>
  <script type='text/javascript'>
   window.onload = function() {
    p    = document.getElementsByTagName("p")[0];
    text = document.createTextNode("Paragráfo");
   }
  </script>
 </head>
 <body>
  <p></p>
 </body>
</html>

Aqui passamos um texto para o parágrafo existente no documento.

appendChild

Insere um elemento após um outro elemento selecionado.
Sintaxe: appendChild(nome)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
 <head>
  <title>appendChild</title>
  <script type='text/javascript'>
   window.onload = function() {
    p    = document.getElementsByTagName("p")[0];
    text = document.createTextNode("Paragráfo");
    p.appendChild(text);
   }
  </script>
 </head>
 <body>
  <p></p>
 </body>
</html>

Além de criar o texto para o parágrafo, agora vamos inseri-lo dentro do documento.

insertBefore

Esta função insere um nó antes de outro nó especificado.
Sintaxe: insertBefore(novoNo,antigoNo);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
 <head>
  <title>insertBefore</title>
  <script type='text/javascript'>
   window.onload = function() {
    p1    = document.getElementsByTagName("p")[0];
    noPai = p1.parentNode;
    p2 = document.createElement("p");
    text = document.createTextNode("Segundo paragráfo");
    p2.appendChild(text);
    noPai.insertBefore(p2,p1);
   }
  </script>
 </head>
 <body>
  <p></p>
 </body>
</html>

Aqui criamos o parágrafo e seu texto, só desta vez iremos inserir antes do primeiro parágrafo inserido.

innerHTML

Esta propriedade exibe ou modifica o conteúdo de um elemento formatado como HTML.

Sintaxe: documento.elemento.innerHTML = “texto”

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 <html>
 <head>
  <title>innerHTML</title>
  <script type='text/javascript'>
   window.onload = function() {
    div = document.getElementsByTagName("div")[0];
    div.innerHTML += "<strong>texto</strong>";
   }
  </script>
 </head>
 <body>
  <div></div>
 </body>
</html>

Com a propriedade innerHTML, inserimos o texto “texto” dentro da tag “div”.

Tags:, , ,

 
4

DOM parte 1 – Obtendo objetos

Posted by Ana Claudia on jul 30, 2007 in HTML, Javascript, dhtml, dom

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!

Tags:, , ,

Copyright © 2012 Ana Claudia. All Rights Reserved.
Theme by Lorelei Web Design.