본문 바로가기
728x90

프론트엔드/Javascript58

[Javascript] 클래스 추가 / 삭제 / 포함 여부 확인 classList.(add/remove/contains) [자바스크립트 / Javascript] 클래스의 추가 / 삭제 / 포함 여부 확인 classList.(Add/Remove/contains) 기본 형태 //클래스 추가 element.classList.add(추가할 클래스); //클래스 삭제 element.classList.remove(삭제할 클래스); //클래스 포함 여부 확인 [포함시 : true | 미 포함시 : false 리턴] element.classList.contains(포함 여부 확인할 클래스); 샘플 예제 안녕하세요 메모를 메모하다 티스토리에 오신 것을 환영합니다 https://goodmemory.tistory.com 출력 결과 2021. 5. 24.
[Javascript] 자식 엘리먼트 / 노드 / 태그 추가 append [자바스크립트 / Javascript] 자식 엘리먼트 / 노드 / 태그 추가하기 .append() 기본 형태 //자식 노드 추가 부모노드.append(자식1,자식2,...); 샘플 예제 실행 결과 2021. 5. 24.
[Javascript] 엘리먼트 속성 추가하기 setAttribute 바닐라 자바스크립트 엘리먼트 / 노드 / 태그 속성 추가 하기 setAttribute 기본 형태 //엘리먼트에 속성 추가 element.setAttribute(속성명,속성값); 샘플 예제 기본 체크 박스 체크된 박스 출력 결과 2021. 5. 24.
[Javascript] 엘리먼트 / 노드 / 태그 생성 createElement [자바스크립트] 엘리먼트 / 노드 / 태그 생성 Create Element / Node / Tag 기본 형태 //엘리먼트 생성 document.createElement(태그이름); 샘플 예제 실행 결과 2021. 5. 24.
[Javascript] 엘리먼트 앞 / 뒤에 특정 엘리먼트 삽입하기 insertBefore, insertAdjacentElement 자바스크립트 엘리먼트 (노드) 앞 뒤에 특정 엘리먼트 (노드) 삽입 하기 insertBefore / insertAdjacentElement 기본 형태 //기준 엘리먼트에 삽입할 엘리먼트를 옵션에 맞는 위치에 삽입 //옵션은 beforebegin, afterbegin, beforeend, afterend가 있고 //기준 노드의 앞, 뒤 추가는 beforebegin, afterend를 사용 //기준 노드의 자식 노드로 앞, 뒤 추가는 afterbegin, beforebegin을 사용한다 기준노드.insertAdjacentElement(옵션, 삽입할노드); //기준 노드 앞에 추가할 노드 삽입 부모노드.insertBefore(추가할노드, 기준노드); 샘플 예제 : insertAdjacentElement Hel.. 2021. 5. 24.
[Javascript] 원하는 엘리먼트로 스크롤 이동 Element.scrollIntoView() Javascript 원하는 태그로 스크롤 이동하기 Element.scrollIntoView 이동 원하는 엘리먼트.scrollIntoView() 기능에 대한 설명은 샘플예제 속 주석 처리를 위해 소스 코드 하나하나 설명해놓았음 기본 형태 //Element : 이동 원하는 엘리먼트 Element.scrollIntoView(옵션); 샘플 예제 : 액션가면을 찾아라! 출력 결과 2021. 5. 23.
[Javascript] 마우스 이벤트 mouse event [자바스크립트] 마우스 이벤트 모음 Mouse Events mouseover : 해당 엘리먼트 위에 마우스 커서가 진입한 순간 이벤트 발생 mouseout : 해당 엘리먼트 위에서 마우스 커서가 이탈하는 순간 이벤트 발생 mousedown : 해당 엘리먼트 위에서 마우스 버튼을 클릭하는 순간 이벤트 발생 mouseup : 해당 엘리먼트 위에서 마우스 버튼 클릭 후 떼는 순간 이벤트 발생 mousemove : 해당 엘리먼트 위에서 마우스의 커서가 움직이는 동안 이벤트발생 샘플 예제 출력 결과 2021. 5. 21.
[Javascript] 브라우저 윈도우 창 종료 이벤트 beforeunload / unload [자바스크립트 / Javascript] 브라우저 윈도우 창 종료 이벤트 beforeunload와 unload 차이와 사용 예제 웹 로드시 이벤트 window.addEventListener('load', 콜백함수); DOM 요소 로드시 이벤트 window.addEventListener('DOMContentLoaded', 콜백함수); 웹 브러우저 윈도우 창 종료 직전 이벤트 window.addEventListener('beforeunload', 콜백함수); 웹 브라우저 윈도우 창 종료 이벤트 window.addEventListener('unload', 콜백함수); 샘플 예제 출력 결과 ps. unload는 종료해야 생기는 이벤트 이므로 console.log에 출력되지 않는 것을 알수 있다 2021. 5. 21.
[Javascript] script 태그 안에 defer란? [자바스크립트] script 태그 안에 defer란? DOM 요소의 로드가 끝나고 난 후 해당 스크립트를 실행하라는 속성이다 유사한 기능을 수행하는 것으로는 윈도우 로드 이벤트가 있는데 window.addEventListener('load',e=>{}); 해당 이벤트는 DOM 요소 뿐 아니라 모든 요소의 로드 이후에 실행을 하라는 이벤트인 점에서 defer와 차이가 있다 기본 형태 샘플 예제 [index.html] [example.js] console.log(`example.js 실행~!`); 출력 결과 (콘솔) example.js 실행~! index.html:13 window > load 이벤트 실행! 2021. 5. 21.
[FrontEnd / Javascript] 스크롤 이동 ScrollBy ScrollTo [프론트엔드 / 자바스크립트] 스크롤 이동하기 window.ScrollBy window.ScrollTo 현재 좌표를 기준으로 전달된 좌표만큼 이동하고 싶다면 window.scrollBy(x,y) 전달된 좌표로 이동 하고 싶다면 window.scrollTo(x,y) 기본 형태 //현재 좌표값 + 전달된 좌표값 window.scrollBy(x,y) //전달된 좌표값으로 이동 window.scrollTo(x,y) 샘플 예제 500px 지점 출력 결과 2021. 5. 21.
728x90

티스토리툴바