使用脚本更改网站的元素？

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脚本会将您在上面看到的静态位置转换为将您重定向到Google地图的链接。

相关信息

使用Greasemonkey V3.8

使用FireFox版本47.0

Answer 1

要纠正的一些事情：

• 要查找您应该使用的元素，请不要使用getElementById，因为这需要id。而是使用querySelector;
• 您指定的班级名称与HTML代码中的班级名称不同：-basics-最后有一个s;
• 不要将location用作变量名，因为这是全局对象的保留属性。使用类似newLocation;
的内容
• 在向网址添加字符串时，应转义特殊字符（例如&，/和=）。您可以使用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

它应该有一些变化：

1. 看起来你拼错了你的班级名字。
2. 您需要使用getElementsByClassName()[0]按类名获取元素。

我在片段中使用它时遇到了一些麻烦，但我在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);