ProPixel

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Caminhando pelo DOM - Parte IV em Qui 13 Dez 2012, 12:48

Koily

avatar
Coordenador

Como vimos anteriormente, existem dois tipos de elementos DOM, o elemento nó e o elemento texto.E para criar um novo elemento, seja ele texto ou nó, nós usaremos os mesmos passos, porém, métodos diferentes:

- document.createElement([TAG_HTML]);
- document.createTextNode("string");
- elemntoPai.appendChild(elemntoFilho);

O primeiro método, recebe como parâmetro o nome de uma tag HTML (em maiúscula) e retorna uma referência a um novo elemento recém-criado, e o segundo recebe uma string e também retorna uma referência ao elemento criado, já o terceiro anexa ao elemento pai um elemento filho.
O passos para se criar um elemento são:

Exemplo 01 :

Código:
<html>

<head>

<title>Criando Elementos DOM</title>



<script>

    function criar()

    {

        var linha = document.createElement("TR"); //cria um elemento <tr>

        var cel  = document.createElement("TD"); //cria um elemento <td>

        var cel2  = document.createElement("TD"); //cria outro elemento <td>

        var txt  = document.createTextNode("Coluna 1"); //cria um elemento texto

        var txt2  = document.createTextNode("Coluna 2");  //cria um elemento texto>

        /*

        o elemento linha será pai dos elementos cel e cel2

        cel será pai do elemento txt e cel2 pai do elemento txt2

        */

        cel.appendChild(txt);

        cel2.appendChild(txt2);

        linha.appendChild(cel);

        linha.appendChild(cel2);

        /*

        o elemnto linha vai ser um no filho da tabela

        */

        var tabela = document.getElementById("container");

        /*

        agora nós temos uma referência para a tabela

        */

        tabela.appendChild(linha);

        /*

        quando anexamos um elemento como um filho de outro elemento

        seus filho passam a ser netos deste outro elemento

        */

    }

</script>

</head>



<body>



<table border="1" id="container">

</table>




<input type="button" onclick="criar();" value="CRIAR">



</body>

</html>

Quando criamos um novo elemento, ele não estará anexado a nenhum elemento, por isso precisamos anexá-lo a um pai. O novo elemento elemento criado, também não possui nenhum atributo, por isso precisamos atribuir atributos a ele.

Exemplo 02:

Código:
<html>

<head>

<title>Craindo Atributos Para novos Elementos</title>



<script language="javascript">

function criar()

{

   

    var el = window.prompt("Qual elemento você deseja criar?","");

    el = el.toLowerCase();

   

    if(el == "select")

    {

        var formEl = document.createElement("SELECT");

        var num = window.prompt("Quants opções você quer ?","");

        for(i=0;i<num;i++)

        {

            var opt = document.createElement("OPTION");

            var valor = window.prompt("Qual o valor da opção ?","");

            opt.setAttribute("value",valor);

            var txt = document.createTextNode(valor);

            opt.appendChild(txt);

            formEl.appendChild(opt);

        }



       

    }

    else

    {   

        var formEl = document.createElement("INPUT");

        formEl.setAttribute("type",el); //determina o atributo type do elemento

    }   

   

    if(el == "button" || el == "submit" || el == "reset" )

    {

        var valor = window.prompt("Qual o valor do elemento?","");

        formEl.setAttribute("value",valor);

    }

   

    if(el == "text" || el == "password")

    {

        var tam = window.prompt("Qual o tamanho do elemento?","");

        formEl.setAttribute("size",tam);

        var maximo = window.prompt("Qual o nº max de caracteres do elemento?","");

        formEl.setAttribute("maxlength",maximo);

    }

   

       

   

    if(el == "radio" || el == "checkbox")

    {

        var desc = window.prompt("Qual a descrição do elemento?","");

        var txt = document.createTextNode(desc);

        var formulario = document.getElementById("form1");

        var quebra = document.createElement("BR");

        formulario.appendChild(formEl);

        formulario.appendChild(txt);

        formulario.appendChild(quebra);

    }

    else

    {   

        var formulario = document.getElementById("form1");

        var quebra = document.createElement("BR");

        formulario.appendChild(formEl);

        formulario.appendChild(quebra);

    }   

}



</script>



</head>



<body>



<form id="form1">

</form>






<input type="button" value="CRIAR" onClick="criar();" />

</body>

</html>

Bom acabamos de ver como criar elementos de um formulário dinamicamente, sendo possível incluir qualquer elemento, agora veremos com excluir um elemento.

- elementoPai.removeChild("filho"); //remove o último elemento filho, retornando uma referência ao elemento removido.
- replaceChild( novoFilho, filhoAntigo);

O primeiro método remove o último elemento filho de um elemento, e o segundo método substitui o elemento filho por outro elemento

Com estes métodos você pode criar ou modificar quaisquer elementos do documento sendo muito útil em AJAX, pois você só precisa se preocupar em carregar o conteúdo, pois o documento pode ser montado do lado do cliente, diminuindo em muito o tráfego de dados entre cliente-servidor.

Bom esta série foi uma preparação para os nossos próximos exemplos em AJAX, até a próxima.

Fonte: Oficina da Net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum