Javascript - 要素を取得する

Question

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

上記のコードでは、jQueryの場合は$('div p a')を使用して<a>要素を取得できますが、javascriptでは$('div p a')のような<a>要素を取得するにはどうすればよいですか？

<a> 更新された2
私は多くの <a>要素を持っていて、特定の <a>要素のインデックスがわからない場合、この特定の <a>要素が <div id="some">の下にあることを知っているだけですが、どうすればjavascriptで <a>要素を取得できますか？

Answer 1

あなたのJavaScriptに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')を使用できます。 xpathの

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

、見てみましょう：あなたはまた、XPathを使用することができます

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

：そうでなければ、あなたはこれを見、DOMツリーをトラバースすることができますこのチュートリアル（実際にチュートリアルのサンプル部分）：

あなたの例では

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

は、XPathは次のようになります。 //div/p/a、1、より多くがある場合は、 すべてな要素ツリーを選択しますました。この方法を使用するを参照してください方法「document.getElementsByTagName」

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

Answer 3

。最初にすべてのdivを繰り返し、そのdivですべての段落を取得し、次にアンカーに対して同じことを行います。

Answer 4

jQueryはJavascriptです。私はあなたが標準のJavascript DOM関数を意味すると思います。また、jQueryを使用する方がよいでしょう。ホイールを再作成しようとするのではなく、何が間違っているかを調べることです。 1つのことは別のものにつながるでしょう。長期的には、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>