JavaScript 기초 - DOM / BOM 이해

ID짱재·2021년 4월 12일

목록 보기

12/19

🌈 DOM / BOM 이해

🔥 DOM과 BOM이란?

🔥 DOM 객체 다루기

🔥 DOM 이벤트(Event)

1. DOM과 BOM이란?

DOM(Document Object Model) : 웹 문서의 모든 요소를 JavaScript를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법

즉, 웹에서 문서에 삽입된 모든 각 요소(텍스트, 그림 등)를 객체로 인식하고 조작하는 것을 문서 객체모델, 또는 DOM이라 부름

BOM(Browser Object Model)은 웹브라우저 전체를 객체로 관리하는 것을 의미하며, JavaScript를 이용하여 웹브라우저 창 등을 조작할 수 있음

1) DOM 객체 예시

document 객체를 통해, HTML/CSS 등을 수정 및 제어 가능
document.body.style.background = 'red' // 현재 페이지의 배경색을 red 적용

2) BOM 객체 예시

navigator 객체 : 브라우저와운영체제 정보 제공

location 객체 : URL 관련 핸들링
console.log(navigator.userAgent); // Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36
console.log(navigator.platform); // MacIntel
console.log(location.href); // chrome://new-tab-page/

2.DOM 객체 다루기

1) DOM 객체 생성(Create)

document 객체를 통해 HTML 요소를 생성/추가 할 수 있음

생성 후 추가해줘야지만 웹에 표시됨

🔍 document.createElement('태그명') 👈 HTML 태그 생성

🔍 document.appendChild('요소') 👈 HTML 요소에 태그 추가

2) DOM 객체 선택(Read)

document 객체를 통해 제어할 HTML 요소를 찾아 선택할 수 있음

🔍 document.getElementById('ID명') 👈 id이름으로 찾기

🔍 document.getElementsByClassName('클래스명') 👈 해당하는 요소들을 배열로 반환

🔍 document.getElementsByTagName('태그명') 👈 해당하는 요소들을 배열로 반환

🔍 document.querySelector('CSS 셀렉터') 👈 해당하는 첫번째 요소를 반환

🔍 document.querySelectorAll('CSS 셀렉터') 👈 해당하는 모든 요소를 배열로 반환

🔍 element.parentNode 👈 해당 element의 부모 요소 탐색

🔍 element.nexElementSibling 👈 해당 element의 같은 레벨의 다음 형제 요소 탐색

🔍 element.previousElementSibling 👈 해당 element의 같은 레벨의 이전 형제 요소 탐색

🔍 element.children 👈 해당 element의 자식 요소들 탐색(배열 형태)

3) DOM 객체 수정(Update)

🔍 element.innerText = '입력 내용' 👈 element에 '입력 내용'으로 text 수정

🔍 element.innerHTML = '입력 내용' 👈 element에 text을 포함해 html태그도 넣음

🔍 element.style.속성명 = '값' 👈 CSS 속성 값 수정

🔍 element.setAttribute(속성, 값) 👈 속성을 세팅하거나, 수정 가능
const yello_div = document.createElement("div"); // div 요소 생성 후 객체(yello_div)에 담음
yello_div.innerText = "Yellow Div"; // HTML 요소 내용 입력
yello_div.setAttribute("class", "box1"); // HTML 요소에 attribute 설정
yello_div.style.background = "yellow"; // CSS style 적용하기
document.body.appendChild(yello_div); // body의 자식으로 div 삽입

4) DOM 객체 삭제(Delete)

🔍 document.removeChild('element') 👈 요소(element) 삭제
🔍 document.replaceChild('A', 'B') 👈 B 요소(element)를 A요소로 대체

// green_box 요소 생성
const green_box = document.createElement("div"); // HTML 요소 생성
green_box.innerText = "Green Box"; // HTML 요소 내용 수정
green_box.style.background = "green"; // CSS style 적용하기
// red_box 요소 생성
const red_box = document.createElement("div"); // HTML 요소 생성
red_box.innerText = "Red Box"; // HTML 요소 내용 수정
red_box.style.background = "red"; // CSS style 적용하기
// 삭제 및 대체
document.body.appendChild(green_box); // 요소 추가
document.body.removeChild(green_box); // 요소 삭제
document.body.appendChild(red_box); // 요소 추가
document.body.replaceChild(green_box, red_box); // red_box를 green_box로 교체

3. DOM 이벤트(Event)

1) event 유형

이벤트란 웹페이지에서 발생하는 결과를 코드에 알리기 위해 전달

🔍 load : 로드가 완료되었을 때 발생

🔍 resize : 윈도우 크기가 변경되었을 때 발생

🔍 keydown : 키를 눌렀을 때 발생

🔍 keyup : 키에서 손을 땟을 때 발생

🔍 change : 변동이 있을 때 발생

🔍 click : 클릭할 때 발생

🔍 focus : 포커스를 주었을 때 발생

🔍 mousedown : 마우스 커서로 클릭했을 때 발생

🔍 mouseout : 마우스 커서가 객체 밖으로 벗어났을 때 발생

🔍 mouseover : 마우스 커서가 객체 위로 올려졌을 때 발생

🔍 mousemove : 마우스 커서가 움직였을 때 발생

🔍 mouseup : 마우스에서 손을 땟을 때 발생

🔍 select : option 태그 등에서 선택을 했을 때 발생

2) event 등록

addEventListener()를 통해 이벤트가 발생되었을 때 실행할 함수를 설정 할 수 있음
🔍 [event target].addEventListener('event type', function name);
addEventListener()는 타겟이 대상에 어떤 유형의 이벤트가 발생되면 함수를 실행시킴

<!-- addEventListener 예시 -->
<!-- 화면을 click하면 alert창 실행 -->
<!DOCTYPE html>
<html>
  <body>
    <script>
      addEventListener("click", ()=>{
        alert('Clicked');
      })
    </script>
  </body>
</html>

removeEventListener()를 통해 이벤트가 발생되었을 때 삭제 가능
🔍 [event target].removeEventListener('event type', function name);
removeEventListener()는 이미 등록한 event와 인자를 동일하게 작성해주어야 함

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 200px;
        height: 200px;
        border: 1px solid;
        border-radius: 8px;
        text-align: center;
        line-height: 200px;
        font-size : 20px;
        font-weight : bold;
      }
      .box {
        background: tomato;
      }
    </style>
  </head>
  <body>
    <div class="box">tomato box</div>
    <script>
      const box = document.querySelector(".box");
      // box에 mouseover되면 배경과 텍스트를 변경
      box.addEventListener("mouseover", () => {
        box.style.background = "darkseagreen";
        box.innerText = 'You mouseover';
      });
      // box에 mouseout되면 box를 제거
      box.addEventListener("mouseout", () => {
        document.body.removeChild(box);
      });
    </script>
  </body>
</html>