자바스크립트

이벤트

- HTML 요소에서 발생한 사건을 말함 -> 브라우저가 우리에게 알려줌

dom 선택하기

getElementById가 단수인것은 id 속성은 유일하기 때문

let title = document.getElementById('title');
console.log(title);
title.textContent = '법틀';

let items = document.getElementsByClassName('item');
console.log(items);
console.log(items[0].textContent);
console.log(items[1].textContent);
console.log(items[2].textContent);

let liList = document.getElementsByTagName('li');
console.log(liList);

querySelector(CSS Selector)

let h2 = document.querySelector('#title');
console.log('h2: ', h2);

let itemAll = document.querySelectorAll('.item');
console.log(itemAll);
console.log(itemAll[0]);
console.log(itemAll[1]);
console.log(itemAll[2]);

컨텐츠 수정하기

텍스트 수정하기

innerHTML은 요소 추가가능

(주의 textContent, innerHTML 둘다 전의 내용을 싹 지우고 덮어씀)

h2.textContent = '법틀!!!';
h2.innerHTML = '<span>법틀@@@</span>';

속성 제어하기

let input = document.querySelector('input');
input.setAttribute('placeholder', '입력해 주세요!');
input.setAttribute('required', '');

HTML 요소 스타일링

helloItem.classList 에 추가하여 클래스 스타일 추가/제거 가능

let helloItem = document.querySelector('.hello');
console.log('helloItem: ', helloItem);
// helloItem.style.color = 'white';
// helloItem.style.backgroundColor = 'black';

helloItem.classList.add('dark');

동적으로 ul(Unordered List) 클래스에 li(List Item) 삽입하기

let inputBox = document.querySelector('input');

// 뒤에 추가하기
addBtn.addEventListener('click', function () {
  let ul = document.querySelector('ul');
  let li = document.createElement('li');
  li.textContent = inputBox.value;
  ul.appendChild(li);
});

// 맨앞에 추가하기
addBeforeBtn.addEventListener('click', function () {
  let ul = document.querySelector('ul');
  let li = document.createElement('li');
  li.textContent = inputBox.value;
  ul.insertBefore(li, ul.firstChild);
});

동적으로 ul 클래스에 li 삽입하기 + 삭제 버튼이 동작하게 리스너 설정하기

addBtn.addEventListener('click', function () {
  let ul = document.querySelector('ul');
  let li = document.createElement('li');
  li.textContent = inputBox.value;

  let button = document.createElement('button');
  button.textContent = 'X';
  button.setAttribute('class', 'remove-btn');
  button.addEventListener('click', function (event) {
    event.target.parentNode.remove();
  });
  li.appendChild(button);
  ul.appendChild(li);
});

dataset 사용법

<li data-img="./contract.jpg">계약</li>

let btn = document.querySelector('[data-img]');


// 읽기 
console.log(btn.dataset.img);
// getAttribute도 가능
// console.log(btn.getAttribute('data-img');

// 쓰기
btn.dataset.img = 'write';
// setAttribute도 가능
// btn.setAttribute('data-img', 'write');

dataset 응용

// 참고 event.target 은 querySelector로 가져온것과 동일한 결과

let liList = document.querySelectorAll('li');
let selectedItem = document.querySelector('.selected-item');
let img = document.querySelector('img');

for (let i = 0; i < liList.length; i++) {
  liList[i].addEventListener('click', selectItem);
}

function selectItem(event) {
  selectedItem.textContent = event.target.textContent;
  img.setAttribute('src', event.target.dataset.img);
}

이벤트 리스너

인라인 리스너, 프로퍼티 리스너, addEventListener 가 있으며

addEventListener 를 가장 많이 사용한다.

      <button onclick="alert('인라인')">인라인 리스너</button>
      <button class="btn1">프로퍼티 리스너</button>
      <button class="btn2">addEventListener</button>

let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');

btn1.onclick = function () {
  alert('프로퍼티 리스너');
};

btn2.addEventListener('click', helloEvent1);
btn2.addEventListener('click', helloEvent2);

btn2.removeEventListener('click', helloEvent1);

function helloEvent1() {
  alert('addEventListner 1');
}

function helloEvent2() {
  alert('addEventListner 2');
}

저작자표시

TruthFinder