국비 41 일차
JAVASCRIPT
8강
자바스크립트 객체 종류
1.코어객체
2.BOM객체
3.DOM객체
HTML언어의 요소들 = 자바스크립트의 문서객체
html,head,body,title..
HTML DOM(Document Object Model)
웹 페이지에 작성된 HTML 태그 당 객체(DOM 객체) 생성
-DOM 객체를 통해 각 태그의 CSS3 스타일 시트 접근 및 변경
DOM 트리
• HTML 태그의 포함관계에 따라 DOM 객체의 트리(tree) 생성
• DOM 트리는 부모 자식 관계
DOM 객체
• DOM 트리의 한 노드
• HTML 태그 당 하나의 DOM 객체 생성
• DOM 노드(Node), DOM 엘리먼트(Element) 라고도 불림
• HTML 태그의 포함관계에 따라 DOM 트리에 부모 자식 관계
document → html → head
→ body
• 브라우저가 HTML 태그를 화면에 그리는 과정
1. 브라우저가 DOM 트리의 틀 생성
2. 브라우저가 HTML 태그를 읽고 DOM 트리에 DOM 객체 생성
3. HTML 문서 로딩이 완료되면 DOM 트리 완성
4. 브라우저는 DOM 객체를 화면에 출력
5. DOM 객체 변경 시, 브라우저는 해당 HTML 태그의 출력 모양을 바로 갱신
HTML 태그(element)
이름, 속성 , CSS3스타일, 이벤트리스너, 콘텐츠(innerHTML)
ex) <p id ="firstP" style="color:red" onclick="this.style.color='green'">
이것은 <span>콘텐츠</span>문장입니다.
</p>
DOM 객체의 구성 요소
• 프로퍼티(property)
HTML 태그의 속성(attribute) 반영
• 메소드(method)
DOM 객체의 멤버 함수로서, HTML 태그 제어 가능
• 컬렉션(collection)
자식 DOM 객체들의 주소를 가지는 등 배열과 비슷한 집합적 정보
• 이벤트 리스너(event listener) • HTML 태그에 작성된 이벤트 리스너 반영
약 70여개의 이벤트 리스너를 가질 수 있음
• CSS3 스타일
HTML 태그에 설정된 CSS3 스타일 시트 정보를 반영
DOM 객체의 style 프로퍼티를 통해 HTML 태그의 모양 제어 가능
let p = document.getElementById("firstP") id로 객체 찾기
Id 요소값 빼오기]
obj.id -객체구분 , id태그 속성
obj.tagName-태그이름
obj.innerHTML-객체의 inner요소(자식)
obj.style.color - 객체의 색깔 obj.onclick- 클릭했을 때
obj.childElementCount-객체의 자식요소 카운트 수
obj.offsetWidth -객체 너비
obj.offsetHeight -객체 높이
DOMContentLoaded 이벤트
HTML 페이지는 코드를 위에서 아래로 차례대로 실행
웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트
document.addEventListener('이벤트' , () = >{})익명함수(콜백함수)
-document라는 문서 객체 의 document.addEventListener이벤트가 발생했을 때,
매개변수로 지정한 콜백 함수를 실행
문서 객체 가져오기
Document.querySelector(선택자)
요소를 하나만 추출
Document.querySelectorAll(선택자)
문서 객체를 여러 개 추출(같은 이름의 선택자 모두 추출)
forEach()메소드를 사용해서 반복으로 내부요소 접근하고 활용
ex) const headers = document.querySelectorAll('h1') --h1선택자를 모두 불러와 headers변수로 객체 만들어준다
headers.forEach(header) --매개변수를 통해 공통된 속성 반복
innerHTML 프로퍼티
시작 태그와 종료 태그 사이에 들어 있는 HTML 컨텐츠
ex) <p id = "firstP" style="color.blue>
여기가 <span>innerHTML</span>부분
</p>
• 문서객체.textContent :입력된 문자열 그대로 넣는다.
• 문서객체.innerHTML : 입력된 문자열을 HTML 형식으로 넣는다.
속성 조작
• 문서객체.setAttribute(속성,값):특정 속성에 값을 지정
• 문서객체.getAttribute(속성) : 특정 속성을 추출
스타일 조작
Background-color => backgroundColor 단어 첫글자를 대문자로 바꾸어준다.
this 키워드
• 객체 자신을 가리키는 자바스크립트 키워드
• DOM 객체에서 객체 자신을 가리키는 용도로 사용
ex) <div onclick = "this.style.backgroundColor='orange'">
document 객체
• DOM 트리의 최상위 객체
브라우저는 HTML 문서 로드 전, document 객체를 먼저 생성
• document 객체를 뿌리로 하여 DOM 트리 생성
document 객체 접근
• window.document 또는 document 이름으로 접근
• document 객체는 DOM 객체가 아님
ex)document.style.color = "red"; 오류남
document.readyState - 현재상태를 표시 (loading, complete)
document.location - 문서 절대위치
document.URL -문서 URL
document.title -문서 창제목
document.domain -문서 도메인
document.lastModified -문서 최근수정날짜
document.defaultView -문서기본뷰
document.referrer -문서가 어느문서를 타고왔는지 보여줌
document.activeElement -포커스된 요소반환
DOM 트리에서 DOM 객체 찾기
태그 이름으로 찾기
• document.getElementsByTagName()
태그 이름이 같은 모든 DOM 객체들을 찾아 컬렉션 리턴
Class 속성으로 찾기
• document.getElementsByClassName()
class 속성이 같은 모든 DOM 객체들을 찾아 컬렉션 리턴
HTML 페이지 로딩 과정
1. 브라우저는 HTML 페이지 로드 전 빈 상태 document 생성
2. 브라우저는 HTML 페이지를 위에서 아래로 해석
3. HTML 태그들을 document 객체에 담아간다(DOM 객체 생성).
4. 태그를 만나면 document 객체를 완성하고 닫는다.
document.write()
document 객체에 담긴 HTML 콘텐츠 마지막에 HTML 태그들을 추가
삽입된 HTML 태그들이 브라우저 화면에 출력
document.writeln()
document.open()
-현재 브라우저에 출력된 HTML 콘텐츠를 지우고 새로운 HTML 페이지 시작.
-document 객체에 담긴 DOM 트리를 지우고 새로 시작
document.close()
-현재 브라우저에 출력된 HTML 페이지 완성
-더 이상 document.write() 할 수 없음
DOM 객체 동적 생성: document.createElement("태그이름")
• 태그이름의 DOM 객체 생성
DOM 트리에 삽입
• 부모.appendChild(DOM객체); -부모의객체의 마지막부분에 추가
• 부모.insertBefore(DOM객체 [,기준자식]);
DOM 객체의 삭제
• 부모.removeChild(삭제하고자 하는 자식객체);
문서 객체 이동
• appendChild()-문서 객체 부모는 오로지 하나!
문서 객체를 다른 객체에 추가하면 객체가 이동한다.
• setTimeout()함수는 시간을 지연해주는 함수
문서 객체 제거
removeChild(자식객체)
• 문서객체.parentNode.removeChild(문서객체)
• 문서객체.parentElement.removeChild(문서객체) 둘다 부모를 가리킴.