web-dev-qa-db-fra.com

Comment obtenir un élément enfant par ID en JavaScript?

J'ai html suivant:

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

Comment puis-je obtenir un élément textarea? Je ne peux pas utiliser document.getElementById("textid") pour cela

Je le fais comme ça maintenant:

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

mais ça ne marche pas dans IE (8)

Sinon, comment puis-je le faire? jQuery est ok

Merci 

javascriptjqueryelement
28
Burjua

Si jQuery est correct, vous pouvez utiliser find () . C'est fondamentalement équivalent à la façon dont vous le faites en ce moment.

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

Vous pouvez également utiliser les sélecteurs jQuery pour obtenir essentiellement la même chose:

$('#note #textid');

Utiliser ces méthodes pour obtenir quelque chose qui a déjà un identifiant est assez étrange, mais je les fournis en supposant que ce n'est pas vraiment comment vous prévoyez de l'utiliser.

Sur une note de côté, vous devez savoir que les identifiants doivent être uniques dans votre page Web. Si vous envisagez d'avoir plusieurs éléments avec le même "ID", envisagez d'utiliser un nom de classe spécifique.

50
Khez

Voici une solution JavaScript pure (sans 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;

Exemple d'utilisation:

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);
5
Gil Epshtain
(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>
1
Ankit Parmar

Utiliser jQuery

$('#note textarea');

ou juste

$('#textid');
1
ataddeini
$(selectedDOM).find();

fonction recherchant tous les objets dom à l’intérieur du DOM sélectionné . i.e. 

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

ici si vous écrivez;

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

vous obtiendrez des éléments d'arbre p ensemble. D'un autre côté, 

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

Recherche de fonction dans les DOM juste enfants de l'objet DOM sélectionné . Donc, par ce code, vous obtiendrez juste paragraphe 1 et paragraphe 2 . Il est si avantageux d’empêcher le navigateur de faire des progrès inutiles.

0
efirat