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，它可以正常工作，但它不会对页面上的每个“options”子div都有效。然而，我希望能够点击父div，并让子div做某事（例如离开）。

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

Answer 1

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

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

对于较旧的浏览器（＆lt; = 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元素。

javascript通过id获取孩子

4 个答案: