JavaScript 문서 객체 조작

자바스크립트에서는 html 요소들을 문서객체라 부른다. 

1. DOMContentLoaded 이벤트

바디 태그가 생성되기 전인 head 태그 에서 바디 태그에 무언가를 출력하려고 하면 문제가 생긴다. 

DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고나서 실행하는 이벤트다. 다음과 같이 코드를 구성하면 DOMContentLoaded 상태가 되었을 때(문서 객체를 다 읽었을 때) 콜백 함수를 호출한다.

document.body.innerHTML 코드는 문서(document)의 바디(body) 안에 있는 HTML 코드를 자바스크립트로 조작할 수 있게 해주는 코드다. 

document.addEventListener('DOMContentLoaded', () => {})는 앞으로 나오는 대부분의 코드에서 사용된다. 이 코드는 document라는 문서객체의 DOMContentLoaded 이벤트가 발생했을 때, 매개변수로 지정한 콜백함수를 실행하라는 의미다. 

2. 문서 객체 가져오기

document.head, document.title, document.body - 기본적인 태그 읽어들이기

그 이외의 요소들에는 다음과 같이 접근할 수 있다.

document.querySelector(선택자) - 요소 한 개만 추출 document.querySelectAll(선택자) - 해당 요소 모두 추출

선택자 부분에는 CSS 선택자를 입력한다. 매우 다양하지만 그 중 가장 중요한 5가지는 다음과 같다

이름	선택자 형태	설명
태그 선택자	태그	특정 태그를 가진 요소를 추출
아이디 선택자	#아이디	특정 id 속성을 가진 요소 추출
클래스 선택자	.클래스	특정 class 속성을 가진 요소를 추출
속성 선택자	[속성=값]	특정 속성 값을 갖고 있는 요소 추출
후손 선택자	선택자_A 선택자_B	선택자_A의 자식인 선택자_B를 선택

document.querySelector(선택자)

querySelector()로 태그 선택해서 조작하기.

결과 화면

document.querySelectorAll(선택자)

<h1> 태그를 여러개 만들고 h1을 모두 선택하는 document.querySelectorAll(선택자)를 사용하면 headers는 배열들이 담긴 배열이 된다. 따라서 forEach()를 통해 각 요소마다 익명함수를 통해 속성을 부여받게 할 수 있다. 

 

3. 글자 조작

문서객체.textContent - 입력된 문자열을 그대로 넣는다. 문서객체.innerHTML - 입력된 문자열을 HTML 형식으로 넣는다.

4. 속성 조작

문서객체.setAttribute(속성 이름, 값)  -  특정 속성에 값을 지정. 문서객체.getAttribute(속성 이름) - 특정 속성을 추출

css선택자로 rect클래스 모두 담은 뒤, setAttribute()로 속성 지정.

***rect.src = src 처럼 간단하게 속성을 바로 지정할 수도 있다. 

5. 스타일 조작하기

문서 객체의 스타일을 조작할 때는 style 속성을 사용한다. style 속성은 객체이며 내부에는 속성으로 css를 사용해서 지정할 수 있는 스타일들이 있다.

div 태그마다 스타일 속성 부여해서 그라데이션 만들기.

6. 문서 객체 생성

지금까지는 body 태그 내부에 있는 특정 문서 객체를 읽어들이고 이를 조작했다. 문서 객체를 생성하고 싶을 때에는 

document.createElement(문서 객체 이름)

문서 객체를 만들었다고 문서 객체가 배치되는 것은 아니다. 문서를 어떤 문서 아래에 추가할지를 정해줘야 한다. 

부모객체.appendChild(자식객체) - 어떤 부모 객체 아래에 자식 객체를 추가할 수 있다.

 

문서 객체 header를 생성한 이후, 텍스트와 속성들을 추가한다.  그 후

document.body.appendChild(header)를 이용해서, 해당 body 태그 밑에 header 객체를 넣어준다.

* 문서 객체 이동

appendChild() 메소드는 문서 객체를 이동할 때에도 사용할 수 있다. 문서 객체를 다른 문서 객체에 추가하면 문서 객체가 이동한다.

다음 예제는 타이머로 서로가 서로를 1초마다 호출하는 함수를 구현하여 h1 문서객체가 div 태그를 번갈아 옮겨가게 만든 것이다.

7. 문서 객체 제거

문서 객체를 제거할 때는

부모객체.removeChild(자식객체)

appendChild() 메소드 등으로 부모 객체와 이미 연결이 완료된 문서 객체의 경우엔 일반적으로

삭제할문서객체.parentNode.removeChild(삭제할문서객체)