DOM, Callback
6342 단어 JavaScript경일게임아카데미JavaScript
DOM (Document Object Model )
문서 객체 모델
문서에 대한 모든 내용을 담고있는 객체 Document 관련 내용을 객체화 하여 관리한다.
-
자바스크립트로는 객체화 된 모델을 이용하여 동적 HTML을 제어할 수 있다.
-
elements(요소) 에 대한 접근을 통해 HTML의 내용을 변경 할 수 있다.
-
CSS (style) 의 내용 또한 변경 가능하다.
그중 element를 통해 html에 접근하는 연습을 해보았다.
<button id="btn">버튼</button>
<script type="text/javascript">
let btn = document.getElementById("btn")
btn.addEventListener("click",clickBtn)
function clickBtn(){
console.log("hello world!")
}
</script>
- html로 버튼을 하나 만들고
document.getElementById
를 사용하여 html의 id가 "btn"인 엘리먼트를 가져와 선언하고addEventListener
을 사용하여 click할 때 마다 hellow world!가 출력되도록 설정하였다. document.querySelector("#btn")
을 사용하여 가져온 엘리먼트들의 속성은 object 이다.
addEventListener (이벤트 등록)
.addEventListener는 앞에 html 관련 object일때만 사용 가능하다.
- 문법
st.addEventListener(이벤트명,실행할 함수명(call back 내용))
- 이벤트
"click"은 click하면 함수가 실행된다
"onload"는 문서의 모든 콘텐츠가 로드된후 실행되는 이벤트이다.
call back
함수를 정의하고 함수를 호출하려고 할 때 뒤에 ()를 쓰지않으면 함수를 정의한 코드만 나온다. 함수명 뒤에 ()를 써야지만 함수가 실행되기 때문에 잠깐 함수를 담고 싶을때 많이 사용하는 방법이다.
위와 같은 상황에서도 callback 함수를 사용하여 함수를 실행하지 않고 있다가 btn을 click 할 시에 함수가 실행되도록 설정한 것이다.
위같은 방법 말고도 화살표 함수를 사용하여 보다 쉽게 코드를 작성할 수 있다.
<button id="btn">버튼</button>
let btn = document.getElementById("btn")
btn.addEventListener("click",()=>console.log("hello world!"))
화살표 함수를 사용하여 보다 간단하게 만들 수 있다.
<button id="btn">버튼</button>
let btn = document.querySelector("#btn")
btn.addEventListener("click",()=>console.log("hello world!"))
getElementById 말고 querySelector를 사용하여도 똑같이 btn을 불러 올 수 있다.
Author And Source
이 문제에 관하여(DOM, Callback), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ash991213/JavaScript-DOM-Callback저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)