728x90
querySelector() ๊ณผ querySelectorAll()์ ์ฐจ์ด์ ๋ํด ์ ๋ฆฌํด๋ณด์.
querySelector()
- document.querySelector()์ ๋ฌธ์ ๋ด์์ ์ ๋ ฅํ ์ ํ์์ ์ผ์นํ๋ ์ฒซ ๋ฒ์งธ ์์๋ฅผ ๋ฐํํ๋ค.
- ๋ง์ฝ ์ผ์นํ๋ ์์๊ฐ ์์ผ๋ฉด, null์ ๋ฐํํ๋ค.
<script>
function clickMe(){
const doc= document.querySelector("#first >.Happy");
console.log(doc);
doc.style.backgroundColor="green";
}
</script>
<div id="first">
<p class="Happy">์ค๋์ ์ผ์์ผ!</p>
<p class="Happy" onclick="clickMe()">๋๋ ๋๋ฌด ํ๋ณตํด!</p>
<p class="Happy">๋๋ ํ๋ณตํ๋?!</p>
</div>
querySelectorAll()
- querySelectorAll()์ ์ ๋ ฅํ ์ ํ์์ ์ผ์นํ๋ ๋ชจ๋ ์์๋ฅผ ๋ฐํํ๋ค.
- ๋ฐํ ํ์ ์ด ๋ฐฐ์ด(๋ฆฌ์คํธ)์์ผ๋ก, ์ธ๋ฑ์ค๋ฅผ ํตํด ์กฐ์ํ ์ ์๋ค.
0๋ฒ์งธ ์ธ๋ฑ์ค์ ์์์ ๋ฐฐ๊ฒฝ์์ ๋ณํ๋ฅผ ์ค๋ณด์!
*์ ์ด์ list๋ก ๋ด์ ๊ฒ์ ํ์ธํ ์ ์๋ค.
<script>
function clickMe(){
var list = document.querySelectorAll(".Happy");
list[0].style.backgroundColor = "pink";
}
</script>
<body>
<p class="Happy" onclick=clickMe()>์ค๋์ ์ผ์์ผ!</p>
<p class="Happy">๋๋ ๋๋ฌด ํ๋ณตํด!</p>
<p class="Happy">๋๋ ํ๋ณตํ๋?!</p>
</body>
๋ฐฐ๊ฒฝ์์ ๋ณํ๊ฐ ์๊ธด๊ฒ์ ํ์ธํ ์ ์๋ค.
ํ๋ฆฐ ๋ถ๋ถ์ด๋ ์ด์ํ ๋ถ๋ถ์ด ์์ผ๋ฉด ๋๊ธ๋ก ์ง์ ํด์ฃผ์ธ์!
๊ฐ์ฌํฉ๋๋ค :)
728x90
