document.evaluate的详细用法

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

使用 Greasemonkey 时会遇到的功能最为强大的一个工具就是 evaluate 函数。通过使用XPath这种查询语言,它可以用来寻找页面中的元素,属性和文本。

举个例子来说,如果您想获得某个页面上的全部链接。您也许会想到使用document.getElementsByTagName ('a');但是如果您还要继续检查是否每个链接都具有href属性,因为<a>还可以用来作为锚名称使用,这时,您需要使用Firefox 内建的XPath支持去获取全部具有href属性的<a>元素。


Image:Permalink.gif 例子: 获取页面上的全部链接

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);    / do something with thisLink}

这里,document.evaluate 是关键的部分。 它把 XPath 查询语句作为一个字符串,其它的参数稍后再做解释。 这条 XPath 查询语句可以找到全部具有href属性的<a>元素,并将它们按照随机的顺序依次返回。(这就是说,第一个被返回的元素并一定也是页面上的第一个这样的元素。) 随后,您就可以用 allLinks.snapshotItem(i) 函数访问每一个元素。


XPath表达式所能做到的甚至会使您惊讶。请看下面这个例子,它获取了全部具有title属性的元素。


Image:Permalink.gif 例子: 获取全部具有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':            / this is a link, do something             break;         case 'IMG':            / this is an image, do something else             break;         default:            / do something with other kinds of HTML elements     }}


如果您已经引用了某个元素(例如上面的 thisElement),您就可以用 thisElement.nodeName 来替代它所对应的在 HTML 页面中的标签名称。如果被访问的这个页面是以 text/html 的方式被服务器执行, 那么标签名称总是用大写子母返回,不论它在原始页面是如何定义的。 如果页面是 application/xhtml+xml 方式的, 那么标签名称就会以小写子母返回。 不论哪种情况,我总是用 thisElement.nodeName.toUpperCase() 得到大写的标签名称。


这是另外一个 XPath 查询,它返回了 div 中的一个特殊的类。


Image:Permalink.gif 例子: 获取 div 中的 sponsoredlink 类

var allDivs, thisDiv;allDivs = document.evaluate(     "//div[@class='sponsoredlink']",     document,     null,     XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,     null);for (var i = 0; i < allDivs.snapshotLength; i++) {     thisDiv = allDivs.snapshotItem(i);    / do something with thisDiv}

注意我在 XPath 查询语句外使用了双引号,这样在语句内部就可以使用单引号。


在 document.evaluate 函数中有很多参数。第二个参数 (在前两个例子中都是docoment) 可以是一个元素, XPath 查询只返回包含在这个元素内的元素。所以,如果您已经引用了一个元素(比如, 通过 document.getElementByIdx 或者 通过 document.getElementsByTagName 得到的数组中的一个元素), 那么您就可以限制查询只返回这个元素的子元素。


第三个参数是对一个叫做 namespace resolver 函数的引用, 它只有在工作在 application/xhtml+xml 类型的页面上的用户脚本中是有效的。即使您对它不是很了解也没有关系,因为那种类型的页面不是很多,您可能一次也遇不到。如果您很想知道它是如何使用的,请参考 Mozilla XPath documentation(http://www-jcsu.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html),那里解释了它的用法。


第四个参数是结果的返回方式。在前面的两个例子中都使用了 XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, 它将结果以随机的方式返回。我使用的几乎全部都是这种方式,但是,出于某种原因,您想让结果以它们在页面上出现的顺序返回,您可以使用 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE 这种方式。Mozilla XPath documentation(http://www-jcsu.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html)还给出了另外的一些用例。


第五个参数用来合并两次 XPath 查询的结果。 在获得第一次调用 document.evaluate 得到的结果之后,它将两次查询的结果一起返回。在前面的两个例子中,这个参数都用了null,这意味着我们只想获得本次查询的结果。


现在您明白了吗?XPath 既可以很简单,也可以很难,这取决于您要如何使用它。在此我强烈推荐您尽快去阅读 this excellent XPath tutorial(http://www.zvon.org/xxl/XPathTutorial/General/examples.html),从而了解更多的 XPath 语法。至于 document.evaluate 函数的其它参数, 我几乎从来不使用它们。事实上,您可以自己定义一个函数来封装它们。


Image:Permalink.gif 例子: 自定义的 xpath 函数

function xpath(query) {     return document.evaluate(query, document, null,         XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);}


在定义了这个函数之后,您就可以调用 xpath('//a[@href]') 来获得某个页面上的全部链接, 或者调用 xpath('//*[@title]') 来获得具有 title 属性的元素。您仍然需要通过 snapshotItem 函数来访问结果中的每一项,这个函数的类型并不是一个规则的Javascript数组。

本文转自 netcorner 博客园博客,原文链接: http://www.cnblogs.com/netcorner/archive/2007/08/16/2912309.html ,如需转载请自行联系原作者

相关文章
vbs鼠标方法——模拟鼠标按键
'*********************************************************************** ' 代码开始 '*********************************************************************** Set mouse=New SetMouse mouse.
5163 0
|
8月前
|
数据采集 JavaScript 前端开发
“所见即所爬”:使用Pyppeteer无头浏览器抓取动态壁纸
“所见即所爬”:使用Pyppeteer无头浏览器抓取动态壁纸
|
4月前
|
JavaScript 前端开发
如何实现前端大量的DOM数据加载而页面不卡顿
为避免大量DOM导致页面卡顿,可采用分批渲染或虚拟滚动技术,仅渲染可视区域内容。
273 3
|
5月前
|
Web App开发 JavaScript 前端开发
Playwright入门:环境搭建与第一个自动化测试脚本
Playwright支持Chromium、Firefox、WebKit,跨浏览器测试更高效。自动等待机制提升稳定性,无需手动sleep。本文带你从环境搭建到编写首个百度搜索测试脚本,涵盖最佳实践与常见问题解决,助你快速上手自动化测试。
|
前端开发 JavaScript API
document.queryselector怎么用
document.queryselector怎么用
856 0
|
容器
【HarmonyOS】HMRouter使用详解(一)环境配置
在项目中使用官方推荐的Navigation时,需要在所有的页面上都添加一层NavDestination,在代码阅读上会增加多个层级,而且还要在主页面设置对应名字的跳转等问题,配置起来比较繁琐。看到大佬开发的HMRouter使用起来方便简洁,因此,写下这篇文章记录HMRouter的使用。
754 8
【HarmonyOS】HMRouter使用详解(一)环境配置
Markdown 拓展 - 对数学公式的支持
MathJax 和 LaTeX 数学公式 支持 MathJax 是一款运行在浏览器中的开源数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析 Latex、MathML 和 ASCIIMathML 的标记语言。MathJax 项目于 2009 年开始,发起人有 American Mathematical Society, Design Science等,还有众多的支持者,个人感觉MathJax会成为今后数学符号渲染引擎中的主流,也许现在已经是了。本文接下来会讲述 MathJax 的基础用法,但不涉及MathJax 的安装及配置。
690 0
Markdown 拓展 - 对数学公式的支持
|
JavaScript 前端开发
JavaScript 获取整个网页的完整内容,包括 html 标签。
JavaScript 获取整个网页的完整内容,包括 html 标签。
2130 0
JavaScript 获取整个网页的完整内容,包括 html 标签。