문서 객체 모델(DOM)

문서객체모델(DOM)

문서객체모델이란?

html 문서의 구조를 가리켜 문서객체모델이라고 한다.
문서객체를 선택할 수 있는 선택자에는 직접 문서에서 요소를 선택해 오는 직접선택자(id, class 등..)가 있고 이 선택자를 사용해 선택해온 문서 객체를 기준으로 가까이에 있는 요소를 선택하는 인접 관계선택자가 있다.

html 객체 선택하기

document.head - <head> 요소를 반환한다.
document.body - <body> 요소를 반환한다.
document.title - <title> 요소를 반환한다.
document.anchors - name 속성을 가진 <a> 요소를 모두 반환한다.
document.cookie - HTML 문서의 쿠키를 반환한다.
document.domain - HTML 문서가 위치한 서버의 도메인 네임을 반환한다.
document.forms - <form> 요소를 모두 반환한다.
document.images - <img> 요소를 모두 반환한다.
document.links - href 속성을 가진 <a> 요소를 모두 반환한다.
document.referrer - 링크 되어 있는 문서의 URL을 반환한다.
document.URL - 완전한 전체 URL 주소를 반환한다.
document.baseURL - base URL 주소를 반환한다. (baseURL은 head태그 내에서 선언할 수 있는데 aaa.co.kr/디렉토리명/a.html 에서 '디렉토리명' 부분에 해당한다.)
document.doctype - doctype을 반환한다.
document.documentElement - <html> 요소를 반환한다.
document.documentMode - 브라우저가 사용하고 있는 모드를 반환한다.
document.documentURI - html 문서의 url을 반환한다.
document.embeds - <embed> 요소를 모두 반환한다.
document.implementation - HTML DOM 구현(implementation)을 반환함.
document.inputEncoding - HTML 문서의 문자 인코딩(character set) 형식을 반환함.
document.lastModified - HTML 문서의 마지막 갱신 날짜 및 시간을 반환함
document.readyState - HTML 문서의 로딩 상태(loading status)를 반환함.
document.scripts - <script> 요소를 모두 반환한다.
document.strictErrorChecking - 오류의 강제 검사 여부를 반환함.

직접선택자

document.getElementById("아이디명") - 해당 아이디명을 가지고 있는 요소를 선택한다. id는 유일한 값으로 하나의 엘리먼트만 가져온다.
document.getElementsByClassName("클래스명") - 해당 클래스명을 가지고 있는 요소를 선택한다.
document.getElementsByTagName("요소(태그)명") - 해당 요소를 선택한다.
document.querySelector("css선택자") - CSS 선택자를 이용해 하나의 요소를 선택한다.
document.querySelectorAll("css선택자") - CSS 선택자를 이용해 여러개의 요소를 선택한다. 여러개의 요소는 배열로 저장되므로 선택된 요소들을 사용하려면 반복문을 돌려야한다. for / forEach를 자주 사용한다.

1
2
3
4
5
6
7
8
/* 기본형 */
document.직접선택자("선택자에 맞는 정보 입력");
 
document.getElementById("logo")는 #logo를 선택한다.
document.getElementsByTagName("a")[2] 는 3번째로 오는 a태그를 선택한다.
 
id 값이 아닌 태그명이나 클래스명 등은 모두 2개이상의 중복된 요소를 선택할 수 있으므로 복수형인 getElements로 작성한다.
다수가 선택될 수 있는 선택자의 경우 인덱스번호를 붙여서 해당 순서에 오는 요소만 선택할 수 있다.

인접관계 선택자

parentNode - 선택한 요소의 부모요소를 선택한다.
childNodes - 선택한 요소의 모든 자식요소를 선택. 선택한 모든 요소가 배열객체로 저장된다.
children - 선택한 요소의 자식요소인 태그만 선택한다. 선택한 모든 요소가 배열객체로 저장된다.
firstChild - 선택한 요소의 첫번째 자식요소만 선택한다.
previousSibling - 선택한 요소의 이전에 오는 형제요소만 선택한다.
nextSibling - 선택한 요소의 다음에 오는 형제요소만 선택한다.
* parentNode, firstChild, previous/nextSibling은 공백문자 인식 호환성에 문제있음

1
2
3
4
5
6
/* 기본형 */
document.직접선택자("선택자에 맞는 정보 입력").인접관계선택자;
직접선택자로 원거리 요소를 선택한 후, 해당 요소의 근거리에 있는 요소를 인접관계선택자로 선택한다.
 
document.getElementById("nav").children[2];
#nav 안에 있는 자식요소 중 3번째에 오는 요소를 선택한다. (인덱스번호 이므로 0,1,2라서 3번째)

노드란?

문서객체(html요소)의 생성

document.createElement("HTML요소") - 지정한 html 요소를 생성한다. 요소가 생성된다고 해서 화면에 바로 출력되는 것은 아니다. 자바스크립트 내에 객체처럼 생성되므로 추후 다른 메서드들을 이용해 직접 위치를 지정해 추가해줘야 한다.
document.write("텍스트") - body에 텍스트를 추가해 출력한다.

문서객체(html요소) style 조작하기

문서객체의 스타일을 조작할 때는 style 속성을 사용한다. style 속성은 객체이며, 내부에는 속성으로 css 스타일들이 들어있다.
자바스크립트에서는 css 속성을 사용할 때 하이픈('-')을 빼고 낙타표기법으로 작성한다. (background-color -> backgroundColor)
요소선택.style.속성 으로 값을 가져오거나 요소선택.style.속성 = 값으로 스타일을 수정한다.

1
2
3
4
5
6
7
8
9
선택자.style.속성(낙타표기법); 이 기본형태.
선택자.style.['속성(하이픈 포함한 원래 css형태']; 또는
선택자.style.['낙타표기법으로 작성한 css']; 와 같이 3가지 모두 사용가능하다.
 
/* 예시 */
const subject = document.querySelector('#h1');
subject.style.backgroundColor = "red";
subject.style['background-color'] = "red";
subject.style['backgroundColor'] = "red";

문서객체(html요소)의 속성값 변경, 생성 및 불러오는 방법

getAttribute와 setAttribute로 속성값을 변경, 생성

1
2
3
4
5
6
7
8
9
10
11
/* 기본형 */
//1. 요소에 지정한 속성을 불러온다.
요소선택.속성명;  
요소선택.getAttribute("속성"); 
 
//2. 요소의 속성값을 새로 수정하거나 생성한다.
요소선택.속성명 = 값;
요소선택.setAttribute("속성","값");
 
document.getElementById("logo").src; //[/img/logo.jpg] 와 같은 src값을 반환
document.getElementById("logo").setAttribute("src","/img/logo2.jpg"); //src값을 수정

문서객체의 하위요소 조작하기

innerHTML

문서객체 내부에 있는 하위요소를 문자데이터로 반환하거나, 입력한 문자데이터를 HTML요소로 반환하여 수정해준다.

1
2
3
4
5
6
7
8
9
10
/* 기본형 */
요소선택.innerHTML; //선택한 요소의 모든 하위요소를 문자데이터로 전환.
요소선택.innerHTML = "새 문자열"; //선택한 요소의 전체하위요소를 새 문자열로 변경 또는 생성
 
 
문자열로 입력하지만, html 요소로 인식되어서 반영된다.
<h1 id="title"><a href="#">안녕</a></h1>
document.getElementById("title").innerHTML; //<a href=#">안녕</a>를 문자형데이터로 반환
document.getElementById("title").innerHTML = "<p>안녕</p>"; //<a href=#">안녕</a>이 <p>안녕</p>로 변경된다.
 

innerText / textContent

innerText - 문서객체 내부에 있는 문자열을 가져온다. 보여지는 문자열만 가져오므로 display:none이 먹혀있는 문자열은 가져오지 않으며, 공백은 하나로 줄여서 가져온다.
textContent - 문서객체 내부에 들어 있는 모든 문자열을 가져온다. 공백도 모두 갯수 그대로 가져온다. 속도가 innerText 보다 빠르며 성능이 좋으므로 이 속성을 사용하도록 한다. (익스 9 이상에서만 작동한다)

1
2
3
4
5
6
7
8
9
10
<div class="text">
    <p>안녕하세요?     반가워요.</p>
    <span style="display:none;">숨겨졌지롱</span>
</div>
 
<script>
    const text = document.querySelector('.text');
    console.log(text.innerText); //출력결과 : 1번결과 이미지 참고
    console.log(text.textContent); //출력결과 : 2번결과 이미지 참고
</script>

문서객체의 하위요소 조작하기 innerText textContent 콘솔 결과값

더 많은 메서드 보기

폼요소 선택자

document.getElementById("아이디명") - 폼 요소를 아이디로 선택할 때
document.폼이름.입력요소이름 - 폼 요소를 이름으로 선택할 때
document.폼이름.입력요소이름.options[index] - select박스 안에 있는 option을 선택할때

1
2
3
4
5
//셀렉트박스 안에 있는 선택된 option을 가져올 떄
let a = document.폼이름.입력요소이름.selectIndex;
 
//셀렉트박스 안에 특정 option을 선택할때
document.폼이름.입력요소이름.options[a]; 

폼요소 속성종류

전체

value - 입력요소의 value 속성값을 변경 또는 가져옴
disabled - 입력요소의 disabled 속성을 변경하거나 현재 상태를 가져옴
defaultValue - 입력요소의 초기에 입력된 value값 가져옴

선택박스

selected - select박스 안에 option의 선택 여부를 가져옴. 선택돼있으면 true, 아니면 false

체크박스, 라디오

checked - 체크값을 가져오거나, 체크여부 제어할때 사용. 체크돼있으면 true, 아니면 false