Ana Claudia

Programação e Design Web

DOM parte 3 – Removendo objetos

posted by Ana Claudia On agosto - 12 - 2007 1 COMMENT

Nos artigos anteriores, mostrei como acessar, criar e manipular objetos HTML do documento. Nesta terceira parte irei demonstrar como apagar nós filhos, atributos e textos de um elemento.

RemoveChild

Este método é utilizado para remover nós filhos de um elemento.
Sintaxe: removeChild(elemento);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
 <head>
  <title>removeChild</title>
  <script type='text/javascript'>
   window.onload = fucntion() {
    para  = document.getElementById("para");
    noPai = para.parentNode;
    noPai.removeChild(para);
   }
  </script>
 </head>
 <body>
  <p id="para">Parágrafo</p>
 </body>
</html>

No exemplo acima, o parágrafo foi removido por completo do documento.

deleteData

Remove o conteúdo total ou parcial do texto do nó, a partir de um inicio e fim selecionado.
Sintaxe: deleteData(inicio,fim);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <html>
 <head>
  <title>deleteData</title>
  <script type='text/javascript'>
   window.onload = fucntion() {
    para  = document.getElementById("para").firstChild;
    para.deleteData(0,4);
   }
  </script>
 </head>
 <body>
  <p id="para">Parágrafo</p>
 </body>
</html>

No exemplo, parte do texto dentro do parágrafo foi removido ficando apenas a palavra “grafo”.

removeAttribute

Remove um atributo de um elemento selecionado.
Sintaxe: removeAttribute(atributo);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
 <head>
  <title>removeAttribute</title>
  <script type='text/javascript'>
   window.onload = fucntion() {
    para = document.getElementById("para");
    para.removeAttribute("class");
   }
  </script>
 </head>
 <body>
  <p id="para" class="data">Parágrafo</p>
 </body>
</html>

O script acima removeu o atributo “class” presente no parágrafo.

Por hoje é só pessoal, espero que tenham gostado desse artigo. Na última parte deste tutorial irei falar sobre como manipular tabelas, criar e excluir linhas e células e um pouco mais.

Categories: HTML, Javascript, dhtml, dom

One Comment

  1. Eitaaaa, muitoo bacana esse post. Comi com farinha XD

    Mais tarde eu vou postar a aplicação dele no meu trabalho, gostaria que vc avalisse, ok?

    parabéns

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Comentários Recentes

  • Hugo: conseguir peço desculpas pra vc an
  • Hugo: podemos falar no msn se vc poder é
  • Hugo: vc quer todos os codigos? ou basta
  • Hugo: cara ana claudia estou adorando aqu
  • Ana Claudia: Gente havia um erro no script,no ar
  • Hugo: certo relamente errei feio salvei o