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

Question

我有以下HTML代码：

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

我该如何获取文本域元素？我不能像这样使用document.getElementById("textid")来获取它。

我目前是这样做的：

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

但是在IE(8)中它不起作用。

我还有什么其他方法可以做到这一点？jQuery可以吗？

谢谢

- Burjua

---

你为什么不能使用 document.getElementById("textid") 呢？如果你可以使用 querySelector('#textid')，那么另一个方法也应该是可行的。如果你有多个具有相同 ID 的元素……那么你必须更改它们。 - Felix Kling

是的，我正在尝试让这个元素改变它的ID，我还需要对它进行一些其他操作，这就是为什么我想把它放在变量中的原因。 - Burjua

那并没有真正回答我的问题。 - Felix Kling

改变元素的id通常是一个糟糕的主意。状态更好地通过类或数据来处理。 - Quentin

Answer 1

如果您使用jQuery，可以使用find（）。它基本上相当于您目前所做的方式。

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

你也可以使用jQuery选择器来基本实现相同的功能：

$('#note #textid');

使用这些方法来获取已经有ID的东西有点奇怪，但我提供这些假设您不会真的这样使用它。

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

更新2020.03.10

使用原生JS非常容易：

document.querySelector('#note #textid');

如果你想先找到#note再找到#textid，你需要检查第一个querySelector的结果。如果匹配失败，那么就无法进行链式操作了 :(

var parent = document.querySelector('#note');
var child = parent ? parent.querySelector('#textid') : null;

- Khez

Answer 2

这里提供了一个纯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);

- Gil Epshtain

---

修改对象原型并不是一个好主意，也不确定为什么会以这种方式获取ID，因为它可能比document.getElementById慢。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain?redirectlocale=en-US&redirectslug=JavaScript%2FGuide%2FInheritance_and_the_prototype_chain#Bad_practice.3A_Extension_of_native_prototypes - HMR

document.getElementById是解决方案，当然！但是如果您的元素尚未附加到文档中，此方法将无法工作。而且，在所有元素上都未定义使用element.getElementById。如果您可以通过getElementById获得预期的结果，请使用它，但并非总是如此。关于对象原型，我接受您的评论，并编辑了答案，使函数不会成为对象方法的一部分，谢谢。 - Gil Epshtain

Answer 3

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

- Ankit Parmar

Answer 4

使用jQuery

$('#note textarea');

或者只是

$('#textid');

- ataddeini

Answer 5

$(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");

你将会得到三个p元素。另一方面，

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

在所选 DOM 对象的子 DOM 中搜索函数。因此，通过此代码，您将仅获取段落1和段落2。这对于防止浏览器执行不必要的进程非常有益。

- efirat