3

DOM Parte 4 – Manipulando tabelas

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

Nesta última parte do mini tutorial sobre DOM vamos ver algumas funções do DOM para acessar, criar e excluir linhas e células de uma tabela.

rows[]

Retorna um array de cada linha de uma tabela.
Sintaxe: tabela.rows[]
Exemplo:

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

<html>
 <head>
  <title>rows[]</title>
  <script type='text/javascript'>
   window.onload = fucntion() {
    alert(document.getElementById("tabela").rows[0].innerHTML);
   }
  </script>
 </head>
 <body>
  <table id="tabela" border="1">
    <tr>
      <td>Célula 1</td>
      <td>Célula 2</td>
    </tr>
    <tr>
      <td>Célula 3</td>
      <td>Célula 4</td>
    </tr>
  </table>
 </body>
</html>

cells[]

Retorna um array de cada célula da tabela.
Sintaxe: Tabela.rows.cells[]
Exemplo:

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

<html>
 <head>
  <title>cells[]</title>
  <script type='text/javascript'>
   window.onload = fucntion() {
    alert(document.getElementById("tabela").rows[0].cells[0].innerHTML);
   }
  </script>
 </head>
 <body>
  <table id="tabela" border="1">
    <tr>
      <td>Célula 1</td>
      <td>Célula 2</td>
    </tr>
    <tr>
      <td>Célula 3</td>
      <td>Célula 4</td>
    </tr>
  </table>
 </body>
</html>

insertRow()

Insere linhas em uma tabela.
Sintaxe: tabela.insertRow(índice);
Exemplo:

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

<html>
 <head>
  <title>insertRow</title>
  <script type='text/javascript'>
   window.onload = fucntion() {
    document.getElementById("tabela").insertRow(0);
   }
  </script>
 </head>
 <body>
  <table id="tabela" border="1">
    <tr>
      <td>Célula 1</td>
      <td>Célula 2</td>
    </tr>
    <tr>
      <td>Célula 3</td>
      <td>Célula 4</td>
    </tr>
  </table>
 </body>
</html>

insertCell()

Insere células em uma tabela.
Sintaxe: linha.insertCell(índice)
Exemplo:

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

<html>
 <head>
  <title>insertCell</title>
  <script type='text/javascript'>
   window.onload = fucntion() {
    linha = document.getElementById("linha");
    linha.insertCell(0);
   }
  </script>
 </head>
 <body>
  <table border="1">
    <tr id="linha">
      <td>Célula 1</td>
      <td>Célula 2</td>
    </tr>
   </table>
 </body>
</html>

deleteRow()

Apaga linhas de uma tabela.
Sintaxe: tabela.deleteRow(índice);
Exemplo:

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

<html>
 <head>
  <title>deleteRow</title>
  <script type='text/javascript'>
   window.onload = fucntion() {
    document.getElementById("tabela").deleteRow(0);
   }
  </script>
 </head>
 <body>
  <table id="tabela" border="1">
    <tr>
      <td>Célula 1</td>
      <td>Célula 2</td>
    </tr>
    <tr>
      <td>Célula 3</td>
      <td>Célula 4</td>
    </tr>
   </table>
 </body>
</html>

deleteCell()

Apaga células de uma tabela.
Sintaxe: linha.deleteCell(índice)
Exemplo:

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

 <html>
 <head>
  <title>deleteCell</title>
  <script type='text/javascript'>
   window.onload = fucntion() {
    linha = document.getElementById("linha");
    linha.deleteCell(0);
   }
  </script>
 </head>
 <body>
  <table border="1">
    <tr id="linha">
      <td>Célula 1</td>
      <td>Célula 2</td>
    </tr>
   </table>
 </body>
</html>

Aqui termino meu mini-tutorial sobre DOM, espero que ele tenha sido útil pra o entendimento do assunto assim como o funcionamento de suas principais funções.

Tags:, , ,

 
2

DOM parte 3 – Removendo objetos

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

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.

Tags:, , ,

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

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