DOM 과 상호작용

1. Element 찾기

DOM 객체에서 Element 를 찾는 방법은 여러가지가 있으나 대표적으로 2개를 많이 사용하는 것 같다.
글을 작성하는 도중 Element 와 Node 가 다르다는 것을 알게 되었다. DOM은 Node들로 구성되어 있고 Element는 Node 중 한 가지 종류이다.
참고한 포스트

1.1. getElementById

문서 내의 유일한 id를 가진 element 객체 를 반환하는 메소드다. 문서 내의 id를 모두 부여해야하는 단점이 있지만 명확하다는 장점이 있다.

1.2. querySelector

CSS 선택자를 사용하여 일치하는 첫번째 element 를 찾을 수 있다. 모든 element에 id를 부여하지 않아도 찾을 수 있고 id, class, tag 를 모두 활용해서 element를 찾을 수 있다는 장점이 있다.
노마드코더 니꼴라스는 이 방법을 선호한다고 한다.

2. Element의 event에 listner 걸기

사용자가 웹과 상호작용하기 위해서는 사용자의 어떤 행위에 대한 웹의 행동을 정해줘야한다. element의 event 에 대한 handler 는 2가지의 방법으로 정의할 수 있다.

2.1. addEventListner

addEventListner(event, handler, useCapture)

• event: 반응할 event (ex. "click", "mouseover", "keyup")
• handler: event 가 발생했을 때 수행할 함수
• useCapture: capturing 단계 혹은 bubbling 단계 때 수행할지 여부

한가지 event 에 대해서 여러개의 handler 를 등록할 수 있다.
script 를 사용해서만 등록가능하다.

2.2. on[event]

on[event] 는 element 의 속성 중 하나이다. 속성이므로 여러 함수를 등록할 수 없다. on[event] 에 함수를 재등록하면 이전에 등록했던 함수는 없어지고 덮어쓰인다. 속성 중 하나이므로 html 에 inline 으로 등록가능하다.

---

참고

• https://www.geeksforgeeks.org/difference-between-addeventlistener-and-onclick-in-javascript/