¿Cómo obtener elemento hijo por ID en JavaScript?

Question

He código HTML siguiente:

<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

Answer 1

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.

Answer 2

Usando jQuery

$('#note textarea'); 

o simplemente

$('#textid'); 

Answer 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); 

Answer 4

$(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.

Answer 5

(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>