Ir para conteúdo
Fórum Script Brasil
  • 0

DOM Scripting


Edu Valente

Pergunta

Boa tarde gente. A dúvida é a seguinte: Por que elem2.nodeName está retornando null quando o script é executado? eu achei que o elemento <select> que tem como id "magazines" seria retornado.

Eu tenho um select com um id = "magazines"

e digitei: var elem2 = $("magazines");

quando chamei nodeName como elem2.nodeName , me foi retornado null.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href = "magazine.css" rel = "stylesheet" type = "text/css" />
&lt;script src = "magazine.js" type = "text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Magazines</title>
</head>
 <body>
  <div id = "content"> 
   <h1>Magazine Subscribing</h1>
   <form>
     <p><label for = "name">Name:</label>
        <input type = "text" id = "name" />
        <span class = "error" id = "nameError"></span>
     </p>
     <p><label for = "email">Email:</label>
        <input type = "email" id = "email" />
        <span class = "error" id = "emailError"></span>    
     </p>
      <p>
        <label for = "age">Age:</label>
        <input type = "text" id = "age" size = "2" maxlength = "2" />
        <span class = "error" id = "ageError"></span>     
      </p>
        <input type = "radio" name = "gender" id = "male" value = "male" /> Male 
        <span class = "error" id = "genderError"></span><br />
        <input type = "radio" name = "gender" id = "female" value = "female" /> Female
      <p>
      <select name = "magazines" id = "magazines" multiple = "multiple">
          <optgroup label = "Science">
             <option value = "sciam">Scientific American</option>
             <option value = "nature">Nature</option>
             <option value = "science">Science</option>
          </optgroup>             
          <optgroup label = "Technology">
             <option value = "wired">Wired</option>
             <option value = "arstechnica">Ars Technica</option>
             <option value = "javabox">Java Box</option>
         </optgroup>
        </select>
        <span class = "error" id = "magazineError"></span>
     </p>     
     <p><input type = "checkbox" name = "newsletter" id = "newsletter" />
        Check if you want to subscribe for our newsletter</p>
     <p><textarea name = "signatures" id = "signatures" rows = "7" cols = "40"></textarea></p>
     <label> </label>
     <input type = "button" id = "subscribe" value = "subscribe" />
   </form>
  </div>      
 </body>
</html>
// JavaScript Document

var $ = function(id)
{
    return document.getElementById(id);
}

var DOMTest = function()
{
   var node;
   var elem1 = $("name");
   document.write("Node name: " + elem1.nodeName + "<br>"); // INPUT 
   document.write("Node type: " + elem1.nodeType + "<br>"); // 1 
   document.write("Node value: " + elem1.nodeValue + "<br>"); // null
   document.write("Parent node: " + elem1.parentNode + "<br>"); // <p>
   
   document.write("Child nodes of " + elem1.nodeName + ":<br>");
   for(var i = 0; i < elem1.childNodes.length; i++)
   {
      node = elem1.childNodes[i];
      document.write(node.nodeName + "<br>"); 
   }
   
   document.write("<br>");
   
   var elem2 = $("magazines"); 
   
   document.write("Child nodes of " + elem2.nodeName + ":<br>"); // dá erro nessa linha dizendo que elem2 é null. Mas porquê?
   for(var i = 0; i < elem2.childNodes.length; i++)
   {
      node = elem2.childNodes[i];
      document.write(node.nodeName + "<br>"); 
   }
}

window.onload = DOMTest;

Editado por Edu Valente
Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

i aew Edu Valente, bom essa acho que é simples, quando você usa document.write sobrescreve todo o conteúdo do documento, sendo assim, quando você tenta

pegar o objeto select com id magazines, ele já não existe mais, pois já foi sobrescrito. Tente pegar o obejto magazines logo após pegar o obejto elem1.

Espero que ajude, abraço!

Link para o comentário
Compartilhar em outros sites

  • 0
quando você usa document.write sobrescreve todo o conteúdo do documento, sendo assim, quando você tenta

pegar o objeto select com id magazines, ele já não existe mais, pois já foi sobrescrito.

Ótima observação Romerito, eu não consegui enxergar isso. Além do mais, eu não sabia que o documento deixava de existir quando o método write era chamado. Muito obrigado :) .

Editado por Edu Valente
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...