如何在没有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

---

你只是在寻找给定DIV的H1后代吗？还是您想通过类名来识别它？或者您特别想找到一个具有“title”类的H1元素，它是具有“titlewrapper”类的DIV的子级，而“titlewrapper”又是具有id“header-inner”的DIV的子级？ - Shog9

我只想能够在给定id的div中获取h1（在我的情况下是header-inner）。 - JohnIdol

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

---

谢谢伙计，这个脚本看起来很棒，我会试一下并标记为答案。 - JohnIdol

这是一个非常延迟的问题，但我如何确定我想要第一、第二、第三或更多的后代？ - Brandon_J

完全取决于您的需求，@brandon - 也许您想要突出显示特定段落，也许您正在寻找具有特定内容位的子元素。 - Shog9

@Shog9 我正在寻找一个特定内容的子元素。 - Brandon_J

Answer 2

如果你使用了一些帖子中提到的jQuery，那么你可以很容易地访问该元素，如下所示（虽然在技术上，如果有多个H1后代，则会返回匹配元素的集合）：

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

使用类似JQuery的库相对于其他帖子中提到的常规方法来说，这样做会让事情变得微不足道。然后，一旦您在jQuery对象中引用它，您甚至可以使用更多函数来轻松操作其内容和外观。

- patmortech

Answer 3

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

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

穿越后代，就像Shog9所展示的那样，也是一个很好的方法。

- buti-oxa

---

大小写很重要：getElementsByTagName（小写“g”） - Heretic Monkey

Answer 4

这个问题已经被提出和回答了几年。在现代的DOM中，你可以使用querySelector：

document.querySelector('#header-inner h1').textContent = 'Different text';

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

- Heretic Monkey

Answer 5

使用当前标记的最简单方法是：

document.getElementById('header-inner').getElementsByTagName('h1')[0].innerHTML = '新文本';

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

- domgblackwell

---

这应该是：document.getElementById('header-inner').getElementsByTagName('h1')[0].firstChild.nodeValue = '新文本'; - roenving

Answer 6

要获取子节点，请使用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;
    }
}

- RogueOne

Answer 7

这里我在一个div中获取具有CSS类“myheader”的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。

- mnour