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

Question

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

谢谢

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;

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);

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>

Answer 4

使用 jQuery

$('#note textarea');

或者只是

$('#textid');

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 段。防止浏览器执行不必要的操作非常有益。