如何在JavaScript中通过ID获取子元素?

时间:2011-04-25 22:28:40

标签: javascript jquery element

我有以下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没问题

谢谢

4 个答案:

答案 0 :(得分:49)

如果jQuery没问题,你可以使用find()。它基本上等同于你现在的方式。

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

你也可以使用jQuery选择器基本上实现同样的目的:

$('#note #textid');

使用这些方法来获取已经拥有ID的内容有点奇怪,但我提供的是假设它并不是你打算如何使用它。

在旁注中,您应该知道ID在您的网页中应该是唯一的。如果您计划使用具有相同“ID”的多个元素,请考虑使用特定的类名。

答案 1 :(得分:5)

这是一个纯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);

答案 2 :(得分:1)

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

答案 3 :(得分:0)

使用jQuery

$('#note textarea');

或只是

$('#textid');