DOM parte 3 – Removendo objetos
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.
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
Muito boa explicação. Parabéns!!!