检测
在 XPath 查询语句外使用双引号,这样在语句内就可以使用单引号了。
document.evaluate 方法中有很多参数。第二个参数(在前两个例子中都是 document)可以是任意元素。XPath 查询只返回这个元素的子元素结点。如果已有一个元素的引用(比如,从 document.getElementById 或者 document.getElementsByTagName 数组的一项中得到的引用),您就可以限制查询只返回这个元素的子元素。
第三个参数是对名称空间解析函数的引用,只有在 application/xhtml+xml 类型页面执行的用户脚本中才会用到。即使对它不了解也没关系,因为那种类型的页面不是很多,您可能一次也遇不到。如果您很想知道它的用法,Mozilla XPath 文档解释了它的用法。
第四个参数是结果的返回方式。在前面的两个例子中都使用了 XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,它返回的元素是随机次序的。我99%都是使用这种方式,但是,可能出于某种原因,想以在页面上出现的顺序返回结果,您可以使用 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE。Mozilla XPath 文档还提
1测试 Greasemonkey 函数是否有效
if (!GM_xmlhttpRequest)
{
alert('请升级到最新版本的 Greasemonkey.');
return;
}
2 测试页面中是否有 HTML 元素
可以用 getElementsByTagName 函数来测试页面中是否有 HTML 元素
var textareas = document.getElementsByTagName('textarea');
if (textareas.length) {
// 页面中有至少一个 textarea
} else {
// 页面中没有 textarea
}
3操作所有 HTML 元素
有时需要操作页面中的所有 HTML 元素。Firefox支持 getElementsByTagName('*'),它返回一个可遍历操作的元素集合。
遍历所有元素
var allElements, thisElement;
allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
thisElement = allElements[i];
// 使用 thisElement
}
4操作特定 HTML 元素的所有实例
有时您需要操作页面中特定 HTML 元素的所有实例。例如改变所有 <textarea> 的字体大小。最简单的办法就是调用 getElementsByTagName('tagname'),它返回一个可遍历操作的元素集合。
获取页面上所有的 textarea
var allTextareas, thisTextarea;
allTextareas = document.getElementsByTagName('textarea');
for (var i = 0; i < allTextareas.length; i++) {
thisTextarea = allTextareas[i];
// 使用 thisTextarea
}
5操作所有有特定属性的元素
提示
thisElement.nodeName判断标签
XPath 是一种查询语言,它允许您通过 HTML 元素的属性来选择元素。
在 Greasemonkey 的兵器库中最强悍的一个就是 evaluate 方法。利用 XPath 查询语言,它可以用来获取页面中的元素,属性以及文本。
举个例子来说,如果您想获得页面中的全部链接。您也许会想到用 document.getElementsByTagName('a'),但是您还要检查每个元属是否具有 href 属性,因为 元属还可以用作有名称的锚。
然而可以用 Firefox 内建的 XPath 功能来查找具有 href 属性的 元属。
获取页面中的所有链接
var allLinks, thisLink;
allLinks = document.evaluate(
'//a[@href]',
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
for (var i = 0; i < allLinks.snapshotLength; i++) {
thisLink = allLinks.snapshotItem(i);
// 使用 thisLink
}
document.evaluate 方法是关键。它有一个代表 XPath 查询语句的字符串参数以及一些其它参数,接下来解释一下。这条 XPath 查询语句找到了具有 href 属性的 <a> 元属,用随机的次序排列后返回。(也就是说,集合中的第一个元素并一定是页面中的第一个元素。)然后您可以用 allLinks.snapshotItem(i) 方法访问找到的元素。
XPath 表达式所能做到的甚至会使您惊讶。请看下面这个例子,它获取了全部具有 title 属性的元素。
获取所有具有 title 属性的元素
var allElements, thisElement;
allElements = document.evaluate(
'//*[@title]',
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
for (var i = 0; i < allElements.snapshotLength; i++) {
thisElement = allElements.snapshotItem(i);
switch (thisElement.nodeName.toUpperCase()) {
case 'A':
// 这是链接,在这里完成您的操作
break;
case 'IMG':
// 这是图片,在这里完成您的操作
break;
default:
// 其他类型的 HTML 元素,在这里完成您的操作
}
}
如果已有一个元素的引用(例如 thisElement),可以用 thisElement.nodeName 来判断它的 HTML 标签。如果页面被当作 text/html 类型,标签名称就总是大写,不论它在原始页面是如何定义的。如果页面被当作 application/xhtml+xml类型,那么标签名称就总是小写的。我总是用 thisElement.nodeName.toUpperCase() 这样我就可以不用管这些了。
获取所有 class 为 sponsoredlink 的 div
6xpath 函数
function xpath(query) {
return document.evaluate(query, document, null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
}
现在您可以简单的调用 xpath('//a[@href]') 来获得页面上的全部链接,或者用 xpath('//*[@title]') 获得具有 title 属性的元素。您仍然需要用 snapshotItem 方法访问结果中的每个元素;它不是一个规则的 Javascript 数组。