我有一个 html 页面,我想在上面找到一些数据,但主要问题是该页面是在服务器上生成的,我想在本地机器上编写 javascript 代码并运行它。那么如何在本地机器上编写和运行 javascript 代码,以便它可以找到文本,或者通过 id/class 获取元素?
注意,这很重要:只有纯 javascript,没有像 jQuerys 之类的库!
谢谢你。
我有一个 html 页面,我想在上面找到一些数据,但主要问题是该页面是在服务器上生成的,我想在本地机器上编写 javascript 代码并运行它。那么如何在本地机器上编写和运行 javascript 代码,以便它可以找到文本,或者通过 id/class 获取元素?
注意,这很重要:只有纯 javascript,没有像 jQuerys 之类的库!
谢谢你。
更新答案:
起初我不明白你想调用一个你无法控制的网页,然后在你的浏览器中使用 JavaScript 与之交互。
下面原始答案中的信息仍然相关,但问题是:如何使代码在正确的上下文中运行?答案是:至少有两种方法:
现在任何像样的浏览器都有内置的调试工具。在菜单上查看它们,但在许多浏览器中,它们可以通过F12键或Ctrl++Shift访问I。在这些工具中,您会找到一个“控制台”,您可以在其中键入 JavaScript 并让它在您正在查看的页面的上下文中运行。
这非常适合交互式地做事,但每次都重新输入它有点痛苦。您还可以将代码放在本地文件中(例如,/home/tjc/foo.js
),然后当您转到页面时,使用控制台将该脚本附加到页面(这将导致它在页面的上下文中执行),例如这个:
document.documentElement.appendChild(document.createElement('script')).src = "file:///home/tjc/foo.js";
一旦你的脚本做你想做的事,你可能想把它变成一个小书签。javascript:
这是一个使用该方案而不是通常http:
等的浏览器书签。有关详细信息,请参阅链接。您将需要一个工具来获取您的 JavaScript 代码并为您进行必要的 URL 编码,例如Bookmarklet Crunchinator或类似工具。
原始答案:
...以便它可以找到文本,或通过 id/class 获取元素...
这是三个非常不同的问题:
要在页面上查找文本,您有几个选项:
如果您只想查找文本但不太关心包含它的确切元素,则可以innerHTML
在document.body
. innerHTML
是一个字符串;当您访问它时,浏览器会为您调用它的元素(及其后代)中的所有 DOM 元素创建一个 HTML 字符串。请注意,这不是来自服务器的原始内容;这是在您访问元素时即时创建的。对于很多用例,获取此字符串然后查看它可能很有用。请注意,您正在搜索的文本是标记,因此,例如,如果您搜索单词“table”,您可能会在句子(“We sat up at the table.”)或标记(<table>...
)中找到它。
I'm
这是一个使用以下方法计算页面上单词的示例innerHTML
:live copy | 来源- 请参阅末尾有关示例的注释。
(function() {
var pageText = document.body.innerHTML;
display('Count of "I\'m" on the page: ' +
pageText.match(/I'm/g).length);
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
如果您需要准确找出它所在的元素,则需要编写一个遍历页面节点的递归函数,对于Text
nodes,查看其中的文本。这是一个基本示例(函数就是walk
函数):Live copy | 来源- 请参阅末尾有关示例的注释。
(function() {
var matches = [], index;
walk(matches, document.body, "");
function walk(matches, node, path) {
var child;
switch (node.nodeType) {
case 1: // Element
for (child = node.firstChild; child; child = child.nextSibling) {
walk(matches, child, path + "/" + node.tagName);
}
break;
case 3: // Text
if (node.nodeValue.indexOf("I'm") !== -1 ) {
matches.push("Found it at " + path);
}
break;
}
}
display("Matches found (" + matches.length + "):");
for (index = 0; index < matches.length; ++index) {
display(matches[index]);
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
要通过 查找页面上的元素id
,请使用document.getElementById
。
要通过 查找页面上的元素class
,在大多数现代浏览器上,您可以使用getElementsByClassName
或querySelectorAll
。
请注意示例:我使用的是JSBin,默认情况下,它会将您在左侧看到的 JavaScript 放在您在右侧看到的 HTML 的末尾(就在结束</body>
标记之前)的“源”视图中. 这符合最佳实践。
阅读:
如果您正在寻找 imacros 解决方案,那么它是这样的:
var reportDataTable = window.content.document.getElementById("yoursid");
if (reportDataTable == null)
{
iimPlay("mac1.iim");
}
else
{
iimDisplay("stop!");
}
其中 mac1.iim 是宏,它会重复,直到
window.content.document.getElementById("yoursid");
不会成立