자주 쓰는 Javascript 정리 / Javascript 문법

2022-02-10

자주 쓰는 Javascript

document ready 완료 후 실행

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // 실행 코드
    });
</script>

몇 초 지연 후 실행

console.log("시작");

setTimeout(function() {
    console.log("3초 후 실행");
}, 3000);

console.log("종료");

setTimeout은 비동기 방식으로 동작하며, 뒤에 오는 코드는 기다리지 않고 바로 실행됩니다.

엔터 키 이벤트 처리

// 인풋에 엔터 키 이벤트 발생 시 처리
document.getElementById("인풋ID").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        함수명();
    }
});

change 이벤트 부여

document.getElementById('인풋ID').addEventListener('change', 동작함수);

단, hidden 인풋에는 change 이벤트를 부여해도 동작하지 않습니다.

자식 요소 찾기

const keywordList = document.getElementById("keywordDiv").children;

for (let i = 0; i < keywordList.length; i++) {
    console.log(keywordList[i]);
}

childNodes	주석, 텍스트 노드도 자식 노드로 포함하여 반환합니다.
children	비 요소 노드를 제외한 자식 노드들만 반환합니다.

부모 노드 삭제

document.getElementById("ID명").parentNode.remove();

현재 페이지 새로고침

location.reload(true);
location.href = location.href;
history.go(0);

위 3가지 방법 중 아무거나 사용하면 됩니다.

다른 페이지로 리다이렉트

window.location.href = "http://URL";

특정 요소로 스크롤 이동

location.href = "#" + 요소Name;

페이지 로드 시 원하는 요소 위치로 스크롤을 이동하려면, 위 로직을 document ready 안에 넣으면 됩니다.

라디오 체크 처리

document.getElementById("라디오InputID").checked = true;

토글 버튼 클릭 이벤트 부여

<c:forEach items="${itemsList}" var="row" varStatus="i">
  </div>
      <div class="canvas-btn-wrap">
        <div class="toggle-wrap">
          <div class="toggle-btn type02">
            <input type="checkbox" class="checkbox" onclick="togleCanvas(this, ${row.itemId})">
            <div class="knobs"></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
  </div>
</c:forEach>

위 캔버스 열기/닫기 버튼 토글 버튼 checkbox 클릭 시 아래 javascript 함수가 동작하도록 합니다.

function togleCanvas(checkbox, itemId) {
  if (checkbox.checked) {
    openCanvas(itemId);
  } else {
    closeCanvas(itemId);
  }
}

클래스명을 가진 모든 요소에 반복

const elements = document.querySelectorAll(".클래스명");

elements.forEach(function(element, index) {
    element.setAttribute("id", "ID명_" + (index + 1)); // ID 부여
    element.classList.add("신규클래스명"); // 클래스명 부여
    element.value = "값"; // 값 설정
});

querySelectorAll는 NodeList를 반환하여 forEach를 사용할 수 있고,
getElementsByClassName은 HTMLCollection를 반환하여 forEach를 사용할 수 없습니다.

ID로 찾은 요소에 클래스명 있는지 확인

const dom = document.getElementById("ID명");
			
if (dom !== null && dom.classList.contains("클래스명")) {
  // 클래스명이 있는 경우 처리
}

ID가 특정문자열로 시작하는 Dom의 수

const elements = document.querySelectorAll('[id^="특정문자열"]');

console.log(elements.length);

Javascript 이벤트 강제 발생 처리

change 이벤트 강제 발생

document.getElementById("ID명").dispatchEvent(new Event("change"));

click 이벤트 강제 발생

document.getElementById("ID명").click();

Javascript 데이터 저장

로컬스토리지 사용법

// 로컬스토리지 초기화
localStorage.clear();

// 로컬스토리지에 JSON 객체를 String으로 변환하여 저장
localStorage.setItem("키", JSON.stringify(objUserInfo));

// 로컬스토리지에서 JSON 스트링 조회하여 JSON 객체로 변환
const 객체명 = JSON.parse(localStorage.getItem("키"));

// 로컬스토리지에 저장된 키-값 삭제
localStorage.removeItem("키");

로컬스토리지는 전역 객체이므로, Javascript에서 import 없이 사용할 수 있습니다.
window 객체의 속성이라 window.localStorage로도 접근 가능합니다.

세션스토리지 사용법

// 세션스토리지 초기화
sessionStorage.clear();

// 세션스토리지에 JSON 객체를 String으로 변환하여 저장
sessionStorage.setItem("키", JSON.stringify(objUserInfo));

// 세션스토리지에서 JSON 스트링 조회하여 JSON 객체로 변환
const 객체명 = JSON.parse(sessionStorage.getItem("키"));

// 세션스토리지에 저장된 키-값 삭제
sessionStorage.removeItem("키");

세션스토리지는 전역 객체이므로, Javascript에서 import 없이 사용할 수 있습니다.
window 객체의 속성이라 window.sessionStorage 접근 가능합니다.

자주 쓰는 Javascript 정리 / Javascript 문법

자주 쓰는 Javascript

Javascript 기초 문법

문자열 관련 처리

Javascript로 CSS 스타일 변경

서버 요청 전 처리

Javascript로 HTML 요소 추가

Javascript 정규표현식