javascript - 如何在 JavaScript 中不使用 ID 获取元素的值

Question

假设我有以下代码:

<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>

我如何才能在不更改页面上的 HTML 的情况下使用 JavaScript 获取“帖子标题”和“员工简介”的值？例如，我不能使用 getElementbyID。如果必须的话，我可以使用 jQuery，但如果可能的话我宁愿不用。

Answer 1

您可以使用返回数组的 getElementsByTagName 获取这些值

document.getElementsByTagName("a")[0].innerHTML // returns The Post Title
document.getElementsByTagName("a")[1].innerHTML // returns Staff Profile

如果这些链接是第一个，你可以使用索引 0 和 1，否则你应该寻找正确的索引

更新

另一种可能很简单的方法是在类 post

的 div 中选择这些链接

var links = document.getElementsByClassName("post")[index].getElementsByTagName("a");
links[0].innerHTML; // returns The Post Title
links[1].innerHTML; // returns Staff Profile

如果类 post 的 div 的索引不改变，这个解决方案将是最好的解决方案