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"

相關標籤/搜索

document.getelementbyid

document.queryselector

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。