1. DOM ( Document Object Model )
- DOM 은 HTML 요소를 Object( JS OBject )처럼 조작( Manipulation ) 할 수 있는 모델이다.
- 즉, JS 를 사용할 수 있다면 DOM 으로 HTML 을 조작할 수 있다..
** 트리구조 : 트리구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복된다.
1 - 1) NodeList
- Nodelist 객체는 일반적으로 childNodes 와 querySelectorAll 과 같은 메서드에 의해 반환되는 노드의 콜렉션이다.
- Nodelist 는 Array 가 아니지만, forEach() 를 사용하여 반복할 수 있다. 또한 Array.from() 을 사용하여 Array 로 변환할 수도 있다.
-----------------------------------------------------------------------------------
2. DOM 사용
- JS 에서 DOM 은 document 객체에 구현되어 있다.
- 개발자 도구 콘솔창에서 document 객체를 조회할 수 있다.
- DOM 구조를 조회할 때에는 console.dir 이 유용하다. console.dir 은 DOM 을 객체의 모습으로 출력한다.
-----------------------------------------------------------------------------------
3. HTML 에 JS 적용
- 웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 태그를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춘다.
- 해석을 멈춘 웹 브라우저는 <script> 태그를 먼저 실행한다.
- <script> 요소는 등장과 함께 실행된다.
3 - 1) script 태그를 추가하는 2가지 방법
- <head> 태그안에 추가하는 방법
- <body> 태그가 끝나기 전에 추가하는 방법
** <script> 태그의 위치에 따라서 결과값이 달라진다. **
-----------------------------------------------------------------------------------
4. document 객체를 통해 HTML 엘리먼트를 CRUD 하기
** CRUD : Create Read Update Delete
4 - 1) 개발자 콘솔
- 새로운 div 를 생성해도 노드가 연결이 되어있지 않다.
- 새로 만들어낸 요소는 append 를 이용하여 연결해주어야 한다.
4 - 2) DOM 의 엘리먼트 조회
- DOM 으로 HTML 엘리먼트 정보를 조회하기 위해서는 querySelector 메소드를 사용해 조회할 수 있다.
- 셀렉터로는 HTML 태그(), id(), class() 세 가지가 가장 많이 사용된다.
- 단 하나의 엘리먼트가 아닌 여러 개의 엘리먼트는 querySelectorAll 을 사용하면 된다.
- 이렇게 조회된 HTML 엘리먼트들은 배열이 아닌 Array-like Object 라고 부른다.
4 - 3) DOM 엘리먼트 Update
- textContent 를 사용하면 업데이트 가능
- classList.add 메소드로 class 업데이트 가능
4 - 4) DOM 엘리먼트 Delete
- remove 메소드로 삭제가능
- innerHTML 을 사용하면 모든 자식 엘리먼트를 지울 수 있다. 하지만 보안상 몇 가지 문제를 가지고 있어 다른 메소드를 사용한다.
- removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메소드이다. 반복문을 사용하여 지울 수 있다.
-----------------------------------------------------------------------------------
5. 여러 차이점 정리
5 - 1) append 와 prepend 의 차이
- append 메서드는 문서의 마지막 자식 뒤에 Node 개체 또는 DOMString 개체 집합을 삽입한다.
- DOMString 객체는 동등한 Text 노드로 삽입된다.
- prepend 메서드는 문서의 첫 번째 자식 앞에 Node 개체 또는 DOMString 개체 집합을 삽입한다.
5 - 2) textContents 와 innerHTML 의 차이
- textContent 는 노드의 모든 요소를 반환한다.
- innerHTML 은 이름 그대로 HTML 을 반환한다. 간혹 HTML 을 이용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML 로 분석할 필요가 없다는 점에서 textContent 의 성능이 더 좋다. 그리고 XSS Attack 의 위험이 존재한다.
5 - 3) element 와 node 의 차이
- Node 는 여러가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다.
- element 는 Document 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로, 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 Element 를 상속한다.
5 - 4) children 과 childNodes 의 차이
- children 속성은 요소의 children 요소 컬렉션을 HTML 컬렉션 개체로 반환한다.
- childNodes 속성은 노드의 하위 노드 컬렉션을 NodeList 개체로 반환한다. 컬렉션의 노드는 소스 코드에 표시되는 대로 정렬되며 인덱스 번호로 액세스 할 수 있다.
5 - 5) remove 와 removeChild 의 차이
- removeChild 는 DOM 에서 하위 노드를 제거하고 제거된 노드를 반환한다. 메모리는 남고 트리 구조상에서만 제거된다.
- remove 메소드는 이를 포함하는 트리로부터 객체를 제거한다.
'Java Script' 카테고리의 다른 글
| JS - 객체 지향 (0) | 2021.05.10 |
|---|---|
| JS - 고차함수 (0) | 2021.04.28 |
| JS - Spread / Rest 문법 (0) | 2021.04.23 |
| JS - 클로저 (0) | 2021.04.22 |
| JS - 스코프 (0) | 2021.04.22 |
