[ 목차 ]
1. DOM (Document Object Model)
2. DOM tree
3. DOM Query
4. DOM Manipulation
5. style
1. DOM (Document Object Model)
1) 텍스트 파일로 만들어진 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 함
2) DOM이란 브라우저의 렌더링 엔진이 웹 문서를 로드한 후 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는 것
3) 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이를 부자 관게를 표현할 수 있는 트리구조로 구성한 것
4) DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 이는 렌더링에 반영
5) 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이며, 이때 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합임 DOM API가 필요
2. DOM tree
1) 브라우저가 HTML 문서를 로드한 후 파싱항 파생하는 모델을 의미
2) 객체의 트리로 구조화되어 있음
3) 요소의 중첩관계는 객체의 트리로 구조호하여 부자관계를 표현
4) 브라우저 f12 -> elements -> properties에서 확인 가능
3. DOM Query
1) 하나의 요소 노드 선택
1-1] document.getElementById(id)
- id 어트리뷰트 값으로 요\소 노드를 한개 선택
- 복수가 선택된 경우 첫번째 요소만 반환
- Return : HTMLElement를 상속받은 객체
- 모든 브라우저에서 동작
1-2] document.querySelector(cssSelector)
- CSS 셀렉터를 사용해 요소 한개를 선택
- 복수가 선택된 경우 첫번째 요소만 반환
- Return : HTMLElement를 상속받은 객체
- IE8 이상의 브라우저에서 동작
2) 여러 개의 요소 노드 선택
2-1] document.getElementsByClassName(class)
- class 어트리뷰트 값으로 요소 노드를 모두 선택
- 공백으로 구분하여 여러 개의 class를 지정 가능
- Return : HTMLCollection(live)
- IE9 이상의 브라우저에서 동작
- javascript의 배열은 유사배열이기 때문에 실시간으로 Node의 상태를 반영하기 떄문에 위와같은 오류 발생
- HTMLCollection을 배열로 변경하여 해결
2-2] document.getElementsByTagName(tagName)
- 태그명으로 요소 노드를 모두 선택
- Return : HTMLCollection(live)
- 모든 브라우저 동작
2-3] document.querySelectorAll(selector)
- 지정된 CSS 선택자를 사용하여 요소 노드를 모두 선택
- Return : NodeList(non-live)
- IE8 이상의 브라우저에서 동작
3) DOM Traversing
3-1] parentNode
- 자식 노드를 탐색
- Return : HTMLElement를 상속받은 객체
- IE9 이상의 브라우저에서 동작
3-2] firstChild, lastChild
- 자식 노드를 탐색
- Return : HTMLElement를 상속받은 객체
- IE9 이상의 브라우저에서 동작
- IE 제외 대부분 브라우저에서 요소 사이의 공백, 줄바꿈 문자를 텍스트 노드로 취급하여 오류가 발생
- HTML 공백을 제거하거나 firstElementChild, lastElementChild를 사용
3-3] hasChildNodes()
- 자식 노드가 있는지 확인하고 boolean 값을 반환
- Return : Blolean
- 모든 브라우저 동작
3-4] childNodes
- 자식 노드의 컬렉션을 반환
- 텍스트 요소를 포함한 모든 자식 요소를 반환
- Return : NodeList(non-live)
- 모든 브라우저 동작
3-5] children
- 자식 노드의 컬렉션을 반환
- 자식 요소 중에서 Element type 요소만 반환
- Return : HTMLCollection(live)
- IE9 이상의 브라우저
3-6] previousSibling, nextSibling
- 형제 노드를 탐색
- text node를 포함한 모든 형제 노드를 탐색
- Return : HTMLElement를 상속받은 객체
- 모든 브라우저 동작
3-7] previousElementSibling, NextElementSibling
- 형제 노드를 탐색
- 형제 노드 주에서 Element type 요소만을 탐색
- Return : HTMLElement를 상속받은 객체
- IE9 이상의 브라우저
4. DOM Manipulation
1) 텍스트 노드의 접근 순서
1] 해당 텍스트 노드의 부모 노드를 선택, 텍스트 노드는 요소 노드의 자식
2] firstChild 프로퍼티를 사용하여 텍스트 노드를 탐색
3] 텍스트 노드의 유일한 프로퍼티를 이용해 텍스트를 취득
4] nodevalue를 이용태 텍스트를 수정
2) node value
1] 노드의 값을 반환
2] Return : 텍스트 노드의 경우 문자열, 요소 노드의 경우 null 반환
3] IE6 이상의 브라우저
3) 어트리뷰트 노드에서의 접근/수정
3-1] className
- class 어트리뷰트의 값을 취득 또는 변경
- className 프로퍼티에 값을 할당하는 경우 class어트리뷰트가 존재하지 않으면 생성하고 지정된 값을 설정
- class 어트리뷰트의 값이 여러 개일 경우 공백으로 구분된 문자열이 반환되므로 string 메소드 aplit(' ')를 이용해 배열로 변경하여 사용
- 모든 브라우저에서 동작
3-2] classList
- add, remove, item, toggle, contains, replace 메소드를 제공
- IE10 이상의 브라우저
3-3] id
- id 어트리뷰트의 값을 취득 또는 변경
- id 프로퍼티에 값을 할당하는 경우 id 프로퍼티가 조재하지 않으면 생성하고 지정된 값을 설정
- 모든 브라우저 동작
3-4] hasAttribute(arrtibute)
- 지정한 어트리뷰트를 가지고 있는지 검사
- Return : Boolean
- IE8 이상의 브라우저에서 동작
3-5] getAttribute(arrtibute)
- 어트리뷰트의 값을 취득
- Return : 문자열
- 모든 브라우저에서 동작
3-6] setAttribute(arrtibute, value)
- 어트리뷰트와 어트리뷰트 값을 설정
- Return : undefined
- 모든 브라우저에서 동작
3-7] remove.Attribute(attribute)
- 지정한 어트리뷰트를 제거
- Return : undefined
- 모든 브라우저에서 동작
4) HTML 콘텐츠 조작
4-1] HTML 컨텐츠를 조작하기 위해 아래의 프로퍼티 또는 메소드를 사용할 수 있음
4-2] textContent
- 요소의 텍스트 컨텐츠를 취득 또는 변경하는 것으로, 마크업은 무시
- 요소에 새로운 텍스트를 할당하면 텍스트를 변경할 수 있음
- 순순한 텍스트만 지정해야 하며 마크업을 포함시키면 문자열로 인식되어 그대로 출력
- IE9 이상의 브라우저
4-3] innerText
- innerText 프로퍼티를 사용해도 요소의 컨텐츠에만 접근할 수 있음
- 비표준, css에 순종적, textContent 프로퍼티보다 느리기 때문에 사용을 권장하지 않음
4-4] innerHTML
- 해당 요소의 모든 자식 요소를 포함하는 모든 콘텐츠를 하나의 문자열로 취득할 수 있으며 마크업을 포함
5) DOM 조작 방식
5-1] innerHTML 프로퍼티를 사용하지 않고 새로운 컨텐츠를 추가하는 방법
5-2] 요소 노드 생성 createElement() 메소드를 사용하여 새로운 요소를생성하고 createElement() 메소드의 인자로 태그 이름을 전달
5-3] 텍스트 노드 생성 createTextNode() 메소드를사용하여 새로운 텍스트 노드를 생성하고, 생략하는 경우 콘텐츠가 비어있는 요소로 생성
5-4] 생성된 요소를 DOM에 추가 appendChild() 메소드를 사용해 생성된 노드를 DOM tree에 추가 또는 removeChild() 메소드를 사용하여
5-5] createElement(tagName)
- 태그 이름을 인자로 전달하여 요소를 생성
- Return : HTMLElement를 상속받은 객체
- 모든 브라우저에서 동작
5-6] createTextNode(text)
- 텍스트를 인자로 전달하여 텍스트 노드를 생성
- Return : Text 객체
- 모든 브라우저에서 동작
5-7] appendChild(Node)
- 인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가
- Return : 추가한 노드
- 모든 브라우저에서 동작
5-8] removeChild(Node)
- 인자로 전달한 노드를 DOM 트리에 제거
- Return : 추가한 노드
- 모든 브라어주에서 동작
6) insertAdgacentHTML()
1] insertAdgacentHTML(position, string)
- 인자로 전달한 텍스트를 html로 파싱하고 그 결과로 생성된 노드를 DOM 트리의 지정된 위치에 삽입
- 첫번재 인자는 사입 위치, 두번째 인자는 삽입할 요소를 표현한 문자열
- 첫번째 인자로 올 수 있는 값 : beforebegin, afterbegin, beforeend, afterend
- 모든 브라우저에서 동작
7) innerHTML vs DOM 조작 방식 vs insertAdjacentHTML()
5. style
1) style 프로퍼티를 사용하면 inline 스타일 선언을 생성
2) 특정 요소에 inline 스타일을 지정하는 경우 사용
3) window.getComputedStyle을 사용하면 인자로 주어진 요소의 모든 CSS프로퍼티 값을 반환
'학원 > JavaScript' 카테고리의 다른 글
| 24장. 이벤트 (0) | 2020.04.13 |
|---|---|
| 23장. 동기식 처리 모델 vs 비동기식 처리 모델 (0) | 2020.04.13 |
| <문자열을 JavaScript Object로 변환하는 방법> (0) | 2020.04.09 |
| 21장. 배열 (0) | 2020.04.09 |
| 20장. 정규표현식 (0) | 2020.04.09 |
