達到一個HTML元素使用JavaScript沒有getElementById

我是JavaScript的新手。我創建了這個叫做colorme的div。我可以通過javascript成功着色。現在假設我想改變...或等的背景，我如何通過Javascript達到它？（沒有jQuery）。達到一個HTML元素使用JavaScript沒有getElementById

像document.getElementById（）將在div上工作，我達到它。現在我無法繼續給所有元素提供唯一的ID。我如何到達像或等內部元素？

<div id="colorme"> 
    <p>Blah Vblah Blah Content</p> 
    <span>Blah Vblah Blah Content</span> 
</div>

來源

2011-07-19 Aaditi Sharma

您可以使用您已經找到了爲getElementsByTagName上下文的元素。

var colorme = document.getElementById('colorme'), 
    spans = colorme.getElementsByTagName('span');

注意spans是一個節點列表 - 類似的陣列 - 包含內colorme所有span元素。如果您需要第一個（實際上是您的代碼示例中的唯一一個），請使用spans[0]。

來源

2011-07-19 12:30:35 lonesomeday

這很簡單：的getElementsByTagName（）？

來源

2011-07-19 12:28:50

你可以使用getElementsByTagName()

來源

2011-07-19 12:30:28

您應該查看標準javascript中提供的許多DOM遍歷函數。

教程：http://www.quirksmode.org/dom/intro.html

參考：http://reference.sitepoint.com/javascript/Node

和http://reference.sitepoint.com/javascript/Element

來源

2011-07-19 12:33:48

這裏有三種方式：

如果你只關心體面的瀏覽器，document.querySelector（返回第一個匹配節點）和document.querySelectorAll（返回一個NodeList） - 例如document.querySelector('#colorme p')。
HTMLElement.getElementsByTagName()（返回NodeList） - 例如， document.getElementById('colorme').getElementsByTagName('p')[0]
HTMLElement.children等 - document.getElementById('colorme').children[0]（.firstChild可能會是一個文本節點，很多有趣的東西DOM進入那裏，怪異模式DOM介紹掛鉤是好東西）。

來源

2011-07-19 12:33:53

遍歷孩子：

var div = document.getElementById('colorme'); 

var i, l, elem; 

for (i = 0, l = div.childNodes.length; i < l; i++) { 
    elem = div.childNodes[i]; 

    // Check that this node is an element 
    if (elem.nodeType === 1) { 
     elem.style.color = randomColorGenerator(); 
    } 
}

來源

2011-07-19 12:35:34

請注意，在較新的瀏覽器中，您可以通過'div.children'循環而不必檢查'nodeType'。 'children'集合僅包含'Element'對象，而'childNodes'包含所有節點類型（元素，文本節點，註釋節點等）。 –

在這種情況下，你可以使用：

var colormeDiv = document.getElementById('colorme'); 

var e1 = colormeDiv.getElementsByTagName('p'); 

var e2 = colormeDiv.getElementsByTagName('span');

進去'快樂米'格的兩個元素。

來源

2011-07-19 12:36:28 ascanio

儘管答案不給好辦法做到這一點對於這種特殊情況下....

你面臨的問題是所謂的DOM遍歷。正如你所知道的，DOM是一棵樹，事實上你可以在不知道元素id/type/whatever的情況下遍歷樹。

的基本情況如下

el.childNodes訪問兒童
el.parentNode的列表來訪問父元素
nextSibling和previousSibling爲下一個和以前的兄弟節點

對於更多信息，請參見[MDC DOM頁面]（

來源

2011-07-19 12:38:36

getElementById只是JavaScript的DOM方法之一。它返回一個HTMLElement DOM對象，然後可以查詢它來查找子對象，父對象和同級元素。你可以用它遍歷你的HTML並找到你需要的元素。這是一個reference for the JavaScript DOM HTMLObject。

來源

2011-07-19 12:39:23

-1

[回答後，我意識到這是沒有答案您充分解釋的問題，但它的答案，在您的文章的標題提出的問題！]這樣的

一個很好的方式聲明在你的Javascript的頂部全局變量引用該文件，然後可以在任何地方使用（在每個功能）：「）getElemenyById（」

<html> 
<head> 
<script type="text/javascript"> 

    // set a global var to acces the elements in the HTML document 
    var doc = this; 

    function testIt() 
    { 
     doc.blaat.innerHTML = 'It works!!'; 
    } 
</script> 
</head> 
<body> 
    <div id="blaat">Will this ever work..?!</div> 
    <button onclick="testIt()">Click me and you'll see!</button> 
</body> 
</html>

至於我的第一印象，當我到的是，它的聲音就像一個函數，它將遍歷DOM元素列表直到找到你需要的元素;這一定需要一些時間。通過上面的例子，您只需直接訪問該元素。我不確定我是否真的以這種方式節省CPU /增加速度，但至少是這種感覺:)

來源

2012-11-13 19:42:27

用戶想要到達沒有ID指向的元素。你的解決方案就像getElementById函數，因爲你需要知道這個id。此外，您應該使用getElementById而不是您的解決方案。總之，超出範圍。 – sdespont

達到一個HTML元素使用JavaScript沒有getElementById

回答

相關問題