例如，在下面的代码段中 - 如何在知道父元素（header-inner div）的 ID 的情况下访问 h1 元素？
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Some text I want to change
</h1>
</div>
</div>
谢谢！
如何访问没有 ID 的 HTML 元素？
IT技术
javascript
dom
xhtml
2021-03-16 18:02:04
6个回答
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（会为您节省大量时间来编写这些东西，它会变得有些棘手）。
如果你像一些海报提到的那样使用jQuery，你可以像这样很容易地访问元素（尽管从技术上讲，如果有多个 H1 后代，这将返回匹配元素的集合）：
var element = $('#header-inner h1');
与其他帖子中提到的正常方式相比，使用像 JQuery 这样的库使这样的事情变得微不足道。然后，一旦您在 jQuery 对象中引用了它，您就可以使用更多函数来轻松操纵其内容和外观。
如果您确定 div 中只有一个 H1 元素：
var parent = document.getElementById('header-inner');
var element = parent.GetElementsByTagName('h1')[0];
像 Shog9 展示的那样，通过后代也是一个好方法。
使用当前标记执行此操作的最简单方法是：
document.getElementById('header-inner').getElementsByTagName('h1')[0].innerHTML = 'new text';
这假设您的 H1 标签始终是'header-inner'元素中的第一个标签。
要获取子节点，请使用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;
}
}