Baseline Widely available
Document.querySelector()
ë ì ê³µí ì íì ëë ì íì ëì¹ì ì¼ì¹íë 문ì ë´ ì²« ë²ì§¸ Element
를 ë°íí©ëë¤. ì¼ì¹íë ììê° ìì¼ë©´ null
ì ë°íí©ëë¤.
ì°¸ê³ : íìì ê¹ì´ì°ì depth-first ì ìpre-orderìíë¡, 문ìì 첫 ë²ì§¸ ììë¶í° ììí´ ìì ë ¸ëì ì를 기ì¤ì¼ë¡ ìíí©ëë¤.
구문document.querySelector(selectors);
매ê°ë³ì
selectors
íë ì´ìì ì íì를 í¬í¨í DOMString
. ì í¨í CSS ì íìì¬ì¼ë§ íë©° ìë ê²½ì° SYNTAX_ERR
ìì¸ê° ë°ìí©ëë¤. ì íìë¡ DOM ìì ì íí기 문ì를 ì°¸ê³ í´ ì íìì ì íì ìì± ë°©ë²ì ë ììë³´ì¸ì.
ì°¸ê³ : CSS íì¤ êµ¬ë¬¸ì´ í¬í¨íë 문ìê° ìë ê²½ì° ìì¬ëì(\
)ë¡ ì´ì¤ì¼ì´íí´ì¼ í©ëë¤.
JavaScript ëí ìì¬ëìë¡ ì´ì¤ì¼ì´í를 í기 ë문ì í¹í 주ì를 기ì¸ì¬ì¼ í©ëë¤. ìì¸í ë´ì©ì í¹ì 문ì ì´ì¤ì¼ì´í í목ì ì°¸ê³ íì¸ì.
ë°íê°ì ê³µí CSS ì íì를 ë§ì¡±íë 첫 ë²ì§¸ Element
ê°ì²´. ê²°ê³¼ê° ìë¤ë©´ null
.
ì íì를 ë§ì¡±íë 모ë ììì 목ë¡ì´ íìíë¤ë©´ querySelectorAll()
ì ëì ì¬ì©íì¸ì.
SYNTAX_ERR
selectors
ì êµ¬ë¬¸ì´ ì í¨íì§ ìì.
ë§ì½ selector
ê° ID ì íìì¸ë°, í´ë¹ ID를 ì못 ì¬ì©íì¬ ë¬¸ì ë´ì ì¬ë¬ ë² ì¬ì©íì¼ë©´ 첫 ë²ì§¸ë¡ ê·¸ ID를 ì¬ì©í ìì를 ë°íí©ëë¤.
CSS ìì¬ ììë ì íì APIê° ëª ìí ëë¡ ì´ë í ììë ë°ííì§ ììµëë¤.
í¹ì 문ì ì´ì¤ì¼ì´íCSS 구문ì ë°ë¥´ì§ ìë, ì컨ë ì½ë¡ ì´ë 공백ì í¬í¨í ì íìë ID를 ì¬ì©í´ì¼ íë©´ ë°ëì ë°±ì¬ëì("\
")를 ì¬ì©í´ í´ë¹ 문ì를 ì´ì¤ì¼ì´íí´ì¼ í©ëë¤. ë°±ì¬ëìë JavaScriptì ì´ì¤ì¼ì´í 문ìì´ê¸° ë문ì, ë°±ì¬ëì를 문ìë¡ ì
ë ¥íë ¤ë©´ ë°ëì ë ë² ì´ì¤ì¼ì´íí´ì¼ í©ëë¤. í ë²ì JavaScript 문ìì´ì íìíê³ , ë ë¤ë¥¸ í ë²ì querySelector()
ì íìí©ëë¤.
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log("#foo\bar"); // "#fooar" ('\b'ë ë°±ì¤íì´ì¤ 컨í¸ë¡¤ 문ì)
document.querySelector("#foo\bar"); // ì¼ì¹íë ìì ìì
console.log("#foo\\bar"); // "#foo\bar"
console.log("#foo\\\\bar"); // "#foo\\bar"
document.querySelector("#foo\\bar"); // 첫 ë²ì§¸ <div>
document.querySelector("#foo:bar"); // ì¼ì¹íë ìì ìì
document.querySelector("#foo\\:bar"); // ë ë²ì§¸ <div>
</script>
ìì í´ëì¤ë¥¼ ë§ì¡±íë 첫 ë²ì§¸ ìì ê²ì
ìë ìì ë 문ììì "myclass
"ë¼ë í´ëì¤ë¥¼ ì¬ì©íë 첫 ë²ì§¸ ìì를 ë°íí©ëë¤.
var el = document.querySelector(".myclass");
ì¢ ë ë³µì¡í ì íì
ìë ìì ì²ë¼ ì ë§ ê°ë ¥í ì íìë ì¬ì©í ì ììµëë¤. ìì ì ê²°ê³¼ë í´ëì¤ê° "user-panel main
"ì¸ <div>
(<div class="user-panel main">
) ìì, ì´ë¦ì´ "login
"ì¸ <input>
ì¤ ì²« ë²ì§¸ ììì
ëë¤.
var el = document.querySelector("div.user-panel.main input[name=login]");
ëª
ì¸ ë¸ë¼ì°ì í¸íì± ë 보기
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4