在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中遍历元素

回答

相关问题