javascript로 DOM을 조작할 수 있다는 건 정말 멋진 일이에요.

wjdskagjs1·2020년 3월 26일
0

javascript

목록 보기
2/3

DOM is not javascript.
DOM is API.

웹페이지의 모든 요소의 최상위에는 window 객체가 있다.
그 밑에 DOM, BOM객체, 그리고 여러분들이 작성한 javascript의 객체들이 있다.
그리고 자바스크립트로 BOM이나 document와 그 자식들을 조작하거나 이벤트 함수를 수정할 수 있다.
BOM은 잘 안쓰지만 이를테면

location.href = "링크";

이런식으로 쓰면 해당 링크로 이동한다거나

history.back();

이런 식으로 쓰면 뒤로가기가 된다거나 여러모로 유용한 기능들도 제법 있다.

한편 document 객체의 자식들이란 웹 페이지에 보이는 html, head, body, div, span 등등 모든 태그들이다.
이것들은 계층 구조로 이루어져 있다.
그렇기 때문에 여러분은 마음만 먹으면 javascript를 이용해 어떤 요소에든지 마음껏 접근할 수 있다.

document에는 그런 태그들을 불러오고 값을 수정하고 지울 수 있는 getElemenetById, getElementsByName, getElementsByTagName, querySelector, querySelectorAll 같은 멋진 메소드들도 준비되어 있다.(사실은 메소드를 거치지 않고 dot notation으로 직접 이름이나 속성값으로 접근할 수도 있지만 쿨하지 않으니 넘어가자.)
document에 관한 문서를 더 찾아본다면 새로운 요소를 추가하고 수정하고 삭제하는 메소드도 발견할 수 있을 것이다.
정말 멋진 일 아닌가?
javascript를 이용하면 웹 페이지의 모든 요소를 조작할 수 있는 것이다!
onclick, onchange같은 이벤트 함수가 있는 요소들에 자기가 원하는 이벤트 함수를 넣을 수도 있다.

더 멋진 것을 알려주겠다.
다른 gui 어플리케이션들도 본질은 똑같다!

웹에서 HTML을 JavaScript로 조작하듯이
안드로이드 앱에서는 XML을 JAVA로 조작할 수 있고
winform에서는 winform 요소들을 C#으로 조작할 수 있다.

이 본질을 이해했다면 다른 gui 개발에 부딪혀도 웹개발의 이 원리를 대입해서 금방 능숙하게 멋진 어플리케이션을 만들 수 있다!

cool!

profile
노드 마스터가 되는 그 날 까지

0개의 댓글