JavaScript 심화 1

1. DOM 조작

• Document는 문서 한 장 (HTML)에 해당하고 이를 조작
• DOM 조작 순서
  1. 선택
  2. 변경

(1) DOM 선택 - 선택 관련 메서드

• document.querySelector(selector)
  - 제공한 선택자와 일치하는 element 하나 선택
  - 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
  (id로 선택하는 것이 가장 일반적이다.)
  
• document.querySelectorAll(selector)
  - 제공한 선택자와 일치하는 여러 element를 선택
  - 매칭할 하나 이상의 selector를 포함하는 유효한 CSS selector를 문자열로 받음
  - 지정된 selector에 일치하는 NodeList를 반환
  (NodeList는 배열은 아니지만, forEach로 각각의 요소에 접근이 가능하다.)
  
• 다른 메서드도 있지만, id, class, tag 선택자 등을 모두 사용 가능하므로, 더 구체적이고 유연하게 선택 가능하다.

(2) DOM 변경 - 변경 관련 메서드

• document.createElement()
  - 작성한 태그 명의 HTML 요소를 생성하여 반환
• Element.append()
  - 특정 부모 Node의 자식 NodeList 중 마지막 자식 다음에 Node 객체나 DOMString (문자열)을 삽입
  - 여러 개의 Node 객체, DOMString을 추가할 수 있음
  - 반환 값이 없음
  
• Node.appendChild()
  - 한 Node를 특정 부모 Node의 자식 NodeList 중 마지막 자식으로 삽입 (Node만 추가 가능)
  - 한번에 오직 하나의 Node만 추가할 수 있음
  - 만약 주어진 Node가 이미 문서에 존재하는 다른 Node를 참조한다면 새로운 위치로 이동

(3) DOM 변경 - 변경 관련 속성

• Node.innerText
  - Node 객체와 그 자손의 DOMString을 표현 (해당 요소 내부의 raw text)
  - 사람이 읽을 수 있는 요소만 남김
  - 최종적으로 스타일링이 적용된 모습으로 표현
  
• Element.innerHTML
  - 요소 내에 포함된 HTML 마크업을 반환
  - XSS 공격에 취약하므로 사용 시 주의
  

(4) DOM 삭제 - 삭제 관련 메서드

• ChildNode.remove()
  - Node가 속한 트리에서 해당 Node를 제거
• Node.removeChild()
  - DOM에서 자식 Node를 제거하고 제거된 Node를 반환
  - Node는 인자로 들어가는 자식 Node의 부모 Node
  태그의 순서를 바꿀 때 용이
  

(5) DOM 속성 - 속성 관련 메서드

• Element.setAttribute(name, value)
  - 지정된 요소의 값을 설정
  - 속성이 이미 존재하면 값을 갱신
  - 속성이 존재하지 않으면 이름과 값으로 새 속성을 추가
  
• Element.getAttribute(attributeName)
  - 해당 요소의 지정된 값 (문자열)을 반환
  - 인자로는 값을 얻고자하는 속성의 이름을 넣어줌