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

Question

例如,在下面的代码片段中 - 如何在知道父元素ID(header-inner div)的情况下访问h1元素？

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

谢谢!

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(这会节省你很多时间写这些东西,它有点棘手).

Answer 2

如果您使用某些海报中提到的jQuery,您可以非常轻松地访问该元素(尽管从技术上讲,如果有多个H1后代,这将返回匹配元素的集合):

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

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

Answer 3

如果您确定div中只有一个H1元素：

var parent = document.getElementById('header-inner');
var element = parent.GetElementsByTagName('h1')[0];

正如Shog9所展示的，经过后代也是一种好方法。