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.

2
mdh 12 sierpień 2014, 23:54

4 odpowiedzi

Najlepsza odpowiedź

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ę

4
Khalid 12 sierpień 2014, 20:12

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];
3
Alnitak 12 sierpień 2014, 20:10

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;
}
2
Bill Criswell 12 sierpień 2014, 20:11

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);
}

JSFiddle

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.

1
Lochemage 12 sierpień 2014, 20:14