如何访问没有 ID 的 HTML 元素？

Question

例如在下面的代码片段中——如何访问知道父元素（header-inner div）ID 的 h1 元素？

 <div id='header-inner'>
   <div class='titlewrapper'>
      <h1 class='title'>
      Some text I want to change
      </h1>
   </div>
</div>

谢谢！

原文由 JohnIdol 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

function findFirstDescendant(parent, tagname)
{
   parent = document.getElementById(parent);
   var descendants = parent.getElementsByTagName(tagname);
   if ( descendants.length )
      return descendants[0];
   return null;
}

var header = findFirstDescendant("header-inner", "h1");

查找具有给定 ID 的元素，查询具有给定标签名称的后代，返回第一个。您还可以循环 descendants 以按其他条件进行过滤；如果您开始朝着那个方向前进，我建议您检查一个预构建的库，例如 jQuery（这会为您节省大量编写这些东西的时间，它有点棘手）。

原文由 Shog9 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

如果你像一些发帖者提到的那样使用 jQuery ，你可以像这样很容易地访问元素（尽管从技术上讲，如果有多个 H1 后代，这将返回一组匹配元素）：

 var element = $('#header-inner h1');

与其他帖子中提到的常规方法相比，使用像 JQuery 这样的库可以使这样的事情变得微不足道。然后，一旦您在 jQuery 对象中引用了它，您就可以使用更多的函数来轻松地操作它的内容和外观。

原文由 patmortech 发布，翻译遵循 CC BY-SA 2.5 许可协议