[JavaScript] DOM의 기초

 

 

▶︎ DOM

 

🥥 DOM 이란?

 

DOM (Document Object Model, 문서 객체 모델)

- 웹 문서에 담겨 있는 모든 요소를 따로 제어 ➡️ 조건에 맞거나 사용자 동ㅇ작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응

- DOM에서는 웹 문서를 하나의 객체로 정의

- 텍스트, 이미지, 표 등 모든 요소를 각각 객체로 정의

- 웹 문서들도 객체이므로 프로퍼티, 메서드를 갖고 있음

 

 

🥥 DOM 트리

 

- 웹 문서는 여러가지 태그가 서로 포함 관계('부모', '자식')를 가지고 있음

- DOM을 활용해 웹 문서의 요소를 부모와 지식으로 구분해서 표시하면 트리모양이 되서 DOM 트리라고 부름

- 노드(node) : DOM 트리에서 가지가 갈라져 나가는 부분

- 루트 노드(root node) : html 노드

- 형제 노드(sibling node) : 같은 부모를 가진 노드

 

 

🥥 웹 요소에 접근하기

 

 

🍎 querySelector() 함수

 

- 선택자를 사용해 웹 요소의 1가지만 가져올 때 사용

- document 객체에 포함된 함수

document.querySelector("p")				// p태그 요소 중 첫번 째 요소
document.querySelector("#container")		// id가 container인 요소
document.querySelector(".box")			// class가 box인 요소 중 첫번째 요소

- 조건에 맞는 요소가 여러개 일 경우 첫번째 요소 1개만 가져옴

 

 

🍎 querySelectorAll() 함수

 

- 한꺼번에 여러개 요소를 가져와 노드 리스트 형태로 저장

- 노드 리스트에 저장된 요소는 배열처럼 인덱슬ㄹ 사용해서 접근

 

 

🍎 웹 요소 내용 수정하기

 

- 프로퍼티를 사용

웹요소.innerText
웹요소.innerHTML
웹요소.textContent

 

innerText  : 웹 브라우저 창에 보이는 내용만 가져옴 (감춰진 것은 안보임)

innerHTML  : 요소 안에 있는 태그 내용을 함께 가져옴

textContent  : 소스에 있는 대로 요소의 내용을 가져옴 (감춰진 것까지 보임)

 

- 내용을 가져와서 내용 수정하기

웹요소.innerText = 내용
웹요소.innerHTML = 내용
웹요소.innerContent = 내용

 

- 이미지 요소에 접근 후 src 속성값 바꾸기

이미지 요소.src = 이미지 파일

 

 

🥥 자바스크립트로 스타일 수정하기

 

🍎 css 속성에 접근해서 수정하기

 

요소.style.속성명

 

const button = document.querySelector("button");

button.onclick = () => {
	button.style.backgroundColor = "black";
   	button.style.color = "white";
}

 

 

🍎 classList

 

- 클래스 스타일을 추가 또는 삭제 가능

- classList 는 요소에 사용한 클래스 스타일을 모두 모아 놓은 프로퍼티

요소.classList;		// 요소에 사용된 클래스 리스트 모두 볼 수 있음

 

- 스타일을 추가, 삭제하거나 토글하기

요소.classList.add(클래스명)
요소.classList.remove(클래스명)
요소.classList.toggle(클래스명)

 

- 특정 클래스 스타일이 있는지 확인하기

요소.classList.contains(클래스명)

 

 

🥥 DOM에서 폼 다루기

※ 폼(form) : 사용자가 내용을 입력할 수 있는 웹 요소

 

 

🍎  텍스트 값 가져오기

 

요소.value

document.querySelector("#name-box").value

 

 

🍎 name 속성값을 사용해 폼 요소에 접근하기

 

<form name="order">
	...
    <input name="product">

HTML에서 위와같이 있을경우 input 박스에 접근할 때 아래와 같이 name으로 접근할 수 있다.

document.order.product.value

 

 

🍎 form 배열을 사용해서 접근하기

 

document.forms					// 모든 form을 가져옴
document.forms[0].elements		// 첫번째 form에 있는 폼 요소를 모두 가져옴
document.forms[0].elements[0]	// 첫번째 form 요소에 첫번째 요소를 가져옴

 

 

🍎 선택 목록, 항목에 접근하기

 

- HTML에서 selector를 사용한 선택 목록의 option(항목)에 접근할 때 아래와 같은 방법을 사용할 수 있다.

document.querySelector("#product").options

- HTMLOptionsCollection 형태로 저장

- selectedIndex 에는 사용자가 선택한 옵션의 인덱스 값이 저장 (기본값 0)

➡️ selectedIndex를 활용해 사용자가 선택한 값을 가져올 수 있음

 

 

🍎 체크박스, 라디오 버튼에 접근하기

※ 체크박스 : 여러가지 항목 중 여러개를 선택할 수 있음

※ 라디오박스 : 여러가지 항목 중 한가지만 선택할 수 있음

 

<h1>메뉴 주문</h1>
<form name="orderForm">
<fieldset>
  <legend>메뉴</legend>
  <p>메뉴를 선택하세요</p>
  <label><input type="checkbox" name="menu" value="dolce">돌체라떼</label>
  <label><input type="checkbox" name="menu" value="vanilla">바닐라라떼</label>
  <label><input type="checkbox" name="menu" value="choco">초코라떼</label>
</fieldset>
<fieldset>
  <legend>구매수단</legend>
  <p>구매 수단을 선택하세요</p>
  <label><input type="radio" name="purchase" value="card">카드</label>
  <label><input type="radio" name="purchase" value="cash">현금</label>
  <label><input type="radio" name="purchase" value="gifticon">기프티콘</label>
</fieldset>
</form>

 

- label 태그에 type 속성으로 checkbox인지 radio인지 구분

- 같은 그룹 별로 같은 name 붙임

 

- 라디오 버튼에 접근하기

document.orderForm.purchase

name을 사용해 접근

RadioNodeList 라는 노드 리스트 형태로 저장됨

선택한 항목은 value 값이 RadioNodeList의 value에 저장됨

 

- 체크 박스에 접근하기

document.orderForm.menu

마찬가지로 name 으로 접근

 

document.orderForm.menu[0].value	// 'dolce'

인덱스로 접근해서 특정값을 가져올 수 있음

 

- checked 속성

라디오 버튼, 체크 박스에는 checked 속성이 있음

선택했으면 true, 선택하지 않았으면 false

document.querySelectorAll("input[name='menu']:checked")	// 메뉴 중 선택된 항목만 가져옴