如何訪問沒有 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 。

Answer 7

自從提出和回答這個問題以來已經有幾年了。 在現代 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>