210812 TIL

TIL DAY 16

오늘 배운 일

✔️ 코드잇에서 JavaScript 중급

• 요소 노드 다루기

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

prepend - 자녀 태그 맨앞에 추가
append - 자녀 태그 맨뒤에 추가
before - 태그 전에 추가 (영역 밖에 생성)
before - 태그 후에 추가 (영역 밖에 생성)

예)

결과값 :

• 필요한 태그를 생성시켜서, textContent를 이용해 내용을 추가하고, 노드를 이동하기 위해 prepend를 사용한다.

• HTML 속성 다루기

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

  예)

• element.getAttribute('href') => 해당 링크값을 불러온다.
• element.setAttribute('class', 'fun') => 기존에 있던 class면 값을 변경하고, 없었으면 추가시킨다.
• element.removeAttribute('id') => 기존에 있던 id값을 삭제시킨다.

• 스타일 다루기

  1. element.style.styleName = 'value';

  2. element.className, element.classList

     element.style.color = 'red';
     element.style.backgroundColor = 'red'

  (카멜 표기법 적용)

  className = class값을 추가하거나 기존에 있던 class를 변경한다.
  classList는 class값을 추가, 변경, 삭제 아니면 온/오프를 할 수 있다.

  예)

  element.classList.add('hello') => class hello가 추가된다.
  element.classList.add('hello' , 'good') => class인 hello와 good이 추가된다.
  element.classList.remove('hello') => class hello가 삭제된다.
  element.classList.toggle('hello', true / false) => 토글은 추가 및 삭제를 할 수 있는데 방법은 class를 쓰고, true이면 추가, false이면 삭제한다.

느낀점

• 오늘은 생각보다 많은 정보를 배워나가는 시간이라, 다시 한번 공부할 생각이다.
• 아직도 모르는게 많아서 나 스스로 공부해야겠다.