DOM , Document Object Model
HTML 문서의 구조 의미.
HTML tag는 각각의 기능 (Method)과 속성 (Properites)을 갖고 있다.
이런 태그들을 (트리) 구조적으로 갖고 있는 문서 객체라 보면 될듯.
배우는 목적
자바스크립트를 사용해 문서 객체를 선택하고 속성이나 스타일(CSS)을 적용하기 위해서
단, 브라우저별 (크롬, 오페라, 사파리 등) 차이가 존재하기에 호환성 문제가 있으므로, 브라우저별로 확인이 필요하다.
<하지만 J쿼리가 나오면서 위와 같은 문제가 거의 사라졌다고...>
html은 root가 되고, 그 아래는 node 라 부른다.
node에는 아래와 같이 존재한다.
- html 태그를 연결하는 요소 노드 (Element node)
- 텍스트를 연결하는 Text node
- 태그에 속성을 연결해 주는 속성 노드 (Attribute node)
선택자
자바스크립트를 이용해서 특정 태그를 찾고 속성 변경이나 Style을 적용하기 위해서 필요.
- 직접 선택자 : 요소를 직접 선택. id, class , form name, 요소 명 (<img>, <p>, <div> 등 등)
- 인접 관계 선택자 : 태그명이나 직접 선택자를 기준으로 가까이에 있는 요소를 선택.
선택자 종류
(어차피 J쿼리를 배우면 javascript의 선택자를 많이 안 쓰겠지만..)
| 구분 | 종류 | 설명 |
| 직접 선택자 |
document.getElementById( id 이름 ) | id 이용해서 요소 선택 |
| document.getElementsByTagName ( 요소(태그) 이름) | 요소 이름을 이용해 요소를 선택해 온다 | |
| document.formName.inputName | 폼 요소의 name요소를 이용해 선택 | |
| 인접 관계 선택자 |
parentNode | 선택한 요소의 부모 요소 선택 |
| childNodes | 선택한 요소의 모든 자식 요소 선택해서, 배열 객체로 저장 |
|
| children | 선택한 요소의 자식 요소인 태그만 선택해서, 배열 객체로 저장 |
|
| firstChild | 선택한 요소의 첫번째 자식 요소만 선택 | |
| previousSibling | 선택한 요소 이전에 오는 형제 요소만 선택 | |
| nextSibling | 선택한 요소 다음에 오는 형제 요소만 선택 |
선택자 적용 위치 & 방법에 대해서.
직접 &인접 관계 선택자 사용시 <head> 영역에 자바스크립트를 선언하게 되면,
html을 읽어오는 것 (page loading) 보다 선택자가 먼저 실행되어 문서 객체를 선택할 수 없다.
<head>
<script>
document.getElementById("myID").style.color = "green";
</script>
</head>
<body>
<p id="myID">글자 색상</p>
</body>
<body> 태그 영역에 태그 작성 완성 후 마지막 부분에 작성하거나
window.onload = function() { ... } 이용해서 선택문을 작성해야 한다.
* window.onload() : 모든 문서의 객체를 로딩한 후에 실행되는 이벤트 함수
<script>
window.onload = function() {
document.getElementById("myID").style.color = "green";
}
</script>
'프로그래밍&IT > Javascript & jQuery' 카테고리의 다른 글
| [JQuery] 탐색 선택자 / 속성 선택자 (0) | 2021.12.07 |
|---|---|
| [JQuery] 기본 다지기 (0) | 2021.12.01 |
| [Javascript] events , 이벤트 객체 (0) | 2021.11.25 |
| [Javascript] 브라우저 객체 모델 (BOM, Browser Object Model) (0) | 2021.11.24 |
| [Javascript] 블록, 인라인, 범용 요소 / 문단 & 테이블 & form 태그 (0) | 2021.11.16 |
