yuujoeng 2022. 8. 17. 20:55

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()

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