javascript 通过 id 获取孩子答案

【问题标题】：javascript get child by idjavascript 通过 id 获取孩子
【发布时间】：2010-05-24 17:57:38
【问题描述】：

<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，我会这样做，但我宁愿不这样做。有什么想法吗？

【问题讨论】：

另外，我不能做 document.getElementById("child") 因为页面上可能有多个“child” id。
页面上不能有多个相同的 id... - 请参阅 w3schools.com/tags/att_standard_id.asp
同一页面上不能有相同 ID 的元素。如果是 css，请尝试使用类。
好的，那我可以按名字来做吗？例如，在我的函数中使用：el.getElementByName 什么的。我只需要引用父>子。孩子需要具体。

标签： javascript

【解决方案1】：

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

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

对于旧版浏览器 (Sizzle）或框架（例如 jQuery）来处理选择器。

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

【讨论】：

太棒了！通过使用解决：el.querySelector('div[name="options"]').style.display = "block";很高兴学习新功能。

【解决方案2】：

这很好用：

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

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

【讨论】：

根据 [w3shools.com][w3schools.com/jsref/met_nodelist_item.asp] item 仅支持数字（索引）参数
它也支持字符串。
嗯..不要相信这个。询问“TXT_div_8”并得到“TXT_div_7” - 因此它与传递给 chrome 中项目的文本中的 id 不匹配。

【解决方案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..

    }
  }
}

【讨论】：

【解决方案4】：

document.getElementById('child') 应该会返回正确的元素 - 请记住，id 在整个文档中必须是唯一的才能使其有效。

编辑：参见this page - id 必须是唯一的。

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

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

那么你只需要 test() 函数通过你传入的 id 来查找元素。

【讨论】：

嘿，对不起。我在我的帖子上添加了评论。我需要它特定于父 div，而不是整个文档。我听到你在用 ID 说什么......但为了争论，有没有其他方法可以做到这一点？
已编辑答案以添加另一种方法来执行此操作。希望能帮助到你！ :)

【解决方案5】：

如果要查找特定的子 DOM 元素，请使用方法 querySelectorAll

var $form = document.getElementById("contactFrm");

在 $form 变量中我们可以搜索我们想要的子元素:)

关于如何使用querySelectorAll的更多细节check this page

【讨论】：