var allDivs, thisDiv;allDivs = document.evaluate("//div[@c
lass=''sponsoredlink'']",document,null,XPathResult.UNORDERED_NODE_S
NAPSHOT_TYPE,null);for (var i = 0; i < allDivs.snapshotLength; i+
+) {thisDiv = allDivs.snapshotItem(i);// 使用 thisDiv}附注:在 XPath 查询
语句外使用双引号,这样在语句内就可以使用单引号了。document.evaluate?方法中有很多参数。第二个参数(在前两个例子中
都是?document)可以是任意元素。XPath 查询只返回这个元素的子元素结点。如果已有一个元素的引用(比如,从?docume
nt.getElementById?或者?document.getElementsByTagName?数组的一项中得到的引用),您
就可以限制查询只返回这个元素的子元素。第三个参数是对名称空间解析函数的引用,只有在?application/xhtml+xml?类
型页面执行的用户脚本中才会用到。即使对它不了解也没关系,因为那种类型的页面不是很多,您可能一次也遇不到。如果您很想知道它的用法,h
ttp://www-jcsu.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html
Mozilla XPath 文档解释了它的用法。第四个参数是结果的返回方式。在前面的两个例子中都使用了?XPathResult.U
NORDERED_NODE_SNAPSHOT_TYPE,它返回的元素是随机次序的。我99%都是使用这种方式,但是,可能出于某种原因
,想以在页面上出现的顺序返回结果,您可以使用?XPathResult.ORDERED_NODE_SNAPSHOT_TYPE。htt
p://www-jcsu.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.htmlMo
zilla XPath 文档还提供了一些其他返回方式的例子。第五个参数用来合并两次 XPath 查询的结果。传入以前调用?docu
ment.evaluate?结果,它将返回两次查询的合并结果。在前面的两个例子中,这个参数都用了?null,这意味着我们只想获得本
次 XPath 查询的结果。现在明白了吗?XPath 既可简单,也可难,这就看您怎么用了。我强烈推荐您阅读http://www.z
von.org/xxl/XPathTutorial/General/examples.html这个优秀的 XPath 教程,可以学
到更多的 XPath 语法。关于?document.evaluate?的其他参数, 我很少用除非您已经在这里看到他们了。事实上,您
可以定义一个函数来封装它们。例?4.9.?xpath?函数function xpath(query) {return docume
nt.evaluate(query, document, null,XPathResult.UNORDERED_NODE_SNAP
SHOT_TYPE, null);}现在您可以简单的调用?xpath(''//a[@href]'')?来获得页面上的全部链接,或者用?
xpath(''//[@title]'')?获得具有?title?属性的元素。您仍然需要用?snapshotItem?方法访问结果中
的每个元素;它不是一个规则的 Javascript 数组。实例http://www.firefox.net.cn/dig/down
load/accessbar.user.jsAccess Barhttp://www.firefox.net.cn/dig/dow
nload/betterdir.user.jsBetterDirhttp://www.firefox.net.cn/dig/dow
nload/blogdex-display-title.user.jsBlogdex Display Titlehttp://di
veintomark.org/projects/butler/butler.user.jsButlerhttp://www.fir
efox.net.cn/dig/download/frownies.user.jsFrownieshttp://www.firef
ox.net.cn/dig/download/offsiteblank.user.jsOffsite Blankhttp://ww
w.firefox.net.cn/dig/download/rottenreviews.user.jsRotten Reviews
http://www.firefox.net.cn/dig/download/stopthepresses.user.jsStop
The Presses参考资料http://www-jcsu.jesus.cam.ac.uk/~jg307/mozilla/xp
ath-tutorial.htmlMozilla XPath 文档http://www.zvon.org/xxl/XPathTut
orial/General/examples.htmlXPath 实例教程http://www.xulplanet.com/ref
erences/objref/XPathResult.htmlXPathResult 参考手册4.7.?在元素前插入内容如果已找到
某个元素(不论用何种方法),您想在它前面插入额外的内容。您可以使用?insertBefore?函数。例?4.10.?在主内容前插入
?
假设有个元素的 ID 为?"main"。var main, newElement;main = document.get
ElementById(''main'');if (main) {newElement = document.createElemen
t(''hr'');main.parentNode.insertBefore(newElement, main);}实例http://
diveintomark.org/projects/butler/butler.user.jsButlerhttp://www.f
irefox.net.cn/dig/download/zoomtextarea.user.jsZoom Textarea4.8.?
在元素后插入内容如果已找到某个元素,您想在它后面插入额外的内容。您也可以使用?insertBefore?函数,要与?nextSib
ling?属性联合使用。例?4.11.?在导航条后面插入?
假设有个元素的 ID 为?"navbar"。var navbar
, newElement;navbar = document.getElementById(''navbar'');if (navba
r) {newElement = document.createElement(''hr'');navbar.parentNode.i
nsertBefore(newElement, navbar.nextSibling);}http://www.ttlsa.com
/docs/greasemonkey/即使?someExistingElement?是它的父元素的最后一个孩子(在它之后没有下一个
元素),仍然可以在?someExistingElement.nextSibling?之前插入新内容。在这种情况下,someExis
tingElement.nextSibling?将返回一个空值,insertBefore?函数将把新内容追加到最后。(以许这对你来
说没有太大意义,但我想让您知道的是,尽管这种方法似乎是不太对,但它却总是有效的。)实例http://www.firefox.net
.cn/dig/download/blogdex-display-title.user.jsBlogdex Display Tit
lehttp://diveintomark.org/projects/butler/butler.user.jsButler4.9
.?删除元素使用?removeChild?函数,您可以使 Greasemonkey 一下子删除页面中完整的一块。例?4.12.?删
除广告侧边栏假设有个元素 ID 为?"ads"。var adSidebar = document.getElementById(''
ads'');if (adSidebar) {adSidebar.parentNode.removeChild(adSidebar)
;}http://www.ttlsa.com/docs/greasemonkey/用removeChild?移除一个元素也会删除它
里面的所有内容。例如您移除一个?
?元素,此时也会将表格单元格(?元素)一起移除。http://www.ttl sa.com/docs/greasemonkey/如果要移除广告,比起写用户脚本来,更容易的办法是安装?http://adbloc k.mozdev.org/AdBlock?然后导入?http://www.geocities.com/pierceive/adbl ock/最新的过滤列表。实例http://diveintomark.org/projects/butler/butler.user .jsButler4.10.?替换元素为新内容如果已经获取了一个元素,可以使用?replaceChild?函数来替换它的全部内容。 例?4.13.?替换图片为替代(alt)文本假设页面上有一个元素 ID 为?"annoyingsmily"。var theImag e, altText;theImage = document.getElementById(''annoyingsmily'');if (theImage) {altText = document.createTextNode(theImage.alt);theI mage.parentNode.replaceChild(altText, theImage);}http://www.ttlsa .com/docs/greasemonkey/如果要用一大段?HTML?替换一个元素,您可以构造?HTML?为一个字符串,然后ht tp://www.ttlsa.com/docs/greasemonkey/设置元素的?innerHTML?属性。实例http:// www.firefox.net.cn/dig/download/frownies.user.jsFrownies4.11.?快速插 入复杂的?HTMLThe?innerHTML?属性让您可以将?HTML?以字符串的形式表示,然后将它们直接插入到页面中。这样就不需 要为每一个?HTML?元素创建单独的 DOM 对象,然后再一个一个的设置它们的属性。例?4.14.?在页面顶部加上标语var lo go = document.createElement("div");logo.innerHTML = '' '' +''YOUR TE XT HERE '' +'' '';document.body.insertBefore(logo, document .body.firstChild);关键的地方是第二行,在这行我将?logo.innerHTML?设置为字符串。Firefox 将 这个字符串解析成?HTML?然后创建所有必需的对象,就像它重新加载一个页面一样。这样我就可以将我的新?logo?(一个? ?包含另一个? ,这个? ?包含有一个? )插入到页面的任何位置 — 页面开始,结尾或者我选择的任意元素htt p://www.ttlsa.com/docs/greasemonkey/之前或http://www.ttlsa.com/docs/ greasemonkey/其后。总之,页面上任何位置。实例http://www.firefox.net.cn/dig/downlo ad/accessbar.user.jsAccess Barhttp://diveintomark.org/projects/bu tler/butler.user.jsButlerhttp://www.firefox.net.cn/dig/download/b etterdir.user.jsBetterDir4.12.?在没有服务器的情况下添加图片Firefox 支持?data:?URL s, 它可以把一段数据嵌入到?URL?中,而不需要单独从服务器上来获取。您也许从来都没有听说过?data:?URLs ,因为 In ternet Explorer 不支持,所以几乎没人使用它们。但是在用户脚本中它们却非常有用。例?4.15.?在页面顶部添加图形 logovar logo = document.createElement(''img'');logo.src = ''data:ima ge/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA''+''LAAA AAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D %3D'';document.body.insertBefore(logo, document.body.firstChild);在 这个例子中,?元素的?src?是?data:?URL,它以编码形式的包含了一整幅图像的信息。当这个新元素被插入到页面中时 ,它会像其他图片一样显示但它却不用存储在服务器上。事实上,可以在您的用户脚本中嵌入图片,它们可以和其它的代码一样发布到网上。htt p://www.ttlsa.com/docs/greasemonkey/使用?http://software.hixie.ch/u tilities/cgi/data/datadata:?URI?kitchen?来建立您自己的?data:?URLs。实例http ://diveintomark.org/projects/butler/butler.user.jsButlerhttp://ww w.firefox.net.cn/dig/download/zoomtextarea.user.jsZoom Textarea参见 http://software.hixie.ch/utilities/cgi/data/datadata:?URI?kitchen 4.13.?添加 CSS 样式我常常发现需要在页面中添加我自己的 CSS 样式。您可以添加新样式,覆盖掉已有的样式或者样式化用户脚 本插入的新元素。例?4.16.?放大段落文字function addGlobalStyle(css) {var head, sty le;head = document.getElementsByTagName(''head'')[0];if (!head) { r eturn; }style = document.createElement(''style'');style.type = ''tex t/css'';style.innerHTML = css;head.appendChild(style);}addGlobalSt yle(''p { font-size: large ! important; }'');这个函数只一个字符串参数,包含要插入到页面中 的样式规则。它一成不变地把您的样式规则插入到页面? ?段的? 这行是红色的。 这行是蓝色的。 |