document.getElementById() &document.querySelector()

一、document.getElementById()：

1.document 接口的 getElementById() 方法：

返回一个表示 id属性与指定字符串相匹配的元素的 Element 对象，由于元素的 ID 在指定时必须是独一无二的，因此这是快速访问特定元素的有效方法。

如果需要访问那些没有 ID 的元素，你可以考虑在 querySelector()中使用选择器来查找这些元素。

备注： 文档中的 ID 必须是唯一的。如果一个文档中有两个及以上的元素具有相同的 ID，那么该方法只会返回查找到的第一个元素。

2.语法：

getElementById(id)

备注： 方法名称中 "Id" 的大小写必须正确才能使代码正常运行；getElementByID() 是无效且无法正常运行的，无论它看起来是多么自然。

3.参数：

id：所要查找的元素的 ID。ID 是大小写敏感的字符串，且在文档中是唯一的；应只有一个元素具有任何给定的 ID。

4.返回值：

返回一个表示与指定 ID 相匹配的 DOM 元素的 Element对象。若在当前文档中没有找到匹配的元素，则返回 null。

二、document.querySelector()

1.文档对象模型Document引用的 querySelector() 方法:

返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

备注： 匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。

2.语法：

element = document.querySelector(selectors);

3.参数：

selectors：包含一个或多个要匹配的选择器的 DOM 字符串DOMString。该字符串必须是有效的 CSS 选择器字符串；如果不是，则引发SYNTAX_ERR异常。

备注： 必须使用反斜杠字符转义不属于标准 CSS 语法的字符。由于 JavaScript 也使用退格转义，因此在使用这些字符编写字符串文字时必须特别小心。

4.返回值：

表示文档中与指定的一组 CSS 选择器匹配的第一个元素，一个 Element对象。如果没有匹配到，则返回 null。

如果你需要与指定选择器匹配的所有元素的列表，则应该使用querySelectorAll()。

5.异常：

SYNTAX_ERR

指定selectors的语法无效。

注意：

如果选择器是一个 ID，并且这个 ID 在文档中错误地使用了多次，那么返回第一个匹配该 ID 的元素，CSS 伪类不会返回任何元素。

6.转义特殊字符：

如果要匹配的 ID 或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）

三、总结：

1.在html元素上添加id属性并设置值作为id选择器
2.在css中使用设置的id选择器给对应的html元素添加样式，(在css中，id选择器以#开头，如#box)
3.如果使用JavaScript通过id选择器获取dom元素，可通过以下两种方式：

document.querySelector('#id选择器');
document.getElementById('id选择器');