DOM parte 2 – Manipulando objetos

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

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:, , ,

Reply

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