DOM
DOM 이란
DOM ( Document Object model )
브라우저가 HTML 문서를 파싱하는 과정에서 생겨나는 객체
파싱 : 브라우저가 html 문서를 해석하는 과정<body> <h1>ToDo</h1> <div class="todo-container"> <input type="text" id="todo-input"> <ul> <li>손 흔들기</li> <li>인사하기</li> </ul> </div> </body>이런 html 내용이 있으면 브라우저가 해당 내용을 읽어서 DOM 객체를 만듬
위 파일을 기반으로 만들어진 DOM 객체는
이런식으로 생겼음
나무 뿌리처럼 생겨서 트리구조 라고 부르고
나뭇가지처럼 뻗어져 나가는곳을 노드 라고 부름붉은색 : Element Node
파란색 : Text Node
보라색 : Attribute Node (속성 노드)모든 노드는 객체의 형태를 가짐
DOM 직접 확인하기
만든 웹페이지 개발자 툴에서 확인해 보자.
콘솔에
console.dir(document) 입력하면
document 내부에 존재하는 속성들을 볼 수 있음
내부 속성을 따로 보고싶으면
예를 들어 childNodes 속성만 보고싶으면
이런식으로 작성하여 확인이 가능함.
노드를 타고타고 가다보면 input과 관련된 node를 확인할 수 있음
해당 input의 value를 보려면
이런식으로 input 박스의 값을 실시간으로 가져오는게 가능함.
js의 queryselector 또한 document의 하위 기능중 하나로 DOM 객체를 사용한것.
