使用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>