web-dev-qa-db-ja.com

JavaScriptでIDで子要素を取得する方法は？

私は次のhtmlを持っています：

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

Textarea要素を取得するにはどうすればよいですか？ document.getElementById("textid")を使用できません

私は今このようにやっています：

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

しかし、IE（8）では機能しません

他にどのようにそれを行うことができますか？ jQueryは大丈夫です

ありがとう

javascriptjqueryelement
28
Burjua

JQueryに問題がない場合は、 find（） を使用できます。基本的には、現在の方法と同じです。

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

JQueryセレクターを使用して、基本的に同じことを実現することもできます。

$('#note #textid');

これらのメソッドを使用して既にIDを持っているものを取得するのはちょっと奇妙ですが、実際に使用する方法ではないと仮定してこれらを提供しています。

補足として、IDはWebページ内で一意でなければなりません。同じ「ID」を持つ複数の要素を使用する予定がある場合は、特定のクラス名の使用を検討してください。

49
Khez

これが純粋なJavaScriptソリューションです（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;

使用例：

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

JQueryを使用する

$('#note textarea');

あるいは単に

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

選択したDOM内のすべてのdomオブジェクトを探す関数。つまり.

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

ここに書いたら

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

tree p要素を一緒に取得します。反対側では、

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

ちょうど選択したDOMオブジェクトの子DOMで検索する関数。したがって、このコードではparagraph 1およびparagraph 2のみが得られます。ブラウザが不必要に進行するのを防ぐことは非常に有益です。

0
efirat