如何在DOM中找到鏈接並轉到它們

Question

嗨網址href =「＃locations/16381/schedules？ 這是href屬性的值嗎？right 對於a元素「一」？右

如果我想與屬性數據原標題找到「a」元素=「時間表」 是有可能得到這個HREF？

我document.getElementById() document.getElementsByTagName() 轉身等等...我完全失去了..（我不得不說我只是在這個時候學習JS :)

這裏DOM：

<div id="filter-region" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"><div> 
</div></div> 
<div id="list-region" class="col-lg-9 col-md-9 col-sm-9 col-xs-12"><div><div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><div class="well"> 
    <div class="media"> 
    <div class="media-left media-middle"> 
     <a href="#locations/16381"><img src="https://api.staffomaticapp.com/system/logos/16381/api/Picture1.png?1451550438" width="51" height="51" class="img 
-rounded media-object"></a> 
    </div> 
    <div class="media-body"> 
     <h4 class="location-name"><a href="#locations/16381">Vélo</a></h4> 
    </div> 
    </div> 
    <ul class="clearfix list-inline location-navigation"><li><a title="" href="#locations/16381" data-original-title="Dashboard"> 
    <i class="fa fa-tachometer fa-lg fa-fw"></i> 
    <span class="text">Dashboard</span> 
</a> 
</li><li><a title="" href="#locations/16381/schedules" data-original-title="Schedules"> 
    <i class="fa fa-calendar fa-lg fa-fw"></i> 
    <span class="text">Schedules</span> 
</a> 
</li><li><a title="" href="#locations/16381/absences" data-original-title="Absences"> 
    <i class="fa fa-plane fa-lg fa-fw"></i> 
    <span class="text">Absences</span> 
</a> 
``` 

我嘗試幾乎每document.getElement（）我能找到笑... 我嘗試的人說很容易... 但一切都在混合起來，以學習jQuery同時我的吸菸的頭...

我的線索是，我必須和父母和孩子一起玩
才能找到我的「a」元素......但沒有足夠清楚......就是這樣？

另外，如果有人得了「THE」教程或小抄DOM玩（但從客戶端點）我沒有找到一個讓我非常瞭解

感謝

編輯： （18）.click（）去的網址是的jQuery的使它

（$）'（'''''）'$（'TagOfTheNode）給我$（'a'）。但仍然如何能找到它與數據原始標題=「計劃」？並在嚴格的JS？

在同一篇文章中講述所有訪問DOM中元素的不同方法將是一件好事。

祝福愛情

Answer 1

這個問題是由一個事實，即DOM不包括類或ID，這樣就會使搜索更容易變得複雜。正因爲如此，這裏是我如何解決它（見JavaScript部分）：

var links = document.getElementsByTagName("a"); 
 

 
var anchor, ref; 
 
for (var element of links) { 
 
    if (element.getAttribute('data-original-title')=='Schedules') { 
 
    anchor = element; 
 
    ref = element.getAttribute('href'); 
 
    } 
 
    } 
 

 
console.log(anchor); 
 
console.log(ref);

<div id="filter-region" class="col-lg-3 col-md-3 col-sm-3 col-xs-12"><div> 
 
</div></div> 
 
<div id="list-region" class="col-lg-9 col-md-9 col-sm-9 col-xs-12"><div><div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"><div class="well"> 
 
    <div class="media"> 
 
    <div class="media-left media-middle"> 
 
     <a href="#locations/16381"><img src="https://api.staffomaticapp.com/system/logos/16381/api/Picture1.png?1451550438" width="51" height="51" class="img 
 
-rounded media-object"></a> 
 
    </div> 
 
    <div class="media-body"> 
 
     <h4 class="location-name"><a href="#locations/16381">Vélo</a></h4> 
 
    </div> 
 
    </div> 
 
    <ul class="clearfix list-inline location-navigation"><li><a title="" href="#locations/16381" data-original-title="Dashboard"> 
 
    <i class="fa fa-tachometer fa-lg fa-fw"></i> 
 
    <span class="text">Dashboard</span> 
 
</a> 
 
</li><li><a title="" href="#locations/16381/schedules" data-original-title="Schedules"> 
 
    <i class="fa fa-calendar fa-lg fa-fw"></i> 
 
    <span class="text">Schedules</span> 
 
</a> 
 
</li><li><a title="" href="#locations/16381/absences" data-original-title="Absences"> 
 
    <i class="fa fa-plane fa-lg fa-fw"></i> 
 
    <span class="text">Absences</span> 
 
</a>

Answer 2

隨着情況的jQuery你有相同的類多個元素：

$("a").each(function(index) { 
    if ($(this).data('original-title') =='Schedules'){ 
    var url = $(this).attr('href') 
    // do something 
    } 
}); 

或：

var url2 = $("a[data-original-title=Schedules]").attr('href'); 

plain javascript：

var elements = document.getElementsByTagName('a'); 
for (var i = 0; i < elements.length; i++) { 
    var dataoriginal = elements[i].getAttribute('data-original-title'); 
     if(dataoriginal == 'Schedules'){ 
      var url3 = elements[i].getAttribute("href"); 
     //do something 
    } 
}