![[자바스크립트] 4. Dom 제어](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-31T08%3A28%3A07.561Z-52609c45-57da-4e8a-9318-66e95f9049ab&w=3840&q=75)
1. Script의 위치
- HTML 내 script 위치는 제어할 DOM보다 아래에 존재해야 함
- 위에서 한 줄씩 렌더링을 진행하므로, script가 위에 있으면 제어할 DOM을 찾지 못함
- body의 맨 아래쪽에 존재하는 것이 좋음
2. Dom 제어 함수
- querySelector : 하나의 dom을 제어 : Object
<!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>
- querySelectorAll : 여러 개의 dom을 제어 : Collection
<!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);
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>
- querySelector, querySelectorAll ⇒ dom 지정 방법은 css와 동일
- id : #id
- class : .class
- tag : tag
Share article