Question

我正在尝试定位文档中的所有链接。单击任何链接后，我希望显示模态。该模态当前设置为显示：无。我在控制台中没有收到任何错误消息，但仍然无法正常工作。脚本链接也在html文档的底部。我想念什么？

var a = document.getElementsByTagName('a');
    for (i = 0; i < a.length; i++) {   
        var links = a[i];
    }

在这一点上，var链接应该等于所有链接，对吗？

links.addEventListener('click', openmodal);

function openmodal(){
    modal.style.display = "block";
}

下面的代码确实有效，但仅适用于第一个链接

var links = document.getElementsByTagName('a')[0];

Answer 1

您需要在循环中添加事件侦听器。

function openmodal(){
    modal.style.display = "block";
}
var links = document.getElementsByTagName('a');
for (i = 0; i < links.length; i++) {   
   links[i].addEventListener('click', openmodal);
}

Answer 2

您需要纠正一些问题。首先：

var a = document.getElementsByTagName('a');
for (i = 0; i < a.length; i++) {   
   var links = a[i];
}

因为在循环中使用var links，所以您在每次循环迭代时都要重新声明它，因此会丢失它可能已经存储的所有先前值。正确的做法是在循环外部声明它，然后在循环内部使用它（不使用var）：

var a = document.getElementsByTagName('a');
var links; 
for (i = 0; i < a.length; i++) {   
   links = a[i];
}

但是，即使那样，因为您正在用=给它分配一个值，所以在每次循环迭代时，仍然用新的值覆盖存储在变量中的最后一个值。现在，有了上面的代码片段，您还不确定要执行的操作。

因此，要完成设置每个链接以激活模式的目标，我们只需收集所有链接，对其进行迭代，并在此过程中设置事件处理程序：

var links = document.getElementsByTagName('a');   // Get all the links
for (i = 0; i < a.length; i++) {                  // Loop over them
   links[i].addEventListener('click', openmodal); // Assign handler to each
}

但是，请注意以下几点：

getElementsByTagName()返回一个"live node list"并将始终指的是最新的匹配节点集。有用这样，您每次引用文档时都会重新查询文档节点列表。如果您的文档中有20个链接并运行了代码上面，它将查询所有a元素的DOM 21 次！实时节点列表仅在动态情况下才有用从文档中添加/删除元素，并且始终需要最多最新的匹配元素集。但是，正如我所指出的，使用它们会产生性能损失。因此，有更好的方法获得相同结果的事实如果发生这种情况，通常应避免使用活动节点列表。
无论何时使用循环，都为性能问题打开了大门。我是不是说不要使用循环，而是要你永远非常了解您在该循环中的工作。效率低下操作或占用资源的操作会更多效率低下或重复执行时占用更多资源。分配一个许多元素的事件处理程序使用内存，因为每个元素都需要存储该回调函数的副本。

最好的方法是使用event delegation，这需要您在更高级别的元素（例如document）上设置事件处理程序，并且由于event bubbling（这是一个无论如何都是默认情况下发生的，因此不需要其他性能），我们可以在更高级别上处理事件。然后，我们仅测试触发事件的实际元素是什么，并采取相应的措施。这样，我们就不必在很多元素上循环和设置各种事件处理程序（这需要资源）。

// Set up one event listener at a high level that click events will bubble up to
document.addEventListener("click", testTarget);

function testTarget(event){

   // Test to see if the event was triggered by a click to an <a> element
   if(event.target.nodeName === "A"){
      // It was an <a> element that was clicked, show the modal
      showModal();
   }

}

Answer 3

您必须将事件侦听器分别添加到每个链接：

var a = document.getElementsByTagName('a');
for (i = 0; i < a.length; i++) {   
    var links = a[i].addEventListener('click', openmodal);
}

但是请注意，如果之后有新链接到达您的文档中，则这不会影响新链接，因此更具弹性的版本是：

document.addEventListener('click', function(event) {
  if (event.target.matches('a[href], a[href] *')) {
    event.preventDefault();
    openmodal();
  }
}, false);

Answer 4

您需要在循环内将事件侦听器分别添加到每个锚元素，也可以使用Array.prototype.forEach。

//normal for loop
var a = document.getElementsByTagName('a');
for (i = 0; i < a.length; i++) {   
        var link = a[i];
        link.addEventListener("click", openmodal);
}

//forEach
[].forEach.call(document.querySelectorAll('a'), function(anchor, index){
    anchor.addEventListener("click", openmodal);
});

定位网站中的所有链接-JavaScript

4 个答案: