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을 입력해도 잘 찾을 수 있다.)

profile
메일은 매일 확인하고 있습니다. 궁금하신 부분이나 틀린 부분에 대한 지적사항이 있으시다면 언제든 편하게 연락 부탁드려요 :)

0개의 댓글