JavaScript_01. 기본개념_HTML_DOM 1

※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.

https://www.yes24.com/Product/Goods/105608999

바닐라 자바스크립트 - 예스24

 

 학원에서 자바스크립트를 배우긴 했지만.. jQuery로만 사용하다 보니 자바스크립트에 대한 개념 자체를 제대로 몰랐었고

(값을 가져오는 .val()로 전부 사용하다가 .value를 쓰려니 전부 되는건 아니라는 것도 공부를 하면서 깨달았다)

 JavaScript의 경우 활용 용도가 엄청 많다고 생각하여 (node.js 등) 공부를 하고 싶어서 책을 찾던 와중에 찾은 책.

 보통 관련 책은 전부 제이쿼리도 같이 껴있는 것들이 많아서 이 책을 선택하게 되었다.

 

 책에서는 8장에 위치하고 있으나 개인적으로 HTML의 요소 개념부터 아는게 중요하다고 판단하여

개인적으로 정리한 파일에는 이것을 1장으로 놓았다.

 블로그를 1년 전에 개설해놓고 계속 미루다가 내가 사용할 사전으로 생각하고 정리한 파일 + 교재를 보고 블로그에

정리를 시작하려고 한다.

 

 

 

 자바스크립트는 HTML의 문서의 모든 요소에 접근하여 변경할 수 있다.

 

 사용자가 웹 페이지에 접근하면 웹 페이지가 로드되면서 브라우저는 웹 페이지에

대한 DOM(Document Object Model)를 생성.

 

 

DOM 트리

 

 

 DOM(Document Object Model)은 문서 모델 객체로 W3C의 표준이며,  문서에 접근하기 위한 표준을 정의한다. HTML 문서를 계층적 구조와 정보로 표현하는 방식이라고 이해하면 될듯하다.

 

이런 느낌..?

 

 각 서비스마다 문서의 기준이 다르면 거기에 맞춰서 구성해줘야 하는 불편함이 생길 수 있는 것을 표준으로 정해두고 위에 그림 같은 정적인  페이지를 보여줄 수는 없으니 사용자가 해당 이벤트를 발생 시켰을 때, 동적인 요소를 자바스크립트로 채워넣어준다.

 

 

01.01 DOM Element(요소)

 자바스크립트에서 HTML 요소에 대한 다양한 제어를 위해 가장 먼저 해야 할 것은 HTML 요소에 대한 접근 이다. 자바스크립트에서는 HTML 요소를 찾는 다양한 방법을 제공한다.

(기본적인 것이나 헷갈리는 개념만 적어서 빠진 것이 존재할 수 있음)

 

● HTML 요소의 id 속성을 이용

→ document.getElementId

 

●  HTML 요소의 태그명을 이용

→ document.getElementsByTagName

 

●  HTML 요소의 클래스명을 이용

→ document.getElementsByClassName

 

●  CSS의 선택자를 이용

→ document.querySelector(All)

 document 객체의 내장함수인 querySelectorAll을 사용하여 HTML 요소에 대한 접근이 가능하다.

querySelectorAll 함수를 제대로 사용하기 위해서는 CSS 선택자에 대한 정확한 이해가 필요.

 

ㆍ태그 선택자

 

ㆍ클래스 선택자

 

ㆍID 선택자

→ document.getElementById("startTrainName").innerText =

   $startTrain.options[$startTrain.selectedIndex].text;

이런식으로 index값을 지정해서 innerText를 사용할 수도 있다.

 

ㆍ복합 선택자

→ 복합 선택자는 두 개 이상의 선택자 요소를 같이 적용한 선택자이다.

하위 선택자 section ul

자식 선택자 section>ul

인접 형제 선택자 h1+ul

일반 형제 선택자 h1~ul

 

ㆍ속성 선택자(Attribute Selector)

→ 속성 선택자는 클래스 속성이나 ID 속성이 아닌 태그 안에 작성된 특정 속성의 값을 활용해서 스타일을 적용할 수 있게 하는 선택자.

a[href]

input[type=“text”]

 

다음은 속성 선택자에 대한 예제 코드이다.

 

See the Pen JS_01_ Basic concept_selector by dk k (@dk-k) on CodePen.

 

 

지금까지 HTML DOM 요소에 어떻게 접근할 수 있는지에 대해 알아봤다.

 

01.02 DOM Attribute

 DOM 요소에 접근한 다음에는 DOM 요소가 가지고 있는 속성 정보를 가져오거나 속성 정보의 값을 변경할 수 있다.

 

사용자가 브라우저에 입력하는 데이터는 DOM 요소의 value 속성에 저장.

 

★ ★ ★

결국 사용자가 입력한 데이터를 자바스크립트에서 가져와서 사용하려면 먼저

①DOM 요소에 대한 접근을 한 후 ②해당 요소의 속성 정보에 접근

 

● getAttribute()

→ HTML 요소의 속성 정보를 가져올 수 있다.

 

다음 DOM 요소는 value 속성에 사용자가 입력하거나 선택한 값이 저장된다.

ㆍinput type=

checkbox, color, date, datetime-local, email, file, hidden, month, number, password, radio, range, search, tel, text, time, url, week

ㆍselect

 

● setAttribute()

→ HTML 요소의 속성 정보를 수정할 수 있다.

 

(getter, setter 역할)

 

 

● hasAttribute()

→ HTML 요소에 특정 속성이 있는지 확인.

(존재 여부에 따라 true, false 리턴)

 

● removeAttribute()

→ HTML 요소의 특정 속성을 삭제.

 

다음은 DOM 요소에 접근하여 속성 정보 메소드를 사용하는 예제 코드이다.

 

See the Pen JS_01_ Basic concept_Attribute by dk k (@dk-k) on CodePen.

 

 

이런식으로 DOM 요소 접근하여 속성 정보에 대한 것을 조회, 수정, 삭제 등이 가능하다.