04 Dom

1 DOM

1) DOM이란?

• 문서 객체 모델(The Document Object Model)
• HTML, XML 문서의 프로그래밍 인터페이스
• 문서 구조, 스타일, 내용 등을 변경할 수 있게 도움
• 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할

2) DOM과 JavaScript

• 코드는 자바스크립트로 작성되었지만 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용
• DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됨
• 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전됨
• 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있음
• API (web or XML page) = DOM + JS (scripting language)

 

2 querySelector

1) querySelector()

• 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 [Element]를 반환하는 Domstring
• selectors_: 매개변수
• 반환값: 만족하는 값이 있으면 첫 번째 element, 없다면 null
• syntex_err: 에러

document.querySelector(selectors);

2) querySelectorAll()

• 매칭할 하나 이상의 셀렉터를 포함하는 [DOMString]
• 유효하지 않은 요청을 할 경우 SyntaxError예외가 발생
• 반환값_각 엘리먼트에 대한 하나의 [Element]를 포함하는 살아 있지 않은 [NodeList]
• 매칭 안될 경우 비어있는 리스트 리턴
• syntex_err: 에러

 

3 appendChild()

• 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임
• 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild()메소드는 노드를 현재 위치에서 새로운 위치로 이동
• 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동
• 자식 노드를 반환

var aChild = element.appendChild(aChild);

 

4 insertAdjacentHTML

1) insertAdjacentHTML()

• HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가
• element 안에 존재하는 element를 건드리지 않음

element.insertAdjacentHTML(position, text);

2) insertAdjacentHTML Position

• 'beforebegi' → element 앞에
• 'afterbegin'→ element 안에 가장 첫번째 child
• 'beforeend' → element 안에 가장 마지막 child
• 'afterend' → element 뒤에
• beforebegin , afterend position은 엘리먼트의 부모가 존재해야 하고, node가 트리 안에 있어야 함

 

4 Jacascript 구문

1) Console.log()

• 웹 콘솔에 메시지를 출력
• 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메서드를 제공
• 메시지는 단일 문자열이거나 더 많은 JavaScript 객체중 하나일 수 있음
• obj: 출력할 JavaScript 객체 목록, 각 객체의 문자열 표현은 입력한 순서대로 함께 출력
• msg: 0개 이상의 치환 문자열들을 포함하는 자바스크립트 문자열
• subst: msg내의 치환 문자열들을 치환할 자바스크립트 객체들, 출력 형식의 추가 제어 가능

console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);

2) Node.appendChild()

• 선택한 요소(element)의 속성 값을 정함
• 속성의 현재 값을 얻으려면 getAttribute()
• 속성을 제거하면 removeAttribute()
• name: 값을 설정할 속성의 이름을 지정
• value: 속성에 할당할 값을 포함하는 string

Element.setAttribute(name, value);

3) Element.setAttribute()

• 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임
• 이미 문서에 존재하는 노드를 참조하고 있다면 메소드는 노드를 현재 위치에서 새로운 위치로 이동
• → 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 것