Javascriptを使用してリストから項目属性を引き出すのに問題がある

Question

私はページの項目のリストを持っていますが、その属性の一部（名前やリンクURLなど）を取得しようとしています。ここではリスト要素の例です：

私はこのことからタイトルを取得する方法を

<li class="item"> 
 
    <a href="http://URL.com" title="Title Item 1" class="image-URL"><img src="http://image.url.com" alt="Title Item 1"></a> 
 

 
    <div class="details"> 
 
     <p class="name"> 
 
      <a href="http://URL.com">Title Item 1</a> 
 
     </p> 
 
    
 
    </div> 
 
</li>

？

また、リンクを取得するが方法です私は（「名前」）item.findElementsByClassNameを呼び出すことができます知っているが、それは私の全体の要素を与え、代わりに単なるテキスト「タイトル項目1」

のURL（http://URL.com）も同様ですか？

Answer 1

querySelector()要素を使用してa要素を取得し、その要素にgetAttribute()を使用して、必要な属性を取得します。

DOMのすべての要素には、適切なobjectがあり、それを使用してそのプロパティにアクセスしてアクセスすることができます。

しかし、hrefとcontentには、それらを取得するのに適切なプロパティがあります。それらを得るには、hrefとtextContentのプロパティを使用してください。 querySelectorで

、あなたがid

var link = document.getElementById('myLink'); 
 

 
console.log(link.href, link.textContent);

<li class="item"> 
 
    <a href="http://URL.com" title="Title Item 1" class="image-URL"><img src="http://image.url.com" alt="Title Item 1"></a> 
 

 
    <div class="details"> 
 
     <p class="name"> 
 
      <a id="myLink" href="http://URL.com">Title Item 1</a> 
 
     </p> 
 
    
 
    </div> 
 
</li>

を設定している場合は、 getElementByIdで id

var link = document.querySelector('.details a'); 
 

 
console.log(link.href, link.textContent);

<li class="item"> 
 
    <a href="http://URL.com" title="Title Item 1" class="image-URL"><img src="http://image.url.com" alt="Title Item 1"></a> 
 

 
    <div class="details"> 
 
     <p class="name"> 
 
      <a href="http://URL.com">Title Item 1</a> 
 
     </p> 
 
    
 
    </div> 
 
</li>

を持っていない場合

なぜtextContentで、innerHTMLではなくプレーンテキストを使用するのですか？

innerHTML - コンテンツをHTMLとして解析して時間がかかります。

textContent - ストレートテキストを使用し、HTMLを解析せず、高速です。

Answer 2

<a id='someID' href="http://URL.com">Title Item 1</a> 

var url=document.getElementById("someID").getAttribute('href'); 
var title=document.getElementById("someID").textContent;