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

j'ai code html suivant:

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

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

je les fais comme ça maintenant:

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

mais ça ne fonctionne pas sous IE(8)

comment faire autrement? jQuery est ok

Merci

26
demandé sur Burjua 2011-04-26 02:28:40

5 réponses

si jQuery est ok, vous pouvez utiliser find (). C'est l'équivalent de la façon dont tu le fais en ce moment.

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

utiliser ces méthodes pour obtenir quelque chose qui a déjà une identité est un peu étrange, mais je fournis ceux-ci en supposant que ce n'est pas vraiment comment vous prévoyez de l'utiliser.

sur une note secondaire, vous devriez savoir que les ID devraient être uniques dans votre page web. Si vous envisagez d'avoir plusieurs éléments avec le même "ID" envisager d'utiliser un nom de classe spécifique.

48
répondu Khez 2011-04-25 22:35:05
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);
4
répondu Gil Epshtain 2016-01-15 22:07:42

en utilisant jQuery

$('#note textarea');

ou

$('#textid');
1
répondu ataddeini 2011-04-25 22:32:00
(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
répondu Ankit Parmar 2017-02-01 06:39:42
$(selectedDOM).find();

fonction recherche d' 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 les éléments de l'arbre p ensemble. De l'autre côté,

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

Fonction recherche dans le DOMs enfants de L'objet DOM sélectionné. Donc, par ce code, vous obtiendrez juste paragraphe 1 et paragraphe 2. Il est si bénéfique d'empêcher le navigateur faire des progrès inutiles.

0
répondu efirat 2015-12-20 05:17:21