[2024 신입부원 기초 스터디] 이종윤 #4주차 (JS_dom)

JavaScript란?

 

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.

 

 

 

 

 

DOM이란?

DOM은 문서 객체 모델(The Document Object Model)의 약자로  HTML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다.

즉 DOM은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타난다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목해야한다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, JavaScript와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

DOM과 JS

DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 JavaScript 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 JavaScript와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.

DOM API

• Document Object Model Application Programming Interface 의 약어이다.
• 프로그램을 사용하기 위한 명령들의 집합을 Application Programming Interface 라고 한다.  - API
• 즉, DOM API는 HTML의 요소들을 JS에서 제어하기 위한 명령들의 집합을 뜻 한다.

API  예시
document.getElementById(id)	getElementById는 말 그대로 특정 요소를 id값으로 요소를 가져온다 라는 의미이고, 실제로 특정 요소 객체를 반환한다. 이 getElementById는 만약 동일한 id를 갖고있는 요소가 여러개 있을 경우, 가장 위에 있는 첫 번째 요소만 반환하는 API다.
document.querySelector(cssSelector)	querySelector는 요소의 id값이 아닌, css 선택자로 요소 노드를 반환하는 API 이다. 이것도  만약 동일한 이름을 갖고있는 요소가 여러개 있을 경우, 가장 위에 있는 첫 번째 요소만 반환하는 API이다.
document.querySelectorAll()	querySelectorAll은 querySelector와 같이 css 선택자로 요소 노드를 반환하는 API 이다. 이것은 동일한 이름을 갖고 있는 요소가 여러개라면 모두 반환하는 API이다.
document.getElementsByTagName	getElementsByTagName을 사용하면, 특정 tag의 이름을 갖는 모든 요소들을 가져올 수 있다.  ( HTML 태그(tag)는 HTML element라고도 부르며, HTML 문서를 구성하는 기본 단위이다. )
document.createElement()	HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환한다.
element.classList.toggle()	이 API는 0과 1이 반복되는 행위를 의미한다. 즉, 기존 값이 0이었다면 1로 바뀌고 기존 값이 1이었다면, 0으로 바뀌게 됩니다. 그래서 toggle 메서드는 클래스가 존재한다면 클래스를 제거하고, 클래스가 존재하지 않는다면 클래스를 추가는 메서드이다.

 

 

 

감사합니다.