如何在 JavaScript 中通过 ID 获取子元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5783969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get child element by ID in JavaScript?
提问by Burjua
I have following html:
我有以下html：
<div id="note">
<textarea id="textid" class="textclass">Text</textarea>
</div>
How can I get textarea element? I can't use document.getElementById("textid")for it
如何获取 textarea 元素？我不能用document.getElementById("textid")它
I'm doing it like this now:
我现在是这样做的：
var note = document.getElementById("note");
var notetext = note.querySelector('#textid');
but it doesn't work in IE(8)
但它在 IE(8) 中不起作用
How else I can do it? jQuery is ok
我还能怎么做？jQuery 没问题
Thanks
谢谢
回答by Khez
If jQuery is okay, you can use find(). It's basically equivalent to the way you are doing it right now.
如果 jQuery 没问题，你可以使用find()。它基本上等同于您现在的做法。
$('#note').find('#textid');
You can also use jQuery selectors to basically achieve the same thing:
您还可以使用 jQuery 选择器来基本上实现相同的功能：
$('#note #textid');
Using these methods to get something that already has an ID is kind of strange, but I'm supplying these assuming it's not really how you plan on using it.
使用这些方法来获取已经有 ID 的东西有点奇怪，但我提供这些方法是假设它不是你打算如何使用它。
On a side note, you should know ID's should be unique in your webpage. If you plan on having multiple elements with the same "ID" consider using a specific class name.
附带说明一下，您应该知道 ID 在您的网页中应该是唯一的。如果您计划让多个元素具有相同的“ID”，请考虑使用特定的类名。
Update 2020.03.10
2020.03.10 更新
It's a breeze to use native JS for this:
为此使用原生 JS 是轻而易举的：
document.querySelector('#note #textid');
If you want to first find #notethen #textidyou have to check the first querySelector result. If it fails to match, chaining is no longer possible :(
如果要先查找，#note则#textid必须检查第一个 querySelector 结果。如果匹配失败，则不再可能进行链接:(
var parent = document.querySelector('#note');
var child = parent ? parent.querySelector('#textid') : null;
回答by Gil Epshtain
Here is a pure JavaScript solution (without jQuery)
这是一个纯 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;
Example of use:
使用示例：
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);
回答by Ankit Parmar
(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>
回答by ataddeini
Using jQuery
使用 jQuery
$('#note textarea');
or just
要不就
$('#textid');
回答by efirat
$(selectedDOM).find();
function looking for all dom objects inside the selected DOM. i.e.
函数在选定的 DOM 中查找所有 dom 对象。IE
<div id="mainDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div id="innerDiv">
<a href="#">link</a>
<p>Paragraph 3</p>
</div>
</div>
here if you write;
如果你写在这里；
$("#mainDiv").find("p");
you will get tree p elements together. On the other side,
你将得到树 p 元素。另一方面，
$("#mainDiv").children("p");
Function searching in the just children DOMs of the selected DOM object. So, by this code you will get just paragraph 1and paragraph 2. It is so beneficial to prevent browser doing unnecessary progress.
在所选 DOM 对象的子 DOM 中进行函数搜索。因此，通过此代码，您将只获得第 1段和第 2 段。防止浏览器做不必要的进步是非常有益的。
