JavaScript_1)DOM

Web 개발에 있어 Frontend에서는 HTML, CSS, JS 가 있다고 알고 있으며,
HTML은 구조물의 뼈대, CSS는 스타일링, JS는 동적인 기능을 구현하는 역할을 한다.
이 중 우리는 JavaScript에 대해서 배워보도록 하자.

DOM (Document Object Model)

웹 페이지(Document)를 구조화된 객체로 제공하여 프로그래밍 언어가 페이지 구조에 접근할 수 있는 방법을 제공
문서 구조, 스타일, 내용 등을 변경할 수 있도록 함
웹 페이지 객체이자, DOM Tree의 진입점이며, 페이지를 구성하는 모든 객체 요소를 포함하고 있다.

DOM 조작 시 기억해야할 것은 우리가 웹 페이지를 동적으로 만든다는 것은 웹 페이지를 조작한다는 의미이며, 항상 조작하기 이전에 조작할 요소를 선택해야 한다는 것을 기억하자.
(선택) -> (조작)

선택 메서드

1. 요소 한 개 선택

   document.querySelector(selector)

   • selector 자리에는 CSS selector를 작성(여러 개라면 첫번째 객체, 없다면 null 반환)

2. 요소 여러 개 선택

   document.querySelctorAll(selector)

   • 제공한 선택자와 일치하는 여러 요소를 선택하면 NodeList로 반환

속성(attribute) 조작

1. 클래스 속성 조작(classList 메서드 사용)

   element.classList.add() - 지정한 클래스 값을 추가
   element.classList.remove() - 지정한 클래스 값을 제거
   element.classList.toggle() - 클래스가 존재하면 제거하면서 false반환 / 클래스가 없다면 추가하면서 true 반환

2. 일반 속성 조작

   Element.getAttribute() - 해당 요소에 지정된 값을 반환(조회)
   Element.setAttribute(name, value) - 지정된 요소의 속성 값을 설정, 이미 있다면 갱신
   Element.removeAttribute() - 요소에서 지정된 이름을 가진 속성 제거

HTML 콘텐츠 조작

1. textContent 조작

   요소의 텍스트 콘텐츠를 표현

DOM 요소 조작 메서드

1. document.createElement(tagName)

   작성한 tagNamge의 HTML 요소를 생성하여 반환

2. Node.appendChild()

   한 Node를 특정 부모 Node의 자식 NodeList 중 마지막 자식으로 삽입
   추가된 Node 객체를 반환

3. Node.removeChild()

   DOM에서 자식 Node를 제거
   제거된 Node를 반환

style 조작

해당 요소의 모든 style 속성 목록을 포함하는 속성

Parsing

브라우저가 문자열을 해석하여 DOM Treee로 만드는 과정