使用腳本更改網站的元素？

Question

觀察到的行爲

我正在使用一個網站，顯示頁面上的位置。

示例：舊金山，CA \奧蘭多，佛羅里達\等

就像上面的例子中文字的位置是靜態的 並沒有做任何事情。

<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會讓您在上面看到成重定向到谷歌地圖的鏈接的靜態位置。

有關資料

使用Greasemonkey的3.8版

使用Firefox瀏覽器版本47.0

Answer 1

應該有一些變化工作：

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); 

Answer 2

有些事情要糾正：

• 要了解你的情況不使用元素，你應該因爲那需要id。改用querySelector;
• 您指定的類名稱與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>