2011-04-25 33 views
21

He código HTML siguiente:¿Cómo obtener elemento hijo por ID en JavaScript?

<div id="note"> 
<textarea id="textid" class="textclass">Text</textarea> 
</div> 

¿Cómo puedo obtener elemento de área de texto? No puedo utilizar para ello document.getElementById("textid")

lo estoy haciendo así ahora:

var note = document.getElementById("note"); 
var notetext = note.querySelector('#textid'); 

pero no funciona en IE (8)

¿Cómo, si yo puedo hacerlo? jQuery es bien

Gracias

+2

Cualquier razón por la que no se puede hacer 'document.getElementById (" textid ")'?Si puede hacer 'querySelector ('# textid')' entonces el otro también debería ser posible. Si tiene múltiples elementos con la misma ID ... bueno, debe cambiar eso. –

+0

Sí, estoy intentando que este elemento cambie su ID, también tengo que hacer otras acciones en él, es por eso que lo quiero en var. – Burjua

+3

Eso realmente no responde mi pregunta. –

Respuesta

40

Si jQuery está bien, puede utilizar find(). Es básicamente equivalente a la forma en que lo está haciendo en este momento.

$('#note').find('#textid'); 

También puede utilizar los selectores de jQuery para lograr básicamente la misma cosa:

$('#note #textid'); 

El uso de estos métodos para conseguir algo que ya tiene un ID es un poco extraño, pero estoy suponiendo que el suministro de estos no es realmente cómo planeas usarlo.

Como nota al margen, debe saber que las identificaciones deben ser únicas en su página web. Si planeas tener varios elementos con el mismo "ID", considera usar un nombre de clase específico.

1

Usando jQuery

$('#note textarea'); 

o simplemente

$('#textid'); 
3

Aquí es una solución JavaScript puro (sin jQuery)

var _Utils = function() 
{ 
    this.findChildById = function (element, childID, isSearchInnerDescendant) // isSearchInnerDescendant <= true for search in inner childern 
    { 
     var retElement = null; 
     var lstChildren = isSearchInnerDescendant ? Utils.getAllDescendant(element) : element.childNodes; 

     for (var i = 0; i < lstChildren.length; i++) 
     { 
      if (lstChildren[i].id == childID) 
      { 
       retElement = lstChildren[i]; 
       break; 
      } 
     } 

     return retElement; 
    } 

    this.getAllDescendant = function (element, lstChildrenNodes) 
    { 
     lstChildrenNodes = lstChildrenNodes ? lstChildrenNodes : []; 

     var lstChildren = element.childNodes; 

     for (var i = 0; i < lstChildren.length; i++) 
     { 
      if (lstChildren[i].nodeType == 1) // 1 is 'ELEMENT_NODE' 
      { 
       lstChildrenNodes.push(lstChildren[i]); 
       lstChildrenNodes = Utils.getAllDescendant(lstChildren[i], lstChildrenNodes); 
      } 
     } 

     return lstChildrenNodes; 
    }   
} 
var Utils = new _Utils; 

Ejemplo de uso:

var myDiv = document.createElement("div"); 
myDiv.innerHTML = "<table id='tableToolbar'>" + 
         "<tr>" + 
          "<td>" + 
           "<div id='divIdToSearch'>" + 
           "</div>" + 
          "</td>" + 
         "</tr>" + 
        "</table>"; 

var divToSearch = Utils.findChildById(myDiv, "divIdToSearch", true); 
+0

No es una buena idea cambiar el prototipo de objeto y no estoy seguro de por qué lo haría, de una forma tal que probablemente sea más lento que document.getElementById https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Inheritance_and_the_prototype_chain? Redirectlocale = en-US & redirectslug = JavaScript% 2FGuide% 2FInheritance_and_the_prototype_chain # Bad_practice.3A_Extension_of_native_prototypes – HMR

+4

document.getElementById es la solución, ¡maldición !. Sin embargo, si su elemento NO se ha adjuntado aún al documento, este método no funcionará. Y para usar element.getElementById no está definido en todos los elementos. Si puede obtener el resultado exceptuado con getElementById, anímelo, sin embargo, no siempre es así. En cuanto al prototipo del objeto, acepto tu comentario, y edito la respuesta, por lo que la función no será parte de los métodos del objeto, gracias. –

0
$(selectedDOM).find(); 

función buscando todos los objetos DOM en el interior del DOM seleccionado. decir

<div id="mainDiv"> 
    <p>Paragraph 1</p> 
    <p>Paragraph 2</p> 
    <div id="innerDiv"> 
     <a href="#">link</a> 
     <p>Paragraph 3</p> 
    </div> 
</div> 

aquí si se escribe;

$("#mainDiv").find("p"); 

obtendrá elementos tree p juntos. Por otro lado,

$("#mainDiv").children("p"); 

función de búsqueda en los niños sólo DOM del objeto DOM seleccionado. Por lo tanto, con este código obtendrá párrafo 1 y párrafo 2. Es muy beneficioso evitar que el navegador avance innecesariamente.

0
(Dwell in atom) 

<div id="note"> 

    <textarea id="textid" class="textclass">Text</textarea> 

</div> 

<script type="text/javascript"> 

    var note = document.getElementById('textid').value; 

    alert(note); 

</script> 
Cuestiones relacionadas