[FC] DOM의 이해 Day-9
DOMchildrenclosetnextElementSiblingparentElementpreviousElementSiblingquerySelector부모 요소 탐색자식 요소 탐색형제 요소 탐색
0
FC
목록 보기
9/18
DOM?
Document Object Model (문서 객체 모델)
실제 Body 안쪽 html 요소들을 script로 제어하는 기능
<body>
<section id="wrap">
<article class="box1">
Text1
</article>
<article class="box2">
<a href="#">Text2</a>
</article>
</section>
</body>DOM 제어는 상당히 중요하다. 원하는 곳을 직접 제어하기 위해서..
JS를 연결하는 방법은 다양하지만 가장 순수한 JS 연결법은..
<script>main.js</script>모든 예시는 위 코드를 바탕으로 생각하고, body가 최상위 요소다.
자식 요소 탐색
방법은 다양하다.
- 직접 querySelector()를 통해서 선택하는 방법
- 부모요소.children을 통한 선택
형제 요소 탐색
- 이전 형제요소 탐색: 형제요소.previousElementSibling
- 다음 형제요소 탐색: 형제요소.nextElementSibling
부모 요소 탐색
- 현재요소.parentElement
- 현재요소.closet()
ex) 직접적으로 wrap 을 찾는 방법
const wrap = document.querySelector('#wrap');
console.lor(wrap);ex) wrap을 기준으로 box2를 찾는 방법
const box2 = wrap.querySelector("box2");
wrap이 box2의 부모요소이기 때문에 wrap에서 querySelector를 통해 box2 탐색이 가능하다.ex) children을 통한 탐색
const children = wrap.children;wrap에 포함된 box1, box2를 출력한다.
ex) box2를 기점으로 형제요소 찾기
const prevEl = box.previousElementSibling;box2 이전에 있는 형제 요소를 찾는다.
box2 이전에는 box1이 존재하기 때문에, box1을 출력한다.
ex) 부모요소 찾기
a를 기점으로 부모요소 찾기
const parentElement = a.parentElement;a의 부모는 box2이기 때문에, box2를 출력한다.
ex) 자식요소를 기점으로 부모의 부모 요소를 찾고 싶을 경우?
const grandParent = a.closet("#wrap");
console.log(grandParent);closet을 통해서 부모의 부모 (box2의 부모인 wrap을 찾고 싶을 경우,직접적으로 #wrap을 입력해도 잘 찾을 수 있다.)
메일은 매일 확인하고 있습니다. 궁금하신 부분이나 틀린 부분에 대한 지적사항이 있으시다면 언제든 편하게 연락 부탁드려요 :)