document.getElementById & document.querySelector

document.getElementById & document.querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

1. getElementById 仅支持 id 选择器, 返回 An Element object

2. querySelector 支持各种选择器, 返回匹配的第一个 An HTMLElement object

https://developer.mozilla.org/en-US/docs/Web/API/Element

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

1. HTMLElement 是父类，base 接口
2. Element 是子类，实现/继承于 HTMLElement 接口

demo

document.getElementById("demo");
<section id=​"demo">​
​</section>​
document.querySelector("#demo")
<section id=​"demo">​
​</section>​
document.querySelectorAll("#demo")
NodeList [section#demo]0: section#demolength: 1__proto__: NodeList
document.getElementById("demo") === document.querySelector("#demo")
true
document.getElementById("demo") == document.querySelector("#demo")
true
typeof document.getElementById("demo")
"object"
typeof document.querySelector("#demo")
"object"

---