JavaScript 정리 - DOM

DOM(Document Object Model)

 

• HTML 문서 요소의 집합!

• HTML 문서는 각각의 node 와 object 의 집합으로 문서를 표현

• 따라서 각각 node 또는 object 에 접근하여 문서 구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것

 

Document

웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체

 

Document 요소 선택하는 법 

태그 용어	의미
• document.getElementById(아이디 속성값)	태그의 Id 속성값이 특정값인 녀석을 가져온다.
• document.getElementsByClassName(클래스 속성값)	태그의 클래스 속성값이 특정값인 태그를 선택한다.
• document.getElementsByTagName(태그 이름)	태그 이름이 X(div, p) 인 태그를 가져온다.
• document.getElementsByName(name 속성값)	name이 특정 값인 태그를 가져온다.
• document.querySelector(CSS 선택자)	요소 선택자를 사용해서 자신이 가져오고 싶어하는 요소를 가져오는 메소드 • 문서에서 만나는 제일 첫번째 요소를 반환 합니다!
• document.querySelectorAll(CSS 선택자)	CSS 선택자(X) 값을 가지는 태그를 배열의 형태로 가져옴

 

Document 요소 다루기

태그 용어	의미
document.createElement(html요소)	html 요소를 임시적으로 생성한다.(배치된 건 아님)
document.write(텍스트)	택스트를 임시적으로 써라(배치된 건 아님)
[].appendChild();	선택한 Document의 첫번째 자식요소에 넣어라.
• [].removeChild();	선택한 Document의 첫번째 자식요소를 삭제해라.
• [].innerText = 내용;	태그 내에 들어갈 문자열 지정
[] .textContent	태그 내에 들어갈 문자열 지정
[] .innerHTML	태그 내에 들어갈 문자열이나 태그를 지정
요소.prepend()	선택된 요소의 맨 앞쪽인 자식 요소로 추가됨
요소.before()	선택된 요소의 앞에 있는 형제 요소로 추가됨
요소.after()	선택된 요소의 바로 뒤인 형제 요소로 추가됨
요소.remove();	선택된 요소가 삭제 됩니다

 

Document 요소 다루기 - classList

선택 요소에 class 를 더하거나, 빼거나, 클래스가 존재하는지 체크하는 메 소드
태그 용어	의미
요소.classList.add()	document 요소의 클래스에 특정 이름을 더함
요소.classList.remove()	document 요소의 클래스에 특정 이름을 제거
요소.classList.contains()	document 요소의 클래스에 특정 이름이 있는지 확인
요소.classList.toggle()	document 요소의 클래스에 특정 이름을 있으면 제거, 없으면 추가
요소.setAttribute(“속성명”, “지정할 속성“)	선택한 요소의 속성 값을 직접 지정할 수 있는 메소드

 

선택한 특정 요소에서 다른 노드 접근하기

태그 용어	의미
요소.children / 요소.children[0]	자식요소 선택
요소.parentNode	부모요소 선택
요소.previousElementSiblings	앞선 형제 노드 선택
요소.nextElementSiblings	뒤에 오는 형제 노드 선택

 

 

addEventListener

 document.querySelector(".box").addEventListener("click", function() {
 alert("click");
 })

선택 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드

 

addEventListener의 이벤트 종류

이벤트 용어	의미
Click	클릭
Mouseover	요소에 커서를 올렸을 때
Mouseout	마우스가 요소를 벗어날 때
Mousedown	마우스 버튼을 누르고 있는 상태
Mouseup	마우스 버튼을 떼는 순간
Focus	포커스가 갔을 때
Blur	포커스가 벗어나는 순간
Keypress	키를 누르는 순간 + 누르고 있는 동안 계속 발생
Keydown	키를 누르는 순간에만 발생
Keyup	키를 눌렀다가 떼는 순간
Load	웹페이지에 필요한 모든 파일(html, css, js등)의 다운로드가 완료 되었을 때
Resize	브라우저 창의 크기가 변경 될 때
Scroll	스크롤이 발생할 때
Unload	링크를 타고 이동하거나, 브라우저를 닫을 때
Change	폼 필드의 상태가 변경 되었을 때

 

※ 이미지 출저 : KDT 국비교육 PPT에서 발췌하였습니다