[코드잇]인터랙티브 자바스크립트(1)

강윤채·2023년 3월 24일
자바스크립트코드잇
0

[코드잇]자바스크립트

목록 보기
2/2

🎇 태그 선택하기

✨ id로 태그 선택

  • document.getElementById('id')
const myTag = document.getElementById('myNumber')
//myNumber 라는 Id 선택
  • 없는 id를 선택하면 null이 출력된다.

✨ class로 태그 선택

  • document.getElementsByClassName('class')
const myTag = document.getElementsByClassName('color-btn')
//color-btn 태그 모두 선택
  • 유사배열(HTMLCollection) 출력
  • 없는 class를 선택하면 비어있는 유사배열이 출력된다.

✨ 유사배열(Array-Like Object)

  • 배열과 유사한 객체 중 최소한의 조건을 갖춘 객체
    1. 숫자 형태의 indexing이 가능
    2. length 프로퍼티가 존재
    3. Array.isArray(유사배열) = false
    4. 배열의 기본메소드를 사용할 수 없다.
    (유사배열마다 조금씩 다르다)

    배열 내부를 수정하거나 삭제 불가 (push, pop, shift...)

✨ 태그이름으로 태그 선택

  • document.getElementsByTagName('tag') 
const btns = document.getElementsByTagName('button');
//button class 선택
const allTags = document.getElementsByTagName('*');
// 모든 태크 선택

✨ CSS선택자로 태그 선택

  • document.querySelector('css')
  • document.querySelectorAll('css')
const myTags = document.document.querySelector('#myNumber');
//myNumber(id) CSS 선택자로 선택
const btn = document.document.querySelectorAll('.color-btn');
// color-btn(class) CSS 선택자로 선택

🎇 이벤트 핸들러

✨ 이벤트와 이벤트 핸들러

  • 이벤트 : 웹페이지에서 발생하는 대부분의 일(사건)들
  • 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일
  • 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드, '이벤트 리스너'라고도 불린다.

✨ 이벤트 핸들러 등록 방법(2가지)

  1. 자바스크립트로 해당 DOM객체의 onclick프로퍼티에 등록
const btn = document.querySelector('#myBtn');

btn.onclick = function() {
  console.log('Hello Codeit!');
};
  1. HTML 태그의 onclick 속성에 바로 표시하기
<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>

🎇 브라우저와 자바스크립트

  • 브라우저도 윈도우라는 객체다
  • 윈도우객체의 여러 메소드를 활용해 브라우저를 제어할 수 있다.

✨ DOM(Document Object Model)

  • 문서 객체 모델
    : 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것
  • 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분

✨ DOM 트리

  • HTML의 계층 구조를 트리형태로 나타낸 것
  • 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현

Dom tree에 자세히 알기

✨ DOM 이동 시 활용 가능한 프로퍼티

  1. 요소 노드에 대한 이동 프로퍼티
  • 요소노드인 경우에만 해당(텍스트 노드X)
standard.children[2].previousElementSibling.children[0];
//연속으로 사용 가능
  1. 모든 노드에 대한 이동 프로퍼티
  • 요소노드, 텍스트노드 상관없이 모든 노드에 적용 가능

    💡 태그와 태그사이의 줄바꿈, 주석, 들여쓰기 등 모두 노드로 취급하므로 모든 노드 이동 프로퍼티를 사용시 문제가 발생할 수 있다. 주의해서 사용해야 한다.

✨ 요소노드의 프로퍼티

  1. element.inner HTML

    -> 들여쓰기 포함하여 안에 태그들을 보여줌
const myTag = document.querySelector('#list-1');

// innerHTML
console.log(myTag.innerHTML);
myTag.innerHTML = '<li>Exotic</li>';
console.log(myTag.innerHTML);

💡 내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용해야 한다.
2. element.outer HTMl

-> 바깥 태그를 포함 모두 보여줌

const myTag = document.querySelector('#list-1');

// outerHTML
console.log(myTag.outerHTML);
myTag.outerHTML = '<ul id="new-list"><li>Exotic</li></ul>';

💡 새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의해야 한다.
3. element.textContent

-> 내부의 태그는 제외하고 텍스트 부분만 보여줌

const myTag = document.querySelector('#list-1');

// textContext
console.log(myTag.textContent);
myTag.textContent = '<li>new text!</li>';

💡 textContent는 말그대로 텍스트만 다루기 때문에, 특수문자도 그냥 텍스트로 처리한다.

✨ 요소 노드 다루기

  • 요소 노드 만들기
    : document.createElement('태그이름')
  • 요소 노드 꾸미기
    : element.textContent, element.innerHTML, ...
  • 요소 노드 추가 혹은 이동하기
    : element.prepend, element.append, element.after, element.before
  • 요소 노드 삭제하기
    : element.remove()

✨ HTML 속성 다루기

  • 속성에 접근하기
    : element.getAttribute('속성')
  • 속성 추가(수정)하기
    : element.setAttribute('속성', '값')
  • 속성 제거하기
    : element.removeAttribute('속성')

✨ 스타일 다루기

  • style 프로퍼티 활용하기
    : element.style.styleName = 'value';
main.style.boxSizing = 'borderBox';
  • class 변경을 통해 간접적으로 스타일 적용하기
    : element.className, element.classList

🎉 classList의 유용한 메소드

item.className = 'done';
item.classList.add('done');

✨ 비표준 속성 다루기

  1. 선택자로 활용
const fields = document.querySelectorAll('[field]');
console.log(fields);
  1. 값을 표시할 태드를 구분할 때 활용
const fields = document.querySelectorAll('[field]');
const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};

for (let tag of fields) {
  const field = tag.getAttribute('field');
  tag.textContent = task[field];
}
  1. 스타일이나 데이터 변경에 활용
const fields = document.querySelectorAll('[field]');
const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};

for (let tag of fields) {
  const field = tag.getAttribute('field');
  tag.textContent = task[field];
}

const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
  const status = btn.getAttribute('status');
  btn.onclick = function () {
    fields[2].textContent = status;
    fields[2].setAttribute('status', status);
  };
}

dataset 프로퍼티(안전한 방법)

  • data-로 시작하는 속성은 모두 dataset이라는 프로퍼티에 저장

    data-status라는 속성이 있다면, element.dataset.status라는 프로퍼티에 접근해서 그 값을 가져올 수 있다.

const fields = document.querySelectorAll('[data-field]');
const task = {
  title: '코드 에디터 개발',
  manager: 'CastleRing, Raccoon Lee',
  status: '',
};

for (let tag of fields) {
  const field = tag.dataset.field;
  tag.textContent = task[field];
}

const btns = document.querySelectorAll('.btn');
for (let btn of btns) {
  const status = btn.dataset.status;
  btn.onclick = function () {
    fields[2].textContent = status;
    fields[2].dataset.status = status;
  };
}
  • 비표준 속성을 활용해야 한다면 data-*형태와 dataset프로퍼티를 사용하는 것이 조금 더 안전하다
profile
강윤채
이전 포스트

[코드잇] 모던 자바스크립트(1)

0개의 댓글