使用脚本更改网站元素？

Question

观察到的行为

我正在使用一个在页面上显示位置的网站。

示例：加利福尼亚州旧金山\佛罗里达州奥兰多\等

如上例中的文本，位置是静态的并且什么都不做。

<span class="userinfo2015-basics-asl-location">Orlando, FL</span>

为了让页面更加生动并向该位置添加功能，我安装了 GreaseMonkey，它允许用户创建修改页面功能的脚本。不幸的是，该脚本已过时且无法使用。但代码似乎在正确的轨道上。

var locE = document.getElementById('span.userinfo2015-basic-asl-location');
var location = locE.textContent;

var newSrc = "https://www.google.com/maps/place/"+location;
var link = document.createElement('a');
link.setAttribute("href",newSrc);
link.setAttribute("target","_blank");
link.innerHTML = location;
locE.parentNode.replaceChild(link,locE);

预期行为

GreaseMonkey 脚本会将您在上面看到的静态位置变成 link，然后将您重定向到 Google 地图。

相关信息

使用 Greasemonkey 版本 3.8

使用 FireFox 版本 47.0

Answer 1

一些需要更正的地方：

要查找元素，在您的情况下不应使用 getElementById，因为那样需要 id。而是使用 querySelector;
您指定的 class 名称与 HTML 代码中的名称不同：-basics- 末尾有一个 s；
不要使用 location 作为变量名，因为它是全局对象的保留属性。使用像 newLocation;
将字符串添加到 URL 时，应转义特殊字符（如 &、/ 和 =）。您可以为此使用 encodeURIComponent；
不是真正的错误，但是将文本分配给 textContent 比分配给 innerHTML 更好，因为它实际上不是您正在分配的 HTML。

// use querySelector
var locE = document.querySelector('span.userinfo2015-basics-asl-location');
// don't use location as variable name.
var newLocation = locE.textContent; 
// use encodeURIComponent
var newSrc = "https://www.google.com/maps/place/"
          + encodeURIComponent(newLocation);
var link = document.createElement('a');
link.setAttribute("href",newSrc);
link.setAttribute("target","_blank");
link.textContent = newLocation; // use textContent
locE.parentNode.replaceChild(link,locE);

<span class="userinfo2015-basics-asl-location">Orlando, FL</span>

Answer 2

它应该可以进行一些更改：

你的 class 名字好像拼错了。
您需要使用 getElementsByClassName()[0] 通过 class 名称获取元素。

我在代码片段中使用它时遇到了一些问题，但是我在 JSFiddle 中使用它：

JSFiddle: Span to Link

这是修改后的 JavaScript:

var locE = document.getElementsByClassName('userinfo2015-basics-asl-location')[0];
var location = locE.textContent;

var newSrc = "https://www.google.com/maps/place/" + location;
var link = document.createElement('a');
link.setAttribute("href", newSrc);
link.setAttribute("target", "_blank");
link.innerHTML = location;
locE.parentNode.replaceChild(link, locE);

使用脚本更改网站元素？

Change an element of a website using a script?

javascript

html

firefox

greasemonkey