javascript通过id获取孩子

Question

<div onclick="test(this)">
    Test
    <div id="child">child</div>
</div>

我想在单击父div时更改子div的样式。我该如何参考？我希望能够通过ID引用它，因为父div中的html可能会改变，而孩子将不会是第一个孩子等。

function test(el){
  el.childNode["child"].style.display = "none";
}

像这样的东西，我可以通过id引用子节点并设置它的样式。

谢谢。

编辑：ID需要唯一的点。所以让我稍微修改一下我的问题。我不想为每个添加到页面的元素创建唯一的ID。父div是动态添加的。 （有点像页面注释系统）。然后有这个孩子div。我希望能够做到这样的事情：el.getElementsByName（“options”）。item（0）.style.display =“block”;

如果我用文档替换el，它工作正常，但它不会对页面上的每个“选项”子div。然而，我希望能够点击父div，并让子div做某事（例如离开）。

如果我必须动态创建一百万（夸大的）div ID，我会，但我宁愿不。有任何想法吗？

Answer 1

在现代浏览器（IE8，Firefox，Chrome，Opera，Safari）中，您可以使用querySelector()：

function test(el){
  el.querySelector("#child").style.display = "none";
}

对于较旧的浏览器（<= IE7），您必须使用某种类型的库（例如Sizzle）或框架（例如jQuery）来使用选择器。

如上所述，ID应该在文档中是唯一的，因此最简单的方法就是使用document.getElementById("child")。

Answer 2

这很好用：

function test(el){
  el.childNodes.item("child").style.display = "none";
}

如果item（）函数的参数是整数，则该函数将其视为索引。如果参数是字符串，则函数搜索元素的名称或ID。

Answer 3

如果孩子总是成为特定的标签，那么你就可以这样做

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

    }
  }
}

Answer 4

document.getElementById('child')应该返回正确的元素 - 请记住，id需要在文档中是唯一的，以使其无论如何都有效。

编辑：请参阅this page - ids必须是唯一的。

编辑编辑：解决问题的替代方法：

<div onclick="test('child1')">
    Test
    <div id="child1">child</div>
</div>

那么你只需要test（）函数来查找你传入的id元素。