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所示，经历后代也是一个好方法。

Answer 4

使用当前标记执行此操作的最简单方法是：

document.getElementById('header-inner').getElementsByTagName('h1')[0].innerHTML = 'new text';

这假设您的H1标签始终是'header-inner'元素中的第一个。

Answer 5

要获取子节点，请使用obj.childNodes，它返回一个集合对象。

要获得第一个孩子，请使用返回节点的list[0]。

所以完整的代码应该是：

var div = document.getElementById('header-inner');
var divTitleWrapper = div.childNodes[0];
var h1 = divTitleWrapper.childNodes[0];

如果要迭代所有子节点，比较它们是否为“title”类，则可以使用for循环和className属性进行迭代。

代码应为：

var h1 = null;
var nodeList = divTitleWrapper.childNodes;
for (i =0;i < nodeList.length;i++){
    var node = nodeList[i];
    if(node.className == 'title' && node.tagName == 'H1'){
        h1 = node;
    }
}

Answer 6

这里我得到一个div中的H1元素值，其中H1元素具有CSS class =“myheader”：

var nodes = document.getElementById("mydiv")
                    .getElementsByTagName("H1");

for(i=0;i<nodes.length;i++)
{
    if(nodes.item(i).getAttribute("class") == "myheader")
        alert(nodes.item(i).innerHTML);
}

这是标记：

<div id="mydiv">
   <h1 class="myheader">Hello</h1>
</div>

如果您需要对DOM进行大量解析，我还建议使用jQuery。

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

6 个答案: