Javascript가 HTML문서를 동적으로 변환 시킬 수 있는 이유 (DOM개념)

유민님과 남아서 Javascript 공부한 내용

 

거꾸로 접근하는 방법을 선택했다. 

기초부터 공부하는 것을 멈추고, 로그인 화면을 구현한 HTML, CSS, JS문서 코드를 해석했다. 

의문이 들었던 점은... 어떻게 자바스크립트가 HTML문서를 동적으로 변환시킬 수 있는 거지? 였다.

 

문제 이해 및 해결과정

1. 웹 브라우저 안에는 렌더링 엔진이라는 것이 있다.

 

2. 렌더링 엔진은 HTML을 한 줄 한 줄 해석한다. 그리고 문서를 객체화 시킨다.  ← 중요한 개념임. 웹브라우저 역할.

 

3. 객체화된 문서에만 Javascript가 접근할 수 있다.

 

4. 여기서 DOM이라는 용어가 나온 것이다. Document Object Model. 문서 객체 모델이다. 

 

5. DOM은 트리구조를 가지고 있다. (아래 사진 참고)

6. 돔트리 안의 각각의 요소들을 노드라고 한다. 

 

7. 우리는 DOM을 이용해서 각각의 노드를 이용할 수 있다.  이용한다는 말은 접근으로 이해하면 쉽다. 

 

8. 사진 최상단에 document가 있다. 이는 최상위 노드로 어떤 html 요소에도 접근이 가능하다. 

document는 최상위 노드. 자식으로 DOCTYPE과 html이 나왔다.

 

document를 시작으로 하위 노드에 접근해서 html 조작이 가능하다.

9. 오늘 해석한 Js 코드.

1~3번 코드를 보면 document(최상위 노드)로 html문서에 접근한 후 getElementsByName메서드를 사용한다. 

const id = document.getElementsByName('id')[0];         // document로 접근하는 것을 볼 수 있음.
const password = document.getElementsByName('password')[0]; // getElementsByName 메서드 사용.
const login = document.getElementsByName('login')[0];
let errStack = 0;

login.addEventListener('click', () => {
    if (id.value == 'acid') {
        if (password.value == '0000') {
            alert('로그인 되었습니다!')
        }
        else {
            alert('아이디와 비밀번호를 다시 한 번 확인해주세요!')
            errStack ++;
        }
    }
    else {
        alert('존재하지 않는 계정입니다.')
    }

    if (errStack >= 5) {
        alert('비밀번호를 5회 이상 틀리셨습니다. 비밀번호 찾기를 권장드립니다.')
    }
});