一、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选择器');