JavaScript DOM
DOM
: Client side JavaScript의 핵심
web browser와 web 문서의 내용 객체화
각가의 객체는 property로 정보를 읽거나 설정 가능
web browser창의 위치를 앍고 싶다면?
window 객체의 창의 위치를 알려주는 property를 읽어오면 됨
DOM 레벨과 혼란
최근 DOM은 정리되고, 표준화됨
레벨 0부터 최신 레벨까지 있음
DOM 의 구성
: 객체화 -> 구조화 -> 계층으로 구성됨
현재 web browser window
Window 객체DOM 문서를 표현하는 창
가상 최상위 객체
window 객체는 전역 객체
다양한 함수, 이름공간, 객체 등이 포함
Document 객체페이지 콘텐츠의 진입점 역할
<body>등 다른 요소들을 포함
Web browser는 web 문서를 보여주는 창이 DOM의 기준
Window 객체 이외의 객체는 Window 객체의 property로 접근한다!
Document 객체에 접근하고자 한다면
window 객채의 document property 이용
window 객체의 document property는 Document 객체를 가리킴
Document 객체는 web 문서, web 문서상의 HTML 요소 일부에 접근 가능함!
Window의 생성
생성
window 객체의
open method사용
창 닫기
window 객체의
close method사용
alert
alert경고 상자 생성
debugging용으로 주로 사용
Web 문서 접근
getElementByID(id)
하나의 node로 return
이것 외에는 다 유사 배열 형태로 return
querySelector()
CSS Selector를 이용하여 node를 선택하지만, 일치되는 첫 번째 node 만을 return 함
querySelectorAll()
CSS Selector를 이용하여 node를 선택함
일치하는 모든 node를 array로 return
DOM 조작
Node의 종류에 따라 할 수 있는 것들
요소 속성이나 CSS 속성 변경
입력 폼의 값을 읽거나 변경
문서 내에 새로운 HTML 요소와 content 삽입
document.write()
document.write()함수 내부에 사용하여 이벤트로 호출 했을 때
기존 문서 전체를 지워버리고, content를 출력함
appendChild()
appendChild(): 특정 node의 자식으로 node를 삽입하기 위해 사용
자식 요소들 중 기존 요소들 끝에 삽입됨
insertBefore()
insertBefore(): 특정 요소 앞에 삽입하기 위해 사용
사용 방법
부모 node.insertBefore(삽입할 node, reference node)
replaceChild()
replaceChild(): 자식 node 중 특정 node를 새로운 node로 치환하는 역할
사용 방법
부모 node.replaceChild(새로운 node, 바뀔 node)
getAttribute(), setAttribute()
getAttribute(), setAttribute(): node의 속성 값을 가져오고, node의 속성을 속성 값으로 설정
사용 방법
node.getAttribute("속성명")
node.setAttribute("속성명", "속성값")
innerHTML, insertAdjacentHTML
innerHTML, insertAdjacentHTMLDOM 조작 시 사용 가능한 method들
createElement(),createTextNode(),appendChild()를 한꺼번에 처리하는 효과사용방법
element.innerHTML(text)
element.insertAdjacentHTML(positon, text)
position으로 삽입 위치 지정도 가능함
Last updated