如何訪問沒有ID的HTML元素？

例如在下面的代碼片段中 - 我如何訪問知道父元素（header-inner div）ID的h1元素？如何訪問沒有ID的HTML元素？

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

謝謝！

來源

2008-10-25 JohnIdol

你只是在尋找給定DIV的H1後代？或者你想通過類名來識別它？或者你是否特別感興趣的是找到一個帶有「標題」類的H1元素，它是DIV的一個子類，它有一個「titlewrapper」類，它又是ID爲「header-inner」的DIV的子元素？ – Shog9 2008-10-25 16:20:37

我只想在給定id的div內獲得h1（在我的case header-inner中） – JohnIdol 2008-10-25 16:26:20

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）（這會爲您節省大量時間來編寫這些東西，這有點棘手）。

來源

2008-10-25 16:31:00 Shog9

Cheers bud - 腳本看起來不錯，我會試一試並標記爲答案 – JohnIdol 2008-10-25 16:43:58

如何讀取h1值？ – firstpostcommenter 2018-01-05 12:16:15

如果你確信只有一個在你的DIV H1元素：

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

經歷的後裔，作爲Shog9表明，過於的好方法。

來源

2008-10-25 16:35:49

在這裏我得到了一個div的H1元素值，其中具有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。

來源

2008-10-25 16:38:53 mohammedn

與當前的標記做的最簡單的方法是：

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

這裏假設你的H1標籤始終是'header-inner'元素中的第一個。

來源

2008-10-25 16:42:16 domgblackwell

要獲取子節點，請使用obj.childNodes，它返回一個集合對象。

要獲得第一個孩子，請使用list[0]，它返回一個節點。

所以完整的代碼應該是：

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

如果要遍歷所有的孩子，比較，如果他們是一流的「稱號」，你可以重複使用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; 
    } 
}

來源

2008-10-25 16:45:50 RogueOne

如果你使用jQuery由一些海報所說，你可以訪問該元素很容易像這樣（雖然在技術上，這將返回匹配的元素集合如果有一個以上的H1後裔）：

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

使用庫如jQuery做這樣的事情微不足道相比，在其他帖子中提到的正常方式。然後，一旦你在jQuery對象中引用它，你可以使用更多的函數來輕鬆地操作它的內容和外觀。

來源

2008-10-25 16:56:16 patmortech

如何訪問沒有ID的HTML元素？

回答

相關問題