document.getElementById & document.querySelector

时间 2020-09-11

标签 document.getelementbyid document getelementbyid document.queryselector queryselector 繁體版

原文原文链接

document.getElementById & document.querySelector

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

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

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

getElementById 仅支持 id 选择器, 返回 An Element object接口
querySelector 支持各类选择器, 返回匹配的第一个 An HTMLElement objectelement

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

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

HTMLElement 是父类，base 接口
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"