使用非jQuery方法选择元素

Question

我猜这个答案会被投票否决，因为它不包含足够的jQuery内容，但还是来一发 :)

使用纯粹的旧式javascript，最有效的方法是什么，以获取以下jQuery选择器返回的元素？

$('a[title="some title text here"]', top.document)

- Jørgen

---

JS并不比jQuery老。jQuery是纯JS，那么JS怎么可能会老呢？ - markus

@markus：除非您在暗示jQuery库与JavaScript同时发布，否则JS确实比jQuery旧。您从未听说过“普通的某物”这个表达吗？（简单的常识？） - nnnnnn

@nnnnnn 我的意思是 jQuery 完全包含在 JS 中，它只是用 JS 编写的库。每一行代码都和 JS 一样古老，因为它就是 JS。我写这个的原因是为了反驳常见的观点，即使用库比编写自己的代码更好。虽然通常情况下确实如此，但同样经常也不是这样。 - markus

@markus - 我猜到你的意思了，但这不是你说的话。我同意你关于使用库并不总是最好的选择的观点，并且我同意我们应该纠正一些人错误的想法，即jQuery是一种特殊的语言扩展，可以做一些在“普通”JavaScript中无法完成的事情。但是，说所有[jQuery]代码都像JS一样古老，只因为它是用JS编写的，就好像说我今天早上写的一首诗和字母表一样古老。 - nnnnnn

这是一个相关的问题。有些情况下，要求在网站中包含jQuery库是不可取的。 - Gruber

Answer 1

如果你正在使用现代浏览器，你可以使用以下方法：

window.top.document.querySelectorAll('a[title="some title text here"]')

- icktoofay

---

@James: 我的回答已经说明它只能在现代浏览器中运行。 - icktoofay

应该接受这个答案，因为所有现代浏览器都支持它，从IE9开始。IE8有一些支持。 - Aspelund

Answer 2

不确定它是否是最有效的，但至少它起作用了。

var links = top.document.getElementsByTagName('a');
var result = [];
var linkcount = links.length;
for ( var i = 0; i < linkcount; i++) {
    if (links[i].getAttribute('title') === 'some title text here') {
        result.push(links[i]);
    }
}

- margusholland

---

取决于您想获取所有设置了标题标签的A标签还是想获取所有具有特定标签的元素。现在我再看一下问题，您是正确的。 - margusholland

and yes it should be "===" :) - naveen

@margusholland 你必须将 links[i].title=='some...' 更改为 links[i].getAttibute('title')==='some...'. 这是因为如果 title（或任何其他）属性未设置，则 links[i].getAttibute('title') 返回 _null_，但 links[i].title 返回零长度字符串。而使用 getAttribute() 是更复杂的解决方案（自定义属性）。 - Andrew D.

@RobG，实际上会，因为如果检查具有空标题的元素，则会得到错误的结果。如果您想要所有A标签而不仅仅是其中之一，则链接和锚可能无法帮助。 - margusholland

@Andrew - 你很热情。:-) 想要通过空属性而不是缺失的属性进行选择是罕见的，而且在9版本之前，IE错误地实现了getAttribute，因此使用它无法区分两者之间的差异，这非常困难。而你一直没有阅读OP：a[title="some title text here"]。对于绝大多数情况，要求是将空和不存在的title属性视为相同（HTML5也反映了这一点）。 - RobG

Answer 3

这里有一个例子

var getElements = function(tagName, attribute, value, callback) {
  var tags = window.document.getElementsByTagName(tagName);
  for (var i=0; i < tags.length; i++) {
    var tag = tags[i];
    if (tag.getAttribute(attribute) == value) {
      callback(tag);
    }
  };
};

getElements("a", "title", "PHP power player at Hettema & Bergsten. Click to learn more.", function(tag) {
  console.log(tag);
});

- James Kyburz