-
4. javascript - html DOM 조작Javascript 2022. 1. 10. 14:58
0. 목차
1.addEventListner
1-1. DOM, querySelector
1-2. callback함수
2. script 외부연결과 onload
1.addEventListner
자바스크립트를 사용해 html의 엘리먼트에 이벤트를 등록하는 메소드이다.
이를 이해하기 위해서는 DOM의 개념과 콜백함수의 개념을 이해하여야 한다.
<button id="btn">버튼</button> <script type="text/javascript"> let btn = document.querySelector("#btn") // 1. querySelector의 개념 btn.addEventListener('click', clickBtn) // 2. callback의 개념 function clickBtn(){ console.log("hello world!") } console.log(typeof btn); // 출력 : object (html요소를 객체로 만듦) </script>1-1. DOM, querySelector
- document.querySelector("#btn")
- document.getElementById("btn")
모두 html 페이지에서 인자값으로 들어간 element를 찾아 object로 가져오는 역할
이걸 통해서 html 엘리먼트를 자바스크립트로 조작할 수 있다. (document객체(DOM)의 속성, 메소드를 사용할 수 있게 됨)
둘은 같은 기능을 하는 메소드인데 위의 querySelector를 주로 쓰는 듯.
❗️혹시 해당하는 엘리먼트가 없으면 btn 변수에는 그냥 null이 할당된다. (이때는 에러가 뜨지 않음)
그래서 후에 btn 객체의 메소드를 사용하려고 할 때 그제서야 에러가 뜬다. btn 변수 선언까지는 정상 작동하므로 이런 경우 에러의 원인을 찾기 어렵다. (id명에 오타가 난 경우 이렇게 됨)
👉 console.log(btn)을 찍어서 btn에 제대로 엘리먼트가 할당이 되었는 지를 확인해봐야 함.querySelector()의 인자값으로는
- "#id명"
- ".class명"
- "body > button" (CSS 셀렉터방식)
모두 사용 가능하다.
또한 <script>부는 html 내에서 해당하는 엘리먼트보다 아래에 입력해야 정상적으로 script 내용이 엘리먼트에 적용이 된다.
<head>부의 <script>에 작성하면 엘리먼트가 렌더 되기 전이라 DOM이 저장된 변수에는 그냥 null이 할당되어버림.
이걸 해결 할 수 있는 방법은 2에서 추가설명
1-2. callback
HTML과 관련된 객체에서만 addEventListener를 사용할 수 있음.
인자값으로 2가지 들어감(string, callback함수)
첫번째 인자값은 String : event명 (ex - 클릭, 마우스오버, 마우스아웃, 스크롤, 드래그 ...)
두번째 인자값은 Callback함수
Callback이란?
매개변수에 함수를 넣어서 함수 안에서 다른 함수를 실행시키고 싶을 때 사용하는 것이 callback.
인자값으로 넣을 때는 () 없이 함수명만 입력하는 것에 주의!코드
function func1(type, parameter){ //parameter에 함수명 입력 if (type === "click") { parameter() //여기서 ()를 붙여 콜백함수를 실행 } else { console.log("type을 click으로 입력해주세요.") } } //콜백함수 function inner(){ console.log("hello world!") } func1("click", inner); //hello world! 출력위의 콜백함수를 객체에 담는다면 아래와 같다.
let elementObj = { addEventListener:func1 } elementObj.addEventListener('click', inner); //객체내의 프로퍼티로 저장된 함수를 호출위의 방식은 미리 함수를 정의해둔 뒤 그것을 변수나 객체에 담는 방식이라면,
객체 내에서 익명함수를 이용해 새로 작성하는 방식도 가능하다.
elementObj.addEventListener("click", function(){console.log("익명함수")}); elementObj.addEventListener("click", ()=>{console.log("화살표함수")}) elementObj.addEventListener("click", _ => console.log("화살표함수 (),{}생략")) // 사용하지않는 매개변수 _(아무거나가능)를 입력해서 생략. 아무것도 없을 때는 () 생략이 불가능해서이러한 방식을 앞으로 배울 Node.js, React, 블록체인 등에서 더 많이 사용하므로 위의 문법구조를 잘 익혀두는 것이 좋다!
2. script 외부연결 : onload
css와 마찬가지로 javascript도 외부파일을 만들어 불러올 수 있다.
방식은 동일하게 head부에 링크를 삽입하는 코드를 써주면 된다.
<script type="text/javascript" src="./파일명.js"></script>그런데 여기서 문제는, 위에도 잠깐 적었듯이 <script>는 html 내에서 해당하는 엘리먼트보다 아래에 입력해야 정상적으로 script 내용이 엘리먼트에 적용이 된다는 것이다.
이를 해결하기 위해 사용하는 것이 onLoad 이벤트이다.
onLoad 이벤트란?
html 및 그와 연결된 모든 리소스가 브라우저 화면에 모두 로딩이 완료되면 동작하는 이벤트.
엘리먼트와 연결된 script 내용을 onLoad 내부에 적어두면, 문서내의 script 위치에 상관없이 HTML, CSS, JS가 모두 랜더링이 끝난 뒤에 동작하기 때문에 화면 내의 모든 엘리먼트를 다 가져와 정상적으로 실행이 된다.코드.
1. onload를 사용하는 방법
window.onload = function () { const btnElement = document.querySelector("#btn"); console.log("window.onload: ", btnElement); //{ } 코드블럭 내부에 실행할 동작을 입력 }2. DOMContentLoaded를 사용하는 방법
window.addEventListener('DOMContentLoaded', () => { const btnElement = document.querySelector("#btn"); console.log("DOMContentLoaded: ", btnElement); }) //{ } 코드블럭 내부에 실행할 동작을 입력1은 문법이 간단하고 가독성이 좋은 편이지만 오래된 문법이라 실행속도가 비교적 느린편이고 2의 실행속도가 더 빠르다.
가능하다면 2를 사용하는 것이 더 좋을 듯 하다.
'Javascript' 카테고리의 다른 글
6. To do list 만들기 (0) 2022.01.12 5. javascript - 객체의 복사 (0) 2022.01.10 3. javascript 기초 - forEach, 배열중복제거 (0) 2022.01.06 2. javascript 기초 - array와 object (0) 2022.01.04 1. javascript 기초 - for문/if문 사용해서 문제풀기 (0) 2022.01.03