![[자바 스크립트] 8. DOM 제어](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-31T07%3A54%3A31.148Z-7b7f8c34-4ae3-4910-9c91-e779042b2321&w=3840&q=75)
querySelector는 첫 번째 요소만 반환하고,querySelectorAll은 여러 요소를 반환<!DOCTYPE html>
<html>
<body>
<h2>My First Page</h2>
<p id="demo"></p>
<script>
let demoDom = document.querySelector("#demo");
demoDom.innerHTML = "Hello World"
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>My Second Page</h2>
<p class="demo1"></p>
<p class="demo1"></p>
<p class="demo2"></p>
<script>
let demo1DomList = document.querySelectorAll(".demo1");
console.log(demo1DomList);
console.log(demo1DomList[0]);
console.log(demo1DomList[1]);
let d1 = demo1DomList[0];
let d2 = demo1DomList[1];
d1.innerHTML = "Hello";
d2.innerHTML = "World";
let demo2Dom = document.querySelector(".demo2");
demo2Dom.innerHTML = "Good";
</script>
</body>
</html>
Share article