javascript - 如何访问没有 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 所展示的，通过后代也是一个好方法。

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

在这里，我在具有 CSS class="myheader" 的 H1 元素的 div 中获取 H1 元素值：

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 。