본문 바로가기
카테고리 없음

JS 클론코딩 정리. with 노마진코더

by 알거음슴 2022. 3. 7.

Part.1 HTML 문서 내 요소 변경

HTML 내 문서의 요소들의 속성들을 자유자제로 변경할 수 있다.

ex) document.getElementIdBy("h1").innerText = "hello" 적용 시 h1=h1 인 요소의 텍스트가 "hello" 로 변경된다.

적용가능한 속성들은 매~우 많음으로 모두 외우는 것 보다는 언제든지 속성들을 확인할 수 있는 방법을 알아두자

 

console.dir() 통해 해당 요소가 어떤속성들을 가지고 있는 지 알 수 있다.

속성들이 보는것처럼 매우 많음으로 직접 확인하거나 또는 검색을 통해서 확인하는것이 좋다.

 

 

 

Part.2 EventListener

브라우저 내 다양한 동작(event)을 감지할 수 있는 기능

내가 생각지도 못한 매~우 많은 이벤트들이 존재함으로 이걸 외운다고 생각하기 보다는 언제든 참고 할 수 있도록 하는것이 좋다

https://developer.mozilla.org/ko/docs/Web/Events

 

이벤트 참조 | MDN

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가

developer.mozilla.org

이벤트를 사용하길 희망한다면 addEventListener() 함수를 사용할 수 있다.

ElementName.addEventListener("eventName", function) → HTML 문서 내 ElementName 요소에 "eventName" 이벤트 발생 시 function 함수를 실행한다.