Powiedzmy, że miałem następujący kod:
<div class="post">
<h2 itemprop="name">
<a href="http://www.example.com">The Post Title</a>
</h2>
<div class="details">
<span>
<em class="date">Jul 17, 2014 </em>
</span>
<span>
Category:
<a href="/category/staff-profile/">Staff Profile</a>
</span>
</div>
Jak mógłbym uzyskać wartości "tytułu postu" i "profilu personelu" przy użyciu javascript bez zmiany HTML na stronie na stronie? Nie mogłem na przykład użyć GetElementByid. Mogę użyć jQuery, gdybym musiał, ale wolałby, jeśli to możliwe.
4 odpowiedzi
Możesz uzyskać te wartości za pomocą getElementsByTagName, które zwracają tablicę
document.getElementsByTagName("a")[0].innerHTML // returns The Post Title
document.getElementsByTagName("a")[1].innerHTML // returns Staff Profile
Jeśli te linki są pierwszymi, które możesz używać indeksów 0 i 1, w przeciwnym razie powinieneś szukać odpowiedniego indeksu
Aktualizacja
Innym sposobem, w jaki może być proste, jest wybranie tych linków wewnątrz div z klasą post
var links = document.getElementsByClassName("post")[index].getElementsByTagName("a");
links[0].innerHTML; // returns The Post Title
links[1].innerHTML; // returns Staff Profile
To rozwiązanie byłoby najlepsze, jeśli indeks div z klasą {x0}} nie zmienia się
W przypadku wyrażenia opartego na jQuery możesz użyć tego:
$('a').map(function() {
return [this.href, this.textContent];
}).get();
Co powinno wrócić:
[ [ 'http://www.example.com', 'The Post Title' ],
[ 'http://sitename/category/staff-profile/', 'Staff Profile' ] ]
Jeśli konkretnie chcesz oryginalne względne adresy URL zamiast znormalizowanych pełnych adresów URL, użyj this.getAttribute(href) zamiast this.href
Dla równoważnych równoważnych (ES5):
[].map.call(document.getElementsByTagName('a'), function (el) {
return [el.href, el.textContent];
});
Starsze przeglądarki, które nie obsługują standardu W3C .textContent nieruchomości mogą wymagać zamiast tego .innerText właściwości, np.:
return [el.href, el.textContent || el.innerText];
Możesz to zrobić:
var posts = document.querySelector('.post');
for (var i = 0; i < posts.length; i++) {
var links = document.querySelectorAll('a');
var title = links[0].innerText || links[0].textContent;
var profile = links[1].innerText || links[1].textContent;
}
Jeśli używasz bardziej nowoczesnej przeglądarki, możesz użyć dokumenta
var aList = document.querySelectorAll('.post a');
for (var i = 0; i < aList.length; ++i) {
alert(aList[i].innerHTML);
}
Użyłem ".Post A", a nie tylko "A", ponieważ zakładam, że Twoja strona może mieć w nim inne tagi "A", których niekoniecznie chcesz.