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">, как я могу получить <a> элемент по JavaScript?

Answer 1

вы можете получить div затем получить a тег в нем JSFiddle example

HTML

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

код JavaScript

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

Answer 2

Если у вас есть дополнительная информация, например идентификаторы элементов, вы можете использовать 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

С помощью этого метода. Сначала вы должны перебрать все divs, и на этих divs получите все абзацы, а затем одно и то же для якорей.

Answer 4

jQuery - это Javascript; Я думаю, вы имели в виду стандартные функции DOM Javascript. Кроме того, для этого лучше использовать jQuery: выяснить, что не так, вместо того, чтобы пытаться изобретать колесо. Одно приведет к другому. В конечном итоге будет лучше иметь конкретную библиотеку, такую ​​как jQuery, поддерживающая вас. Если вам действительно нужно использовать селектор CSS3, как это, используйте Sizzle library. Sizzle была создана группой jQuery для этой цели. (Я не связан с jQuery или Sizzle, за исключением того, что я доволен пользователем).

Answer 5

В эти дни мы имеем:

1. document.querySelector
2. document.querySelectorAll

и оба из них могут использовать CSS селекторы таким же образом, что JQuery делает для того чтобы получить необходимые элементы.

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>