DOM / BOM | Notion

DOM

DOM이란, HTML 문서의 콘텐츠, 구조, 스타일 등을 다른 프로그래밍 언어에서 접근 가능하도록 설계된 인터페이스(API)
트리 형태의 모양을 띈다.

Untitled

DOM 조회하기

선택자를 사용한 요소 접근
- getElementById: 특정한 id 속성을 가진 요소를 반환하는 메소드
- getElementsByClassName: 특정한 class 속성을 가진 요소들을 반환하는 메소드
  - class는 여러 요소가 사용 가능한 특징이므로, 배열을 반환한다. (HTMLCollection)
- getElementsByTagName: 특정한 HTML 태그를 사용하는 요소들을 반환하는 메소드
  - 하나의 태그가 여러곳에서 쓰일 수 있으므로, 배열을 반환한다. (HTMLCollection)
- querySelector: 위의 메소드를 하나로 합친 기능, 선택자 문법을 사용하여 id, class 등을 구분한다.
  - id 요소 선택: document.querySelector(’#some-element’);
  - class 요소 선택: document.querySelector(’.some-element’);
  - 태그 요소 선택: document.querySelector(’div’);

<html>
	<body>
		<input id="id-input" type="text" placeholder="아이디 입력" />

		<input id="password-input" type="password" placeholder="비밀번호 입력" />

		<button class="login-submit">제출하기</button>

		<script>
			// 1. getElementById
			const idInput = document.getElementById('id-input');
			const passwordInput = document.getElementById('password-input');

			// 2. getElementsByClassName
			const submitButton = document.getElementsByClassName('login-submit')[0];

			function login() {
				console.log(idInput.value); // 입력란의 현재 값을 가져온다.
				console.log(passwordInput.value); // 입력란의 현재 값을 가져온다.
			}

			// submitButton 요소에 클릭 이벤트 추가
			submitButton.addEventListener('click', login);
		</script>
	</body>
</html>

addEventListener 메소드

DOM 요소의 특정한 동작을 정의할때 addEventListener 메소드가 자주 사용된다.
- 클릭, 입력, 호버, 로드, 언로드, 스크롤 등 사용자가 웹과 상호작용할때 일어나는 이벤트들에 대해서 동작을 정의한다.

<aside> 💡 사용 방법: DOM요소.addEventListener(이벤트 타입, 실행할 함수, 이벤트 옵션)

</aside>

이벤트 타입은 아래의 표처럼 다양하게 있다.

이벤트 타입	발생 시점
click	요소를 클릭 했을때
input	(input, select 태그) 입력 및 선택 값이 변경되었을때
load	요소가 웹 문서에 로드 되었을때 (나타났을때)
unload	요소가 웹 문서에서 언로드 되었을때 (사라질때)
scroll	요소를 스크롤 할때
onmouseenter	요소 영역에 마우스 포인터가 들어왔을때 (hover)
onmouseleave	요소 영역에서 마우스 포인터가 나갔을때 (leave)
onmouseover	요소 영역에서 마우스 포인터가 움직일때
onmouseout	요소 영역에서 마우스 포인터가 나갔을때

<aside> 💡 onmouseenter, onmouseleave vs onmouseover, onmouseout 차이점 이벤트를 걸어둔 요소의 자식요소로 마우스를 이동했을때도 onmouseout → onmouseover 호출, 자식요소를 벗어날때도 onmouseout → onmouseover 호출 (이벤트 버블링이란?)

</aside>

DOM 추가하기

자바스크립트의 DOM API 코드를 사용하여 요소를 웹 문서에 추가할 수 있다.
document.createElement 메소드
- 특정한 태그 이름을 넣어서 HTML 태그 객체를 만들 수 있다.
  - HTML 태그에 맞는 이름이면 뭐든 상관없다. (div, span, p, img 등등)
- 웹 문서에 추가된 상태는 아니고, 가상의 객체라고 생각하면 된다.
```
const pTag = document.createElement('p');

pTag.id = 'new-ptag'; // p 태그의 id 지정
pTag.innerHTML = '안녕하세요 새로 생성된 pTag 입니다.'; // p 태그안에 들어갈 HTML 내용
pTag.style.color = 'blue'; // p 태그의 스타일 지정
```

appendChild 메소드

document.createElement 메소드로 만들어진 태그 객체를 실제 웹 문서에 추가시킬 수 있다.
이미 존재하는 태그 및 새로 생성된 태그 객체 모두 해당 메소드를 사용할 수 있다.
- 메소드 사용처에서 appendChild를 호출하면 해당 사용처 태그의 자식으로 추가된다.

const divTag = document.createElement('div');

divTag.innerHTML = 'i am new div';

// document.body: body 태그에 접근, 해당 태그의 
document.body.appendChild(divTag);

/*
	<body>
		<div>i am new div</div>
	</body>
*/

const spanTag = document.createElement('span');
const imgTag = document.createElement('img');

spanTag.innerText = '경북소프트웨어고등학교';
imgTag.src = 'https://경소고이미지_주소'; // 이미지 태그의 src 속성 값 지정

divTag.appendChild(spanTag);
divTag.appendChild(imgTag);

/*
	<body>
		<div>
			i am new div
			<span>경북소프트웨어고등학교</span>
			<img src="https://경소고이미지_주소" />
		</div>
	</body>
*/

<aside> 💡 innerHTML과 innerText의 차이점 innerHTML에서는 HTML 태그와 일반 텍스트를 모두 인식하지만, innerText는 HTML 태그를 일반 텍스트로 인식한다. 따라서 HTML 태그를 사용할때는 innerHTML이 적절하다.

</aside>

DOM 삭제하기

remove, removeChild 메소드

자기 자신을 DOM에서 삭제하려면 remove 메소드를 사용한다.
자기 자신의 하위에 위치한 요소를 삭제하려면 removeChild 메소드를 사용한다.
예제 코드

<html>
  <body>
    <button class="will-delete-button">이 버튼 없애보기</button>

    <div>
      <p>오늘의 할일</p>

      <ul class="todo-list">
        <li>밥먹기</li>
        <li>아침운동 하기</li>
        <li>수업 듣기</li>
        <li>잠자기</li>
      </ul>

      <button class="clear-todo-list-button">할일 모두 삭제</button>
    </div>

    <script>
      const willDeleteButton =
        document.getElementsByClassName('will-delete-button')[0];

      function deleteButton() {
        willDeleteButton.remove(); // "이 버튼 없애보기" 버튼 자체 삭제하기
      }

			// 클릭 이벤트 리스너 등록
      willDeleteButton.addEventListener('click', deleteButton);

      const todos = document.getElementsByClassName('todo-list')[0];
      const clearTodosButton = document.getElementsByClassName(
        'clear-todo-list-button',
      )[0];

      function clearTodoList() {
        const children = [...todos.children]; // todo-list ul의 하위 요소들을 가져오기

        for (const todo of children) {
          if (todo.innerText.length !== 3) { // 하위 요소의 텍스트 길이가 3이 아니라면
            todos.removeChild(todo); // 하위(자식) 요소 삭제
          }
        }
      }

			// 클릭 이벤트 리스너 등록
      clearTodosButton.addEventListener('click', clearTodoList);
    </script>
  </body>
</html>