使用Javascript - 獲取元素

Question

<div> 
    <p> 
     <a></a> 
    </p> 
</div> 

在上面的代碼，jQuery的，我們可以用$('div p a')得到<a>元素，但在JavaScript中，我們該怎麼辦得到<a>元素像$('div p a')？

更新2
如果我有很多<a>元素，我不知道具體<a>元素的索引，我只知道這個特定<a>元素是<div id="some">下，我怎麼能得到通過JavaScript中<a>元素？

Answer 1

你可以得到div然後在它JSFiddle example

HTML

<div> 
    <p> 
     <a></a> 
    </p> 
</div> 
<div id="some"> 
    <a href="#">my a tag</a> 
</div> 

得到a標籤的JavaScript

var elems = document.getElementById('some').getElementsByTagName('a'); 
alert(elems[0].innerHTML); 

Answer 2

如果您有更多信息，如元素的ID，您可以使用document.getElementById('id')。否則，你可以遍歷DOM樹，看到這一點：

• http://www.permadi.com/tutorial/domTree/index.html

您還可以使用XPath：

• https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript

XPath的，一起來看看在本教程中（實際上是本教程的示例部分）：

• http://www.w3schools.com/xpath/xpath_examples.asp

在您例如，XPath應該是：//div/p/a，這將選擇所有這樣的元素樹，如果有一個以上。

Answer 3

見法「document.getElementsByTagName」

http://www.w3schools.com/Dom/met_document_getelementsbytagname.asp

使用這種方法。你首先迭代所有div，然後在這些div上獲得所有的段落，然後對錨點進行相同的處理。

Answer 4

jQuery是Javascript;我認爲你的意思是標準的Javascript DOM功能。另外，最好使用jQuery：找出錯誤，而不是試圖重新發明輪子。有一件事會導致另一件事。從長遠來看，有一個像jQuery這樣的具體庫支持你會更好。如果您確實需要使用這樣的CSS3選擇器，請使用Sizzle library。 Sizzle是由jQuery組爲此創建的。 （我沒有與jQuery或Sizzle關聯，除非是滿意的用戶）。

Answer 5

這些天來，我們有：

1. document.querySelector
2. document.querySelectorAll

和這兩個可以以同樣的方式，jQuery不會獲得所需要的元素使用CSS選擇器。

var one = document.querySelector('#some span'); 
 
document.querySelectorAll('.resultLine')[0].innerHTML = 'We grabbed: "' + one.id + '" with querySelector(\'#some span\')'; 
 

 
var all = document.querySelectorAll('#some span'); 
 
var idList = ''; 
 
for (i = 0; i < all.length; i++) { 
 
    if (i>0) { 
 
    idList += ', ';  
 
    } 
 
    idList += '"' + all[i].id + '"' 
 
} 
 
document.querySelectorAll('.resultLine')[1].innerHTML = 'We grabbed: ' + idList + ' with querySelectorAll(\'#some span\')';

#result { 
 
    color: red; 
 
    background: black; 
 
    border: red 1px solid; 
 
} 
 
.resultLine { 
 
    display: block; 
 
}

<p id="some"> 
 
    <span id="one">1</span> 
 
    <span id="two">2</span> 
 
    <span id="three">3</span> 
 
</p> 
 
<p id="result"> 
 
    <span class="resultLine"></span> 
 
    <span class="resultLine"></span> 
 
</p>