[JavaScript] 자바스크립트의 document 객체
이전 글로 HTML의 DOM 객체에 대한 설명을 적었었다. ▼
[JavaScript] HTML DOM 객체 (Document Object Model)
저번 글로 자바스크립트의 객체 모델 두 가지 (DOM, BOM)에 대해 간략히 알아보는 글을 올렸었다. ▼ [JavaScript] 자바스크립트의 객체 모델 DOM, BOM 자바스크립트에서 BOM, DOM이라는 개념은 무척 중요��
codingwanee.tistory.com
이전 글에서 다룬 바 있지만 다시 정리해본다.
document는 DOM 트리의 최상위 객체이다.
브라우저는 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다.
그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다.
document 객체의 역할은 아래와 같다.
- 프로퍼티로 HTML 문서의 전반적 속성을 나타냄
- 메소드로 DOM 객체 검색
- 메소드로 새로운 DOM 객체 생성
- 메소드로 HTML 문서의 전반적 제어 지원
이벤트 리스너
이벤트 리스너는 70여개 이상의 이벤트가 지원된다.
그 중에서 굉장히 많이 쓰이는 것들을 추려보면 아래와 같다.
- onclick
- onerror
- onmouseover
- onscroll
- onkeypress
- onload
모두 on~ 이라는 키워드로 시작하는 것을 볼 수 있는데, '~한 이벤트 발생 시' 라는 의미이다.
이 의미만 알면 그 뒤의 단어들은 직관적으로 네이밍되어 있기 때문에 설명은 스킵.
이벤트 리스너의 세계 또한 심오하고(?) 재밌으니, 따로 글을 파보도록 하겠다.
여기서는 이 정도까지만 보고 간단히 넘어가자.
document 객체의 주요 프로퍼티, 컬렉션, 메소드
ㅁ 주요 프로퍼티
- title, body, head : html문서의 각 <title>, <body>, <head> 태그
- URL : 현재 문서의 URL
- location : 현재 문서의 URL 정보를 가진 location 객체의 레퍼런스
- referrer : 이 HTML 문서를 로드한 원래 문서의 URL 문자열. 이 문서가 처음이면 빈 문자열
ㅁ 주요 컬렉션
- images : 문서 내의 모든 <img> 객체들의 컬렉션
- links : 문서 내의 href 속성을 가진 모든 링크객체들의 컬렉션(<a>나 <area>)
- forms : 문서 내의 모든 폼 객체들의 컬렉션
ㅁ 주요 메소드
- getElementById() : 아이디명으로 첫 번째 DOM 객체 리턴
- getElementsByTagName() : 특정 태그명을 가진 모든 태그 컬랙션 형태로 리턴
- getElementsByClassName() : 특정 클래스명을 가진 모든 태그 컬렉션 형태로 리턴
- open() : 콘텐츠를 모두 지우고 새로운 HTMl 콘텐츠를 쓸 수 있도록 열기
- write(), writeln() : document에 HTML 콘텐츠 삽입. ln이 붙은 건 write() 후 '\n' 추가출력(브라우저 상에는 빈칸 하나)
- close() : document 객체에 있는 HTML 콘텐츠를 브라우저에 출력하고, 더이상 쓰기를 받지 않음
이 중에서 document.write()를 쓰게 되면 현재 document 객체에 담긴 내용의 끝에 HTML 텍스트를 추가하는 코드이다.
주의할 점은, HTML 문서가 로드되어 출력이 모두 이뤄진 후에는 document 객체가 '닫힌다'
이 상태에서 write()가 실행되면, 브라우저는 현재 document 객체에 담긴 문서를 지우고 빈 doucment를 새로 연다.
현재 브라우저 윈도우에 출력된 HTML 텍스트를 지워버리고 새로운 내용을 출력하려면
document.open() -> document.write() -> document.close() 순으로
순서를 지켜 열고닫기까지 확실히 해주어야 한다.
이 경우에도 document.close()가 실행된 후에는 HTML 텍스트를 덧붙일 수 없다.
그러나 아래와 같이 동적 구성을 통해 추가할 수 있다.
HTML 문서의 동적 구성
HTML 문서의 로드가 완료된 document에 새로운 HTML 태그를 추가하는 방법은
추가하고 싶은 HTML 태그를 나타내는 DOM 객체를 생성하여 DOM 트리에 직접 삽입하는 것이다.
ㅁ DOM 객체 동적 생성
document.createElement("태그이름")
: HTML 태그의 DOM 객체를 생성하는 코드
let newDIV = document.createElement("div") // 객체 생성
newDIV.innerHTML = "새로 생성된 DIV" // HTML 텍스트 삽입
newDIV.setAttribute("id", "newDiv") // 속성추가
newDIV.style.backgroundColor = "gray"// css 스타일 추가
ㅁ DOM 트리에 삽입
DOM 객체를 DOM 트리에 삽입하는 방법은 여러가지가 있다.
그 중 다음 2가지 방법이 대표적이다.
부모.appendChild(DOM객체) // 마지막 자식으로 삽입
부모.insertBefore(DOM객체 [, 기준자식]) // 자식객체 중 기준자식 앞에 삽입
ㅁ DOM 객체의 삭제
DOM 객체의 삭제는 removeChild() 메소드로 한다.
부모.removeChild(자식객체)
예를 들어 id=testId인 DOM 객체를 DOM 트리에서 떼어내고자 한다면 다음과 같이 한다.
let test = document.getElementById("testId")
let parent = testId.parentElement
parent.removeChild(test)