[JS] DOM 객체
DOM이란 Document Object Model의 약자로 HTML 태그들을 하나씩 개체화한 것이다.
HTML페이지의 내용과 모양을 Javascript로 제어하기 위해 사용되는 객체들이다.
HTML 태그 당 DOM객체가 하나씩 생성된다.
HTML 태그의 포함관계에 따라서 부모 자식 관계로 구성한다.
HTML문서의 태그를 객체로 받아오기
DOM객체를 사용하는 가장 기본은 document를 이용하는 것이다.
이전에 document.write를 이용할 때 사용한 적 있었다.
[JS] 자바스크립트로 본문에 코드 추가하기
[JS] 자바스크립트로 본문에 코드 추가하기 웹 페이지에서 사용자가 어떠한 행동을 했을 때, 본문에 원하는 콘텐츠를 추가해야 하는 경우가 있다. 이 때에는 DOM코드 중 write()와 writeln()을 이용
heekng.tistory.com
document란 해당 HTML문서를 나타낸다.
따라서 해당 문서의 어떠한 태그를 받아오고 싶다면 document.가져올 방법 선택의 형태로 작성하여 태그객체를 받아온다.
위의 메소드들을 사용하여 원하는 속성을 가진 태그에 접근한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<div id="divTest">div태그입니다.</div>
</body>
<script>
var div = document.getElementById("divTest"); //id값으로 접근
</script>
</html>위처럼 여러가지 메소드가 있지만 document.getElementById("id값");의 형태로 메소드를 이용하여 해당 태그객체를 받아올 수 있다.
받아온 태그 객체 이용하기
받아온 객체의 속성이나 값을 변경할 때에는 . 을 이용해서 속성이나 값에 접근한다.
받아온 태그 객체 안에 프로퍼티가 존재한다고 생각하면 이해가 쉽다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<div id="divTest">1번 div태그입니다.</div>
<input type="button" value="버튼" onclick="btnClick()">
</body>
<script>
function btnClick(){
var div = document.getElementById("divTest"); //id값으로 접근
div.style.background = "cyan";
}
</script>
</html>See the Pen wvogZgN by Heekng (@heekng) on CodePen.
위처럼 div객체를 id값으로 접근하여 태그객체로 받아온 후, div.style.background의 순서로 스타일에 접근, background로 직접 접근하여 값을 변경할 수 있다.
절차대로 이해하면 div태그의 프로퍼티 중, style에 접근하고, style을 키로 가지는 값에서 background를 키로 가지는 값을 수정한 것이다.
DOM객체의 프로퍼티
DOM객체에서 자주 사용하는 프로퍼티이다.
기본 프로퍼티
| id | 태그의 id 속성 값 |
| lang | 태그의 lang 속성 값 |
| style | style 객체에 대한 래퍼런스 |
| title | 태그의 title 속성 값 |
| tagName | 태그 이름 문자열, 항상 대문자로 표시한다. 읽기만 가능하다. |
| innerHTML | 시작 태그와 종료 태그 사이의 텍스트 |
DOM 트리와 관련된 프로퍼티 (읽기만 가능하다)
| chiledElementCount | 자식의 DOM 개수 |
| firstElementChild | 첫 번째 자식 객체 |
| lastElementChild | 마지막 자식 객체 |
| nextElementSibling | 다음 형제 객체 또는 오른쪽 객체 |
| parentElenet | 부모 객체 |
| previousElementSibling | 이전 형제 객체 또는 왼쪽 객체 |
크기와 위치에 관련된 프로퍼티 (읽기만 가능하다)
| offsetHeight | 패딩, 테두리, 스크롤바를 포함한 높이 |
| offsetWidth | 패딩, 테두리, 스크롤바를 포함한 너비 |
| offsetLeft | 객체의 수평 출력 위치 |
| offsetTop | 객체의 수직 출력 위치 |
DOM객체의 메소드
| addEventListener() | 새로운 이벤트 리스너 등록 |
| appendChild() | 마지막 자식 뒤에 새로운 자식 추가 |
| click() | 사용자가 마우스를 클릭한 것과 동일한 작업 수행 |
| focus() | 키 입력을 받을 수 있도록 이 객체에 포커스 지정 |
| setAttribute() | 속성 추가 |
| insertBefore() | 지정된 자식 앞에 새 자식 추가 |
| querySelector() | 지정된 CSS 셀렉터와 일치하는 첫 번째 자식 리턴 |
| removeChild() | 자식 삭제 |
| replaceChilde() | 자식 대체 |
| removeEventListener() | addEventListener()로 등록한 이벤트 리스너 제거 |
| getAttribute() | 속성 알아내기 |
| getElemetsByTagName() | 주어진 태그 이름을 가진 모든 태그 |
| getElementsByClassName() | 주어진 class속성 값을 가진 모든 태그 |
| getElementsByName() | 주어진 name속성 값을 가진 모든 태그 |
| getElementsById() | 주어진 id속성 값을 가진 첫 번째 DOM객체 |
| addEventListener() | document 객체에 이벤트 리스너 등록 |
| close() | HTML콘텐츠를 브라우저에 출력, 더이상 쓰기를 받지 않는다. |
| createElement() | HTML 태그의 동적 생성 |
| open() | document에 담긴 콘텐츠를 모두 지우고, 새로운 HTML콘텐츠를 쓸 수 있도록 열기 |
| removeEventListener() | document 객체에 등록된 이벤트 리스너 제거 |
| write() | document에 HTML 콘텐츠 삽입 |
| writeln() | write() 후 '\n' 추가로 입력 |
'JS & TS > Javascipt' 카테고리의 다른 글
| win-jenv 첫 오픈소스 프로젝트 (0) | 2022.04.02 |
|---|---|
| [JS] 브라우저 객체 모델 BOM - 2 (0) | 2021.02.17 |
| [JS] 브라우저 객체 모델 BOM - 1 (0) | 2021.02.17 |
| [JS] 객체, 프로토타입, property (0) | 2021.02.13 |
| [JS] 함수 function (0) | 2021.02.12 |
| [JS] 값 비교하기(==, ===) (0) | 2021.02.12 |
