자바 스크립트 - 요소 가져 오기

Question

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

위의 코드에서 jQuery의 경우 $('div p a')을 사용하여 <a> 요소를 얻을 수 있지만 javascript에서는 $('div p a')과 같은 <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 태그를 얻을

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는 사용할 수 있습니다 XPath를 들어

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

이, 봐 이 튜토리얼 (실제로 튜토리얼의 예제 부분) :

당신의 예에서

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

는 XPath는해야한다 : //div/p/a 한 후 이상이있는 경우, 모든 등의 요소 트리를 선택할 것이다. 이 방법을 사용하여 참조 방법 'document.getElementsByTagName'

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

Answer 3

. 먼저 모든 div를 반복하고 div에서 모든 단락을 얻은 다음 앵커에 대해 동일한 작업을 수행합니다.

Answer 4

jQuery는 자바 스크립트입니다. 난 당신이 표준 자바 스크립트 DOM 기능을 의미한다고 생각합니다. 또한, jQuery를 사용하는 것이 더 좋습니다 : 바퀴를 다시 만들려고 시도하는 대신 잘못된 것을 찾으십시오. 한 가지는 다른 것으로 이어질 것입니다. JQuery와 같은 구체적인 라이브러리를 보유하는 것이 장기적으로 더 나을 것입니다. 이와 같이 CSS3 선택기를 실제로 사용해야하는 경우 Sizzle library을 사용하십시오. Sizzle은이 목적으로 jQuery 그룹에 의해 만들어졌습니다. (나는 jQuery 나 Sizzle과 관련이 없다. 만족스러운 사용자라는 것 말고는).

Answer 5

이 일을 얻을 수 있습니다 우리는이 :

, document.querySelectorAll

document.querySelector

이들 모두는 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>