如何在 JavaScript 中编写 document.getElementById() 方法的简写？

什么是 document.getElementById() 方法？

在 JavaScript 中，document.getElementById() 是一个常见的方法，它可以返回指定 ID 的 HTML 元素。通过 ID 获取元素可以在 JavaScript 中进行各种各样的操作，比如更改样式、更改文本内容、添加或删除元素等等。

var element = document.getElementById("myElement");

上面的代码就是获取 ID 为 "myElement" 的元素，将它赋值给变量 element 。

document.getElementById() 的缺点

虽然 document.getElementById() 在 JavaScript 中是一个非常常见的方法，但是它也存在一些缺点。

过长的写法

在实际开发中，有时需要多次使用 document.getElementById() 方法，这时候就会出现重复的代码：

var element1 = document.getElementById("myElement1");
var element2 = document.getElementById("myElement2");
var element3 = document.getElementById("myElement3");
// ...

这样的代码看起来很不优雅，也不便于维护。

可能会出现错误

在获取 ID 为 "myElement" 的元素时，如果该元素不存在，会返回 null。

var element = document.getElementById("myElement");
if (element) {
  // 对元素进行操作
} else {
  // 元素不存在
}

如果忘记判断元素是否为空就对它进行操作，就会导致错误。

document.getElementById() 的简写

为了避免前面提到的两个问题，我们可以在 JavaScript 中为 document.getElementById() 方法编写简写。

方法一：使用变量

在 JavaScript 中，可以使用变量来存储 document.getElementById() 方法。这样，可以避免重复的代码，并且可以减少出错的可能性。

var $ = function(id) {
  return document.getElementById(id);
}
// 调用：
var element1 = $("myElement1");
var element2 = $("myElement2");
var element3 = $("myElement3");
// 使用 document.createElement() 方法创建新元素，并添加到页面上
var myDiv = document.createElement("div");
$("myContainer").appendChild(myDiv);

在上面的代码中，我们使用 $ 符号来代替 document.getElementById() 方法。在调用的时候，只需要传入 ID 变量即可。这样的代码不仅简洁明了，而且也十分便于维护。

方法二：使用对象

除了使用变量来存储 document.getElementById() 方法之外，我们还可以使用对象。使用对象的好处在于可以将所有 ID 的变量都存储在一个对象中，更加方便地进行操作。

var App = {
  elements: {
    myElement1: document.getElementById("myElement1"),
    myElement2: document.getElementById("myElement2"),
    myElement3: document.getElementById("myElement3")
  },
  // 添加新元素
  addElement: function(element) {
    $("myContainer").appendChild(element);
  }
}
// 调用：
var element1 = App.elements.myElement1;
var element2 = App.elements.myElement2;
var element3 = App.elements.myElement3;
// 使用 App.addElement() 方法创建新元素，并添加到页面上
var myDiv = document.createElement("div");
App.addElement(myDiv);

在上面的代码中，我们将所有的 ID 都存储在 App.elements 对象中。调用的时候也只需要通过对象的方式访问即可。除此之外，我们还定义了 addElement() 方法，用来创建新元素并添加到页面上。

总结

虽然 document.getElementById() 方法在 JavaScript 中非常常见，但是它也存在一些缺点。通过使用变量或者对象来存储该方法，可以避免代码重复并减少出错的可能性。具体来说，使用变量的方式代码更为简洁，而使用对象的方式可以更方便地对多个 ID 进行操作。