如何在JavaScript中不使用id获取元素的值

How to get value of elements without using IDs in JavaScript

本文关键字：获取 id 元素 JavaScript      更新时间：2023-09-26

假设我有以下代码:

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

我怎么可能得到"Post Title"answers"Staff Profile"的值使用JavaScript而不改变页面上的HTML ?例如，我不能使用getElementbyID。如果有必要，我可以使用jQuery，但如果可能的话，我宁愿不使用。

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

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

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

更新另一种简单的方法是在div中选择这些链接，类为post 
var links = document.getElementsByClassName("post")[index].getElementsByTagName("a");
links[0].innerHTML; // returns The Post Title
links[1].innerHTML; // returns Staff Profile

如果类为post的div的索引不改变

，则此方案为最佳方案。

对于基于jQuery的表达式，您可以使用以下命令:

$('a').map(function() {
    return [this.href, this.textContent];
}).get();

应该返回:

[ [ 'http://www.example.com', 'The Post Title' ],
  [ 'http://sitename/category/staff-profile/', 'Staff Profile' ] ]

如果您特别想要原始的相对url而不是规范化的完整url，请使用this.getAttribute(href)代替this.href

对于纯(ES5)等价物:

[].map.call(document.getElementsByTagName('a'), function (el) {
    return [el.href, el.textContent];
});

不支持W3C标准.textContent属性的旧浏览器可能需要使用.innerText属性，例如:

return [el.href, el.textContent || el.innerText];

你可以这样做:

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

如果您使用的是更现代的浏览器，您可以使用document.querySelectorAll()，它采用CSS样式选择器语法。

var aList = document.querySelectorAll('.post a');
for (var i = 0; i < aList.length; ++i) {
  alert(aList[i].innerHTML);
}

JSFiddle

我用了'。在你的页面上放一个'而不是'a'，因为我认为你的页面中可能有其他你不需要的'a'标签。

相关文章：