[JavaScript] 자바스크립트와 웹 프론트엔드 파트2. DOM

01. DOM 소개 및 탐색

JS로 HTML문서에 접근이 가능한 것은 HTML문서가 DOM(Document Object Model)에 따라 기술되고, 이 돔 인터페이스를 통해 기술된 HTML엘리먼트가 객체로서 자바스크립트와 연결되기 때문입니다.

tree 형태로, 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것.

이해하기:

• document.children[0] 최상위 엘리먼트 html
• document.children[0].children[0] 다음 엘리먼트 head
• document.children[0].children[1] body
• document.children[0].children[1].parentNode 는 html

 

Element API

자식, 부모 엘리먼트에 접근하는 방법

• .children : 해당 object의 자식 노드에 대한 배열
• .parentNode : 부모 노드
• .firstElementChild : 첫 자식 엘리먼트
• .lastElementChild : 마지막 자식 엘리먼트

 

같은 레벨의 형제 엘리먼트에 접근하는 방법

• .nextElementSibling
• .previousElementSibling

 

 

02. 단일 Element 선택

Document API

DOM API를 활용해 문서에서 엘리먼트를 선택하는 방법

• document.getElementBy~ : 단일 엘리먼트를 선택하는 메소드
• document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드

document.getElementById 메소드

• 인자로 HTML element 태그의 id를 전달하면 해당 엘리먼트가 반환됨

 

Element API

.innerHTML 속성

• 엘리먼트 안의 HTML코드를 변경

.innerText 속성

• 엘리먼트 안의 텍스트를 변경

.style 속성

• css를 변경 가능

getAttribute 메소드

• element의 속성의 값을 얻어옴
• 하나의 인자 : attribute 이름을 받음
• 직접 객체에 동기화되지 않는 속성에 대해서도 접근이 가능

setAttribute 메소드

• element의 속성의 값을 설정함
• 두개의 인자 : attribute 이름, 설정할 속성의 값을 받음
• 직접 객체에 동기화되지 않는 속성에 대해서도 값 설정이 가능

console에 입력

var t = document.getElementById("lyricist");
t.innerText = "<i>Hello</i>"
t.style.color="blue"
t.style.fontSize="15pt"

var t2 = document.getElementById("logo");
t2.src
t2.setAttribute("src","https:// ... .png");

 

 

03. 다중 Element 선택

Document API

• document.getElementsBy~ : 다중 엘리먼트를 선택하는 메소드. 배열형태로 값을 반환함

document.getElementsByTagName 메소드

• 인자로 HTML element 태그의 이름을 전달하면 해당 엘리먼트들이 반환됨

document.getElementsClassName 메소드

• 인자로 class의 이름을 전달하면, 해당 class의 모든 엘리먼트가 배열로 반환됨

document.getElementsByName 메소드

• 인자로 name을 전달하면, 해당 name 속성을 가진 모든 엘리먼트가 배열로 반환됨.

 

Element API

.value 속성

• input element에 입력된 값은 .value를 통해 얻어올 수 있음
  • getAttribute 메소드로는 받아올 수 없다는 점 주의

document.getElementsByTagName("p");
document.getElementsByClassName("lyrics");
document.getElementsByName("author");
document.getElementsByName("message");

 

 

04. CSS Selector를 이용한 Element 선택

Document API

• document.querySelector : css selector를 기반으로 엘리먼트를 선택
  • 조건에 부합하는 element가 여러개인 경우 첫 엘리먼트만 반환.
• document.querySelectorAll : css selector를 기반으로 만족하는 모든 엘리먼트를 선택

 

CSS Selector

• # : name 기반으로 선택
• . : class 기반으로 선택
• , : 여러개의 셀렉터를 사용

document.querySelector("#songwriter");
document.querySelectorAll("#songwriter");
document.querySelectorAll("p");
document.querySelector(".lyric");
document.querySelectorAll("h1,h2");

 

 

05. Element 추가/삭제

Document API

• document.createElement() : 문자열 인자로 element tag를 입력하면 해당 엘리먼트가 생성돼 반환됨

Element API

• .appendChild(인자) : 추가할 element를 인자로 받아 호출된 element의 자식으로 인자를 추가함
• .removeChild(인자) : 삭제할 element를 인자로 받아 호출된 element의 자식중에서 해당 element를 삭제
• .insertBefore(인자1, 인자2) : 인자1로 받은 element를 호출된 element의 자식중 인자2의 이전에 추가함
• .cloneNode() : 호출된 element를 복사해서 반환함

hr = document.createElement("hr");
document.body.appendChild(hr);
document.body.insertBefore(hr, document.body.children[3]);

hr2 = hr.cloneNode();
document.body.insertBefore(hr2, document.body.children[6]);

document.body.remove(hr2);
document.body.remove(document.body.children[3]);

 

 

---

아래 강의를 수강하며 개인적으로 공부하며 정리한 글입니다. 

https://programmers.co.kr/learn/courses/10#curriculum

자바스크립트와 웹 프론트엔드 | 프로그래머스