Jonvy

导航

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 选择器的元素,比如 .classdiv > 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 文档被完全加载和解析完成后 执行,但 不需要等待图片、样式表等其他资源加载完成。

posted on 2025-08-10 22:49  不亮  阅读(9)  评论(0)    收藏  举报