⚠️ 해당 게시글은 모던애자일 팀원이 준비한 테크톡 내용을 스크랩했습니다.

출처 : 모던애자일 3기 이수형 블로그

clark9810님의 블로그 : 네이버 블로그

자기소개가 없습니다.

blog.naver.com

자바스크립트와 DOM

자바스크립트란?

“HTML과 CSS로 만들어진 정적인 웹페이지를 동적으로 변경해주는 언어” 그럼 HTML과 CSS로만 만든 웹페이지는 동적이지 못할까??

HTML코드로만 만든 버튼

CSS코드를 추가해준 버튼

CSS코드를 추가해준 버튼

HTML과 CSS로 만들어준 버튼의 웹 브라우저에서의 동작

이렇게 웹페이지에서 버튼을 눌렀을 때 버튼이 아무런 기능을 하지 않고 클릭만 되는 것을 확인할 수 있고, HTML과 CSS로 만은 웹페이지를 동적으로 동작 시킬 수 없음을 확인 할 수 있었다.

HTML과 CSS로 만들어준 버튼을 동적으로 작동하게 끔 하기 위해 JS 코드를 추가해 주면 사용자가 버튼을 눌렀을 때 새로운 이름을 입력해 달라는 prompt창이 나오게 되고 사용자가 이름을 입력하고 확인 버튼을 입력하게 되면, 이수형이라고 입력 되어있었던 버튼이 사용자가 입력했던 값인 애자일 이라는 값으로 변경 되었음을 확인 할 수 있다.

이처럼 웹페이지 위에서 사용자의 동작에 따라 그에 맞게 웹페이지가 동작하게 되는 것을 동적인 동적인 웹페이지라고 한다.

위에서 HTML과 CSS그리고 JS를 이용하여 웹 페이지를 동적으로 만들어 주었는데 이 과정 중

“HTML과 JS는 확장자가 서로 다른데 어떻게 JS에서 HTML을 정의하고 접근 할 수 있는거지??” 라는 의문이 들었다.

이에 대한 해답을 얻기 위해서 여러가지 생각을 해 보았는데 그중 하나는

과연 “ JS 입장에서 HTML문서를 보았을 때 어떤 데이터로 보일까??” 라는 생각을 해 보았다.

그렇다 JS입장에서 아무런 필터링을 거치지 않고, HTML문서를 보게 되면 ‘문자열’로 밖에 안보일 것이다.

과연 단순 문자열을 JS가 해석하고 활용할 수 있을까?? 물론 문자열을 사용해서 길이를 구하거나 문자 하나하나를 배열에 집어넣어 값을 바꾼다던지 그런 활용 정도는 할 수 있을 것이다.

하지만 그 정도의 활용 가지고 웹 페이지를 동적으로 바꾸는데 있어서는 분명 한계가 있을 것이다.

따라서 우리는 JS가 HTML을 활용할 수 있는 형태로 바꾸어 주어야 한다.

이때 JS 가 HTML을 활용할 수 있게 도와주는 것이 DOM이다.

DOM은 Document Object Model로 한글로 해석하면 문서 객체 모델 정도가 되겠다.

DOM은 HTML내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

DOM이 어떻게 HTML의 모든 요소를 정의하는지 살펴보면

이처럼 HTML로 작성된 코드를

JS가 해석할 수 있는 형태인 ‘객체’ 형태로 정의해 주어 JS가 해석할 수 있게 해준다.

(이러한 객체 형태로 변한다는 예시를 든 것이지 정확하지는 않음...)

이렇게 HTML코드를 작성하게 되고, 이 코드들이 웹 브라우저에 의해 읽히게 되면 웹 브라우저는

HTML로 작성된 각각의 요소 하나하나를 객체로 만들어

이런식의 트리 형태인 DOM트리를 구성하게 된다.

DOM 트리는 하위 요소들이 상위 요소들에 포함되는 구조로 이루어 져있고, 각각의 요소들이 객체 형태로 되어있기 때문에 JS에서 HTML요소 하나하나에 접근을 할 수 있고,

접근 방법은 JS의 객체에서 key ,value를 이용하는 방법과 같다고 보면 된다.

위의 JS코드를 자세히 뜯어 보면

const button = document.querySelector("button");

document.querySelector를 통해 선택자가 button인 즉 button테그로 되어있는 녀석을 button이라는 상수로 정의해 주고,

button.addEventListener("click",updateName);

addEventListener라는 코드를 통해 click이라는 이벤트가 button버튼에 작용 했을 때

updateName이라는 함수가 작동하도록 해주었다.

function updateName() {
    let name = prompt("새로운 이름을 입력해 주세요");
    button.textContent = name;
}

마지막으로 updateName 함수를 정의해 주었는데 이 함수는 “새로운 이름을 입력해 주세요”라는 prompt 를 띄우게 되고 프롬프트에 입력 받은 값을 name이라는 변수에 저장한 다음 button의 html의 textContent영역에 프롬프트로부터 입력받은 name값을 저장해 주게 된다.

위 코드가 동작 했을 때 HTML코드가 어떻게 변하는지 웹 브라우저의 관리자 도구를 통해 확인해 보면