javascript 通过 id 获取孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2899072/
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
javascript get child by id
提问by Senica Gonzalez
<div onclick="test(this)">
Test
<div id="child">child</div>
</div>
I want to change the style of the child div when the parent div is clicked. How do I reference it? I would like to be able to reference it by ID as the the html in the parent div could change and the child won't be the first child etc.
我想在单击父 div 时更改子 div 的样式。我如何引用它？我希望能够通过 ID 引用它，因为父 div 中的 html 可能会更改，并且孩子不会是第一个孩子等。
function test(el){
el.childNode["child"].style.display = "none";
}
Something like that, where I can reference the child node by id and set the style of it.
类似的东西，我可以通过 id 引用子节点并设置它的样式。
Thanks.
谢谢。
EDIT: Point taken with IDs needing to be unique. So let me revise my question a little. I would hate to have to create unique IDs for every element that gets added to the page. The parent div is added dynamically. (sort of like a page notes system). And then there is this child div. I would like to be able to do something like this: el.getElementsByName("options").item(0).style.display = "block";
编辑：使用 ID 需要唯一的点。所以让我稍微修改一下我的问题。我不想为添加到页面的每个元素创建唯一的 ID。父 div 是动态添加的。（有点像页面注释系统）。然后是这个子div。我希望能够做这样的事情： el.getElementsByName("options").item(0).style.display = "block";
If I replace el with document, it works fine, but it doesn't to every "options" child div on the page. Whereas, I want to be able to click the parent div, and have the child div do something (like go away for example).
如果我用文档替换 el ，它工作正常，但它不适用于页面上的每个“选项”子 div。然而，我希望能够单击父 div，并让子 div 做一些事情（例如离开）。
If I have to dynamically create a million (exaggerated) div IDs, I will, but I would rather not. Any ideas?
如果我必须动态创建一百万个（夸张的）div ID，我会，但我宁愿不要。有任何想法吗？
回答by Andy E
In modern browsers (IE8, Firefox, Chrome, Opera, Safari) you can use querySelector():
在现代浏览器（IE8、Firefox、Chrome、Opera、Safari）中，您可以使用querySelector()：
function test(el){
el.querySelector("#child").style.display = "none";
}
For older browsers (<=IE7), you would have to use some sort of library, such as Sizzleor a framework, such as jQuery, to work with selectors.
对于较旧的浏览器 (<=IE7)，您必须使用某种库，例如Sizzle或框架，例如jQuery，才能使用选择器。
As mentioned, IDs are supposed to be unique within a document, so it's easiest to just use document.getElementById("child").
如前所述，ID 在文档中应该是唯一的，因此最简单的方法是使用document.getElementById("child").
回答by Eugene
This works well:
这很有效：
function test(el){
el.childNodes.item("child").style.display = "none";
}
If the argument of item() function is an integer, the function will treat it as an index. If the argument is a string, then the function searches for name or ID of element.
如果 item() 函数的参数是整数，则函数会将其视为索引。如果参数是字符串，则该函数搜索元素的名称或 ID。
回答by Gabriele Petrioli
If the child is always going to be a specific tag then you could do it like this
如果孩子总是要成为一个特定的标签，那么你可以这样做
function test(el)
{
var children = el.getElementsByTagName('div');// any tag could be used here..
for(var i = 0; i< children.length;i++)
{
if (children[i].getAttribute('id') == 'child') // any attribute could be used here
{
// do what ever you want with the element..
// children[i] holds the element at the moment..
}
}
}
回答by chris
document.getElementById('child')should return you the correct element - remember that id's need to be unique across a document to make it valid anyway.
document.getElementById('child')应该返回正确的元素 - 请记住，id 在整个文档中必须是唯一的，以使其有效。
edit : see this page- ids MUST be unique.
编辑：请参阅此页面- ID 必须是唯一的。
edit edit : alternate way to solve the problem :
编辑编辑：解决问题的替代方法：
<div onclick="test('child1')">
Test
<div id="child1">child</div>
</div>
then you just need the test() function to look up the element by id that you passed in.
那么你只需要 test() 函数来通过你传入的 id 查找元素。
