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

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

您有几处需要更正。第一:

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

}