Javascirpt - DOM과 BOM

dyeon-dev·2024년 7월 7일

JavaScript

자바스크립트

목록 보기

4/10

해당 포스팅은 GOAT 자바스크립트 책으로 공부한 내용을 정리한 것이다.

DOM

DOM(Document Object Model)은 HTML이나 XML 형태를 쉽게 접근하기 위해 만든 모델이다. 각 요소에 쉽게 접근할 수 있어 조회/추가/변경/삭제를 도와준다.

HTML - 정해진 태그, UI용
XML - 정해지지 않은 태그, 데이터 교환용, 필요한 태그를 정함

HTML 문서의 DOM 예시이다. 문서 객체 모델은 노드와 객체로 웹 문서를 논리적으로 표현한다.
각 노드는 내부적으로 요소(element)노드, 속성(attribute)노드, 텍스트 노드 등 여러 개의 유형으로 구분하는데 그중에서 태그로 표현된 요소노드를 짧게 '요소(element)'라고 한다.

요소에 접근하는 다양한 방법이 있다. 4가지로 구분해서 알아보자.

1. HTML요소의 발견

요소 접근 메서드	방식	설명
getElmentById()	단수형	id 속성값으로 특정값을 갖는 요소 반환
getElementsByTagName()	복수형	특정 태그(tag)을 갖는 모든 요소 반환
getElementsByClassName()	복수형	class 속성값으로 특정값을 갖는 모든 요소 반환
getElementsByName()	복수형	name 속성값으로 특정값을 갖는 모든 요소 반환
querySelector()	단수형	특정 CSS 선택자 형식과 일치하는 첫번째 요소 반환
querySelectorAll()	복수형	특정 CSS 선택자 형식과 일치하는 모든 요소 반환

웹 문서에서 여러 개의 이미지<img>가 배열 형식으로 있는 경우, document.images를 사용하여 접근한다.

	<div class="col-4">
        <img src="https://dummyimage.com/600x400/000/fff" class="img-fluid" alt="첫번째 이미지">
      </div>
      <div class="col-4">
        <img src="https://dummyimage.com/600x400/666/fff" class="img-fluid" alt="두번째 이미지">
      </div>
      <div class="col-4">
        <img src="https://dummyimage.com/600x400/bbb/000" class="img-fluid" alt="세번째 이미지">
      </div>

        
let imgs = Array.from(document.images);
        
imgs.forEach(function(item, index) {
  if (num == index) {
    item.style.display = 'none';
  } else {
    item.style.display = '';
  }
});

링크<a>가 배열 형식으로 있는 경우, document.links 사용하여 접근한다.

<a href="https://www.booksr.co.kr/" class="link-primary" target="_blank">생능출판사</a>
<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript" class="link-success">MDN</a>
<a href="https://www.w3schools.com/js/default.asp" class="link-danger">w3schools.com</a>
<a href="https://getbootstrap.com/" class="btn btn-secondary" target="_blank">부트스트랩</a>


let hyperlinks = document.links;

[...hyperlinks].forEach(function(item, index) {
  if (num == index) item.click();
});

폼<form>이 있는 경우 폼에 name 속성을 추가하여 document.forms[폼이름] 또는 document.폼이름으로 <form>에 접근할 수 있다. form 접근 방법은 20여가지나 되고 많다. 다 알필요는 없다.

<form>
  <input type="text" class="form-control" name="user" placeholder="1 번째 form">
</form>
</div>
<div class="col-4">
<form name="myForm">
  <input type="text" class="form-control" name="user" placeholder="2 번째 form">
</form>
</div>
<div class="col-4">
<form name="yourForm">
  <input type="text" class="form-control" name="user" placeholder="3 번째 form">
</form>

document.forms[0].user.focus();
document.forms['myForm'].user.focus();
document.yourForm.user.focus();
  ...

2. HTML 요소의 변경

요소 접근 메서드	설명
el.setAttribute('요소',새로운값)	요소에 접근하여 속성을 새로운 값으로 변경
el.getAttribute()	요소의 속성값 조회

// 이미지의 속성에 접근하여 새로운 url로 변경
img.setAttribute('src', url); // img.src = url;과 같음
// 클래스의 속성에 접근하여 새로운 클래스로 변경
list.setAttribute('class', 'list-group-item active');

3. HTML 요소의 추가

요소 접근 메서드	설명
createElement()	새로운 요소 생성
createAttribute()	요소의 속성 생성
createTextNode()	새로운 텍스트 노드 생성
parentElement()	자식으로 연결하기 위해 현재 선택한 부모 요소를 찾음
appendChild()	자식으로 연결

const newList = document.createElement('li'); // <li> </li>
const newAttr = document.createAttribute('class'); // class=""
newAttr.value = 'list-group-item active'; // class="list-group-item active"
newList.setAttributeNode(newAttr); // <li class="list-group-item active"> </li>

const newText = list.innerText + ' [추가]';
const newTextNode = document.createTextNode(newText);
newList.appendChild(newTextNode); // <li class="list-group-item active"> [추가] </li>

console.log(list.parentElement);
list.parentElement.appendChild(newList);

4. HTML 요소의 삭제

요소 접근 메서드	설명
removeChild()	특정 요소 삭제

<ul class="list-group">
    <li class="list-group-item">1 번째</li>
    <li class="list-group-item">2 번째</li>
    <li class="list-group-item">3 번째</li>
    <li class="list-group-item">4 번째</li>
    <li class="list-group-item">5 번째</li>
</ul>

const ul = document.querySelector('.list-group');

    document.querySelector('.btn-warning').onclick = function() {
      const target = document.querySelectorAll('li')[2];
      ul.removeChild(target);
    }

    document.querySelector('.btn-success').onclick = function() {
      console.log(ul.children);
      if (ul.children.length) {
        ul.removeChild(ul.children[0]);
      }
    }

BOM

BOM(Browser Object Model)은 브라우저가 제공하는 여러 기능에 대해 DOM과 같이 객체의 구조로 이해하는 모델이다. 최상위 객체인 window와 하위 객체에서 브라우저의 기능으로 제공하는 일부 객체를 묶는다.
대부분의 브라우저에서 구현은 되어있지만, 정의된 표준이 없어 브라우저 제작사 마다 세부사항이 다르고 다소 한정적이라는 특징이 있다.

실제 브라우저 화면에서 DOM과 BOM의 위치

대표적인 BOM 객체

1) window: Global Context. 브라우저 창 객체
2) screen: 사용자 환경의 디스플레이 정보 객체
3) location: 현재 페이지의 url을 다루는 객체
4) navigator: 웹브라우저 및 브라우저 환경 정보 객체
5) history: 현재의 브라우저가 접근했던 URL history
6) pop alert: alert(), confirm(), prompt()와 같은 팝업 알람 기능을 갖는 객체
7) timing: setTimeout(), setInterval()의 타이밍 기능을 갖는 객체
8) cookies: 사용자 컴퓨터에 사용자의 웹페이지 관련 정보를 저장, 관리하는 기능을 갖는 객체