종료시켜 놓고 간 맥북이 켜지지 않았다. 가로수길로 사러 가야 하나 사설수리업체에 보내야 하나 내일인 월요일에 바로 써야 하는데 이거 어떡하나... 하고 여러 가지 테스트를 해봤다. 일단 제일 상위 이벤트인 전원이 연결되어 있나를 먼저 확인 후 하나씩 버그(?)를 잡아가려 했는데 멀티탭에 결함이 있었고 다른 멀티탭으로 교체하고 전원을 켜보니 켜진다. 느슨해진 지갑사정에 긴장감을 주는 맥북이었다.
DOM이란!
Document Object Model - DOM
DOM은 Document Object Model의 약자이다. 직역을 하자면 문서 객체 모델이다. 문서 객체란 <html>이나 <body> 같은 html 문서의 태그들이 자바스크립트가 이용할 수 있는 객체로 만들어진 것을 말한다.
이러한 문서 객체는 DOM 구조를 접근하는 관문이며, HTML 문서를 뜻한다.
자바스크립트는 아래와 같이 DOM을 통해 HTML에 접근할 수 있다.
이렇게 HTML의 DOM을 통해 자바스크립트는 HTML 파일의 모든 요소에 접근할 수 있고 요소들을 수정할 수 있다. DOM이 없다면, 자바스크립트는 웹페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 가지지 못하게 된다.
자주 쓰는 HTML DOM Methods에는 다음과 같은 것들이 있다.
1. getElementsById : HTML의 id요소에 접근하고 싶을 때 사용
2. innerHTML : HTML 요소의 내용을 불러오거나 수정하고 싶을 때 사용
3. addEventListener : 요소의 이벤트에 대한 반응을 연결할 때 사용
Event 란!
화려하고 다양한 기능이 필요한 웹사이트가 늘어나면서 인터렉션이 필요한 일이 많아졌다. 인터렉션은 HTML, CSS로 구현하기엔 한계점이 있어서 Javascript가 필요하다.
Javascript를 이용하여 이벤트를 감지하고 어떤 동작을 일으킬 수 있다.
특정 요소에 user interactive 한 반응을 할 수 있게 하는 것을 이벤트라고 한다.
다음과 같은 경우의 이벤트들이 있을 수 있다.
- 버튼을 클릭했을 때
- input에 값이 변했을 때
- 이지가 로딩되었을 때
한 이벤트를 감지하고 그에 따라 반응하기 위해서는 앞서 설명한 DOM API를 사용해야 한다.
자바스크립트와 HTML 파일을 연결해주어야 하기 때문이다.
addEventListener
이벤트가 일어나면 코드의 한 부분인 event handler라는 것을 만들어서 그 이벤트에 대한 반응을 하게 할 수 있다. event handler는 event listener라고도 부른다.
앞서 설명한 DOM API에 있는 method 중 하나인 addEventListener method를 이용하여 이벤트가 발생하면 인자로 받은 함수 function()를 실행시켜 줄 수 있다.
example.addEventListener(이벤트종류, function(){
// 이벤트가 일어날때 실행할 내용
});querySeletor와 getElementBy
항상 jQuery만 해왔던 입장에서 정말 편했다. 선택자를 잡을 때도 그렇고 어찌 됐건 기존에 javascript를 사용하는 것보다 훨씬 편했다 하지만 그때의 편함은 나중에 후회로 남게 되었ㄷ...javascript로 할걸
일단 querySeletor와 getElementBy를 비교해보려고 한다.
먼저 querySelector가 더 유연하다. id, class를 포함한 css3 선택자로 문서 객체를 선택할 수 있기 때문에 더 다양한 용도로 사용될 수 있다.
하지만 getElementBy의 처리 속도가 대략 1.2배 더 빠르다. (사진 참고)
그렇다고 해서 querySelector를 쓰지 말아야 하나?
미리 얘기하면 아니다.
querySelector는 초당 약 칠백만(7,000,000) 건의 작업을 처리할 수 있습니다. 이를 밀리초로 계산해 보면 밀리 초당 칠천(7,000) 건을 실행한다고 볼 수 있습니다. 어마어마한 속도죠! 절대 느린 속도가 아닙니다.
단지, getElementBy가 보다 빠를 뿐.
내가 내린 결론은
1. runtime을 줄이는 게 목적이라면 getElementBy를 사용하는 게 훨씬 더 효율적이다.
2. querySelector를 사용하면 class나 ID 같은 특정 선택자에만 제한되지 않아서 편하다.
'Javascript' 카테고리의 다른 글
| [javascript] 댓글 작성 기능 (click,keyCode) (0) | 2023.01.16 |
|---|---|
| [javascript] Event 종류, 작성 (0) | 2023.01.16 |
| [javascript] Object - 유저의 nickname과 interests 넣기 (0) | 2023.01.16 |
| [javascript] 최소 ~ 최대값 랜덤 수 뽑기 (0) | 2023.01.16 |
| [web]semantic web / semantic tags (0) | 2023.01.16 |
댓글