Javascript
console.log(document.getElementById("name").value + " Coursera!");和console.log(document.querySelector("#name").value + " Coursera!");一样吗?
这两个语句在功能上非常相似,但有一些细微的区别:
1. document.getElementById("name")
- 这是一个 专门用于获取具有特定
id
的元素 的方法。 - 它的性能通常比
querySelector
更高,因为它是专门为id
查找设计的。 - 语法简单,适用于你明确知道元素的
id
。
2. document.querySelector("#name")
- 这是一个更通用的选择器方法,可以使用 CSS选择器语法。
#name
表示选择id
为name
的元素。- 它可以选择任何符合 CSS 选择器的元素,比如
.class
,div > p
,[type="text"]
等。
相同点:
- 如果页面中确实有一个元素
id="name"
,那么这两个方法都会返回同一个元素。 - 所以在你这个例子中:
这两行代码的输出是一样的,只要
id="name"
的元素存在并且是一个可以获取 .value
的表单元素(比如 <input>
或 <textarea>
)。总结:
特性
document.getElementById("name")
document.querySelector("#name")
查找方式只能通过元素的 id
可以使用任何 CSS 选择器灵活性较低(只能找 ID)较高(可找 ID、类名、标签等)性能极快,针对 ID 优化相对较慢,但对于大多数场景可忽略不计返回值返回一个 Element
对象或 null
返回一个 Element
对象或 null
特性 | document.getElementById("name") | document.querySelector("#name") |
查找方式 | 只能通过元素的 id | 可以使用任何 CSS 选择器 |
灵活性 | 较低(只能找 ID) | 较高(可找 ID、类名、标签等) |
性能 | 极快,针对 ID 优化 | 相对较慢,但对于大多数场景可忽略不计 |
返回值 | 返回一个 Element 对象或 null | 返回一个 Element 对象或 null |
document.addEventListener("DOMContentLoaded", ...)
是一个监听器,它会在 整个 HTML 文档被完全加载和解析完成后 执行,但 不需要等待图片、样式表等其他资源加载完成。