One of the earliest and most fundamental means of referencing an element in JavaScript, getElementById is very frequently used to “latch onto” an element for manipulation.

getElementById是引用JavaScript中元素的最早，最基本的方法之一，经常被用来“锁存”到元素上进行操作。

Given any element on a page with an id on a page:

给定页面上具有id属性的页面上的任何元素： 

<div id="headlight"> … </div>

JavaScript can reference this element using document.getElementById. Very frequently, the resulting object is set to a variable, making it much easier to refer to later.

JavaScript可以使用document.getElementById引用此元素。 通常，将结果对象设置为变量 ，以便以后引用时容易得多。 

var headlight = document.getElementById("headlight");

Note that it is “get element”, singular. This makes sense, since the id value for an element must be unique on a web page: “get elements by id” would be a contradiction.

请注意，它是“ get element ”(单数)。 这是有道理的，因为元素的id值在网页上必须是唯一的：“通过id获取元素 ”将是一个矛盾。

Displaying the value of the variable in the console would present the object:

在控制台中显示变量的值将显示该对象： 

console.log(headlight);

> <div id="headlight"> … </div>

There’s a few things to note at this point:

此时有几件事要注意：

  • the variable is not required to have the same name as the element’s id value, although it makes sense to do so (and is therefore a recommended practice). 变量不需要具有相同的名称作为元素的id值，虽然它是有道理这样做的(因此是值得推荐的做法)。
  • getElementById, like all JavaScript, is case-sensitive; it can’t be written as getElementByID (and won’t be executed if it is). 像所有JavaScript一样， getElementById 区分大小写 ； 它不能写为getElementByID (如果是，则不会执行)。
  • similarly, the id value is case sensitive: document.getElementById("Headlight") won’t work in this example. 同样， id值区分大小写：在此示例中， document.getElementById("Headlight")无效。
  • Unlike CSS, there’s no octothorpe (#) used in front of the id value when referencing it in getElementById, since it’s clear we’re already referring to an id. 与CSS不同，在getElementById引用id值时，在id值之前没有使用八字形( # )，因为很明显，我们已经在引用id 。

(Auto Id?)

You may have come across the curious fact that modern browsers automatically create objects for any elements that have an id. That is, loading a page that features the element example we’ve been using, and doing nothing else but going to the console to type this:

您可能会遇到一个奇怪的事实，现代浏览器会自动为具有id任何元素创建对象。 也就是说，加载一个包含我们一直在使用的元素示例的页面， 除了在控制台上键入以下内容外 ， 什么也不做： 

> headlight

…will produce the same result as explicitly creating a variable, as we did earlier.

…将产生与显式创建变量相同的结果，就像我们之前所做的那样。

However, this should be considered a bug, rather than a feature: you should always explicitly reference an id, rather than depending on this behaviour.

但是，这应该被认为是一个错误，而不是一个功能：您应该始终显式引用id ，而不要依赖于此行为。

(Exclusivity)

Unlike other methods that we will look at in this series, getElementById is an exclusive method of the document object, and is always associated with it: that is, it must always be written as document.getElementById().

与本系列中将要介绍的其他方法不同， getElementById是document对象的专有方法，并且始终与之关联：也就是说，它必须始终以document.getElementById()形式编写。

(Conclusion)

Historically, getElementById was used a great deal in JavaScript, which tended to leave markup littered with id attributes. While it remains very useful, greater flexibility and precision is usually provided by newer alternatives such as querySelector, reducing the need for id values everywhere.

从历史上看， getElementById在JavaScript中被大量使用，这往往会使标记中充斥着id属性。 尽管它仍然非常有用，但是通常由更新的替代项(例如querySelector提供更大的灵活性和精度，从而减少了对id值的需求。

Technically, the JavaScript Selectors API encompasses only document.querySelector and related methods; for the purpose of this reading list, I’ve grouped all JavaScript methods that “select” elements from a web page together as “JavaScript selectors”.

从技术上讲，JavaScript Selectors API 仅包含document.querySelector和相关方法； 出于本阅读清单的目的，我将所有“选择”网页中的元素JavaScript方法归为“ JavaScript选择器”。