在javaScript中遍歷元素

我需要更改框中鏈接的href。我只能使用原生的javaScript。不知何故，我有遍歷元素的問題，以匹配正確的<a>標籤。在javaScript中遍歷元素

因爲除了它們的href值，這個容器中的所有標籤都是相同的，所以我需要使用這個值來獲得匹配。

到目前爲止，我已經嘗試了這一點：

var box = document.getElementsByClassName('ic-Login-confirmation__content'); 
var terms = box.querySelectorAll('a'); 
if (typeof(box) != 'undefined' && box != null) { 
    for (var i = 0; i < terms.length; i++) { 
    if (terms[i].href.toLowerCase() == 'http://www.myweb.net/2/') { 
     terms[i].setAttribute('href', 'http://newlink.com'); 
    } 
    } 
}

不過，我不斷收到「遺漏的類型錯誤：box.querySelectorAll不是一個函數」。爲了完成這項工作，我需要做些什麼？

Jsfiddle here。

來源

2016-06-07 Meek

你不能只是做'document.querySelectorAll（'[href =「http://www.myweb.net/2/」]'）'？ – putvande

'document.getElementsByClassName（）'（注意** s **）返回一個DOM元素列表，而不是一個DOM元素。您不能將'querySelectorAll（）'應用於元素列表。 –

的querySelectorAll好處是你不需要穿越這樣的 - 只是使用

var terms = document.querySelectorAll('.ic-Login-confirmation__content a');

然後遍歷這些。更新小提琴：https://jsfiddle.net/4y6k8g4g/2/

事實上，這整個事情可以簡單很多

var terms = document.querySelectorAll('.ic-Login-confirmation__content a[href="http://www.myweb.net/2/"]'); 
if(terms.length){ 
    terms[0].setAttribute('href', 'http://newlink.com'); 
}

活生生的例子：https://jsfiddle.net/4y6k8g4g/4/

來源

2016-06-07 09:45:42 Jamiec

我喜歡這種解決方案的美觀和簡潔。但是，如果我有兩個或更多具有相同href的鏈接呢？術語[0]只適用於第一個？ – Meek

@Meek - 實際上，在這種情況下迭代從'querySelectorAll'返回的所有那些 – Jamiec

非常感謝。這很完美。 – Meek

試試這個：

var box = document.getElementsByClassName('ic-Login-confirmation__content')[0];

由於您使用getElementsByClassName，它將返回一組元素。

來源

2016-06-07 09:47:02 sabith

您可以通過href ATTR與querySelector選擇，嘗試這樣的：

document.querySelector('a[href="http://www.myweb.net/2/"]')

而不是定義確切href屬性可以簡化甚至更多：

document.querySelector('a[href?="myweb.net/2/"]'

只匹配以href屬性結尾的元素以"myweb.net/2/"

來源

2016-06-07 09:47:43 maioman

getElementsByClassName方法返回將具有指定類名稱的文檔中的所有元素的集合作爲NodeList對象返回。

需要在此情況下，如下所示指定它：

document.getElementsByClassName('ic-Login-confirmation__content')[0]

這將確保您正在訪問正確的節點在你的HTML。如果你在你的例子中console.logbox變量，你會看到一個數組返回。

來源

2016-06-07 09:50:17 midda25

如果沒有找到匹配的元素，這將會失敗並在以後出現未定義的錯誤。 – erg

這不會是一個錯誤...變量將只返回'未定義'。所以這不會阻止你的JS代碼執行。 – midda25

正如我所說：稍後。代碼將如'var a = document.getElementsByClassName（'foo'）[0]'，a將會是未定義的，稍後在代碼中有人會嘗試訪問'a'的屬性，腳本將停止。 – erg

在javaScript中遍歷元素

回答

相關問題