혼자 공부하는 자바스크립트 7장 - 문서 객체 모델(1)

1. 문서 객체

- HTML 페이지에 있는 html,head,body,title, h1, div, span 등 HTML에서 요소라 불리우는 것들을 자바스크립트에서 일컫는 말

- 문서객체를 조작한다 == HTML 요소들을 조작한다

- 문서 객체 모델 : 문서 객체를 조합해서 만든 전체적인 형태의 모델

 

2. DOMContentLoaded 이벤트

- 문서 객체를 조작할때 사용하는 코드

- 웹 브라우저가 문서 객체를 모두 읽고 나서 발생하는 이벤트

//오타에도 오류가 넘어가지 않아서 추후에 실행오류시 에러를 찾기 힘드므로 주의
document.addEventListener('DOMContetnLoaded',() =>{
	//문장
}

 

3. 문서객체 가져오기

- 해당 문서의 어떤 문서 객체를 가져오는지에 따라 . 뒤에 붙는 이름이 달라진다.

document.head
document.body
document.title
...

- head와 body 내부에서 만든 다른요소들을 찾을때는 아래와 같이 별도의 메소드를 사용한다.

document.quertSelector(선택자)
document.quertSelectorAll(선택자)

- 선택자에 입력할수 있는 것들

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

 

4. 여러가지 조작하기

- 글자 조작하기

속성 이름		설명
문서 객체.textContent		입력된 문자열을 그대로 넣습니다.
문서 객체.innerHTML		입력된 문자열을 HTML 형식으로 넣습니다.

- 속성 조작하기

메소드 이름		설명
문서 객체.setAttribute(속성 이름, 값)		특정 속성에 값을 지정합니다.
문서 객체.getAttribute(속성 이름)		특정 속성을 추출합니다.

- 스타일 조작하기 : style 속성 이용

CSS 속성 이름		자바스크립트 속성 이름
background-color		backgroundColor
text-align		textAlign
font-size		fontSize

h1.style.backgroundColor
h1.style.['backgroundColor']
h1.style.['background-color']

 

5. 문서 객체 생성및 이동

1) 문서객체 생성하기

document.createElement(문서 객체 이름)

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

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

 

2) 문서 객체 이동하기

- 위와 똑같이 appendChild를 사용하되, 이미 만들어진 객체로 하면 생성이 아닌 이동이 시행된다.

 

3) 문서 객체 제거하기

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

- appendChild 등으로 이미 연결이 완료된 경우 아래와 같은 방법을 사용

문서 객체.parentNode.removeChild(문서 객체)

 

6. 이벤트 설정하기

- 이벤트 : 생성되거나 클릭하는 행동들

- addEventListener() : 이벤트가 발생할때 실행하는 함수, 이벤트 핸들러 라고도 함

문서 객체.addEventListener(이벤트 이름, 콜백 함수)

- 이벤트를 제거할때는 removeEventListener를 사용한다.

문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)