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

    }
  }
}