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 文档被完全加载和解析完成后 执行，但 不需要等待图片、样式表等其他资源加载完成。