DOM(Document Object Model, 문서 객체 모델)
- 객체를 사용해 웹 문서를 관리하는 방식.
- 웹 문서의 모든 요소를 객체로 해석할 수 있다.
DOM트리
- DOM의 구조는 나무처럼 생겼다.
<body>
<h1>안녕하세요.</h1>
<span>반가워요.</span>
</body>
위의 코드는 옆의 그림처럼 구조화할 수 있다.
거꾸로 뒤집은 나무와 비슷하게 생겨서 DOM 트리(tree)라고 한다.
네모 상자를 노드(Node)라고 하며 위쪽에 위치하면 부모 노드, 아래에 위치하면 자식 노드이다.
ex) h1은 body의 자식 노드이자 "안녕하세요."의 부모 노드이다.
DOM 요소에 접근하는 함수
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
getElementById() 함수
- DOM 요소를 id 선택자로 접근하는 함수이다.
getElementsByClassName() 함수
- DOM 요소를 Class 선택자로 접근하는 함수이다.
- class 선택자는 id 선택자와는 다르게 우베 문서 안에서 여러 번 사용할 수 있으므로 By 앞에 's'가 붙는다.
getElementsByTagName() 함수
- DOM 요소를 태그 이름으로 접근하는 함수이다.
- 이 함수도 여러 DOM 요소를 모드 찾아 접근하므로 By 앞에 's'가 붙는다.
querySelector() 함수
- id, class, 태그 이름을 다 사용하여 접근할 수 있는 함수이다.
- class 앞에는 마침표(.), id 앞에는 샵(#), 태그 이름은 기호 없이 사용하면 된다.
querySelectorAll() 함수
- id, class, 태그 이름을 다 사용하여 접근할 수 있는 함수이다.
- class 앞에는 마침표(.), id 앞에는 샵(#), 태그 이름은 기호 없이 사용하면 된다.
DOM 요소의 속성에 접근하는 함수
- getAttribute()
getAttribute() 함수
- 요소의 속성에 접근할 때 사용하는 함수이다.
- 요소에 접근하는 함수(ex. querySelector).getAttribute("접근하려는 요소의 속성(ex. src)"); 으로 사용한다.
DOM 요소의 속성을 수정하는 함수
- setAttribute()
setAttribute() 함수
- 요소의 속성을 수정할 때 사용하는 함수이다.
- 요소에 접근하는 함수(ex. querySelector).setAttribute("수정하려는 요소의 속성(ex. src)",수정 값); 으로 사용한다.
addEventListener() 함수
- 이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수이다.
- addEventListener("이벤트 유형",함수,캡처 여부);
- 이벤트 유형 : click이나 mouseover 같은 이벤트
- 함수 : 이벤트 발생 시 실행할 명령이나 함수이다.
- 캡처 여부 : 기본값은 버블링한다는 의미의 false이며 버블링은 자식노드에서 부모 노드로 이벤트가 전달되는 것이다. true는 부모 노드에서 자식 노드로 이벤트가 전달되는 것으로 캡처링이라고 한다.
도슐랭스타
★★☆☆☆ : 처음 배워서 익숙하지 않다!
드디어 뭔가 자바스크립트를 하는 기분..! 직접 써봐야 할 것 같다. 그리고 예제가 없으니 확실히 이해하기 좀 힘들 것 같아서 공부할 겸 예제도 만들어 와야겠다...(귀찮아서 다음에 해온다는 것 아님,, 아무튼 아님,,ㅎ)
'JavaScript' 카테고리의 다른 글
| JavaScript-DOM(문서 객체 모델) 1-실습 (0) | 2023.08.17 |
|---|---|
| JavaScript-DOM(문서 객체 모델) 요소 추가와 노드 삭제/순서배열(2) (0) | 2023.08.12 |
| JavaScript-Array(배열) 객체 (0) | 2023.07.28 |
| JavaScript-객체(object) (0) | 2023.07.22 |
| JavaScript-스코프(scope), 호이스팅(hoisting), var, let, constant (0) | 2023.07.18 |