如何避免在JS中重复"document.getElementById“调用？

在JS中避免重复调用"document.getElementById"的方法有两种常用的方式：

缓存DOM元素：通过将DOM元素存储在变量中，可以避免重复调用"document.getElementById"。例如：

// 原始写法
document.getElementById("myElement").innerHTML = "Hello World!";
document.getElementById("myElement").style.color = "red";

// 优化写法
var element = document.getElementById("myElement");
element.innerHTML = "Hello World!";
element.style.color = "red";

在优化的写法中，我们首先将"document.getElementById("myElement")"的结果存储在名为"element"的变量中。然后，我们可以直接使用该变量来访问和修改DOM元素的属性，而无需再次调用"document.getElementById"。

使用事件委托：事件委托是一种将事件处理程序绑定到其父元素上，并利用事件冒泡机制来处理子元素触发的事件的方法。通过将事件处理程序绑定到父元素上，我们可以避免在每个子元素上重复调用"document.getElementById"。例如：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// 原始写法
document.getElementById("myList").addEventListener("click", function(event) {
  var target = event.target;
  if (target.tagName === "LI") {
    target.style.color = "red";
  }
});

// 优化写法
document.getElementById("myList").addEventListener("click", function(event) {
  var target = event.target;
  if (target.tagName === "LI") {
    target.style.color = "red";
  }
});

在优化的写法中，我们将事件处理程序绑定到父元素"myList"上，而不是在每个<li>元素上绑定。当点击<li>元素时，事件会冒泡到父元素上，并由父元素的事件处理程序处理。这样就避免了在每个<li>元素上重复调用"document.getElementById"。

通过缓存DOM元素和使用事件委托，我们可以有效地避免在JS中重复调用"document.getElementById"，从而提高代码性能和可维护性。