[JavaScript] 자바스크립트 기초- document, querySelector, Event, className, classList

html은 css, js를 가져옴 ⇨ 따라서 html로 js 변경 및 읽기 가능

 

document: html을 가져오는 객체 ⇨ javascript와 html을 연결해줌 ex) title, style, event ..

 

getElementById(id로 요소 1개 불러오기), getElementsByClassName(class로 요소 여러개 불러오기-array형식) 등의 getElement_보다는 querySelector을 활용하여 css의 selector식(css notation)으로 지정해 html 읽어오기

- querySelector ⇨ 여러개일 경우 첫번째 것만 가져옴

- querySelectorAll ⇨ 여러개를 다 가져옴 - array 형식

 

script태그로 javascript파일을 html에 연결해 놓았기 때문에 browser가 window, document에 연결될 수 있다.

따라서 color, content 등을 modify할 수 있음 하지만, javascript의 역할은 event에 반응하는 것, 즉 동적 이벤트를 추가하는 것이므로 color 등 style에 관련된 내용은 css에서 하는 것을 지향해야 함

 

- console.log() : 객체의 태그내용이 출력

- console.dir() : 객체의 속성이 출력됨

 

* Event 추가 방법

 

1. addEventListener(type, listener) https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

- type

    - dir 찍었을 때 on으로 시작하는 것들은 모두 event
    - click, dblclick, mouseover/mouseout, mouseenter/mouseleave, copy/paste, resize, offline/online, drag, play/pause등

- listener

    - 함수 또는 eventlistener 인터페이스를 구현할 객체
    - 함수를 넣는 경우 괄호를 포함하면 안됨! ⇨ javascript에서 실행하도록 해야한다. 예를 들어 click시 headClick이라는 함수를 실행하는 event를 추가하고 싶다면, addEventListener('click',headClick) (O) addEventListener('click',headClick()) (X)

 

2. Element.onevent = function

- title.addEventListener('click',headClick)은 title.onclick = headClick 과 동일한 말

- 하지만 1번 방법을 사용하는 것을 지향 -> removeEventListener() (https://developer.mozilla.org/ko/docs/Web/API/EventTarget/removeEventListener) 로 제거 가능하기 때문이다.

 

✔️ javascript 코드 개선하기

• 여러번 쓰이는 것은 상수/변수에 할당하기 ( 상수 const, 변수 let )
  
  • 특히 긴 raw string은 const로 지정해주기! -> 실수를 줄이고, 오류를 확인할 수 있기 때문이다. 만약 지정되지 않은 raw string이면 console창에 어느 부분에서 틀렸는지 나오지 않지만, const로 지정된 raw string에서 오류가 발생한다면 undefined됐다고 오류가 발생하기에 알아차리기 쉽다.
• javascript, http, css 각각의 용도를 캐치하여 용도에 맞게 사용하기 ⇨ css는 style, javascript는 상호작용 용도로

 

예시 ) h1 클릭 시 색상 바꾸기 

const h1 = document.querySelector('h1')

우선 querySelector로 h1태그 부분을 선택한 후 h1으로 할당해주었다.

 

function h1Clicked(){
    h1.style.color = 'pink';
}

h1.addEventListener('click',h1Clicked)

1. 단순히 h1.style.color = 'color'로 지정하여 addEventListener('click', func)으로 넘겨주기

- 문제점 : 1번 click한 후 해당 색상으로 변하고 끝나버린다. 원래 의도는 클릭하면 다시 변하고, 기존 색상으로 돌아오면 다시 할당된 색상으로 변하도록 하는 게 원래 목적이므로 어긋나게 된다.

 

function h1Clicked(){
    if (h1.style.color === 'pink'){
        h1.style.color = 'blue'
    } else{
        h1.style.color = 'pink'
    }
}

h1.addEventListener('click',h1Clicked)

2. if-else문으로 h1.style.color = 'color1'이면 color2로, else면 color1로 변하게 하기 

- 문제점: 색상을 javascript에서 지정해주고 있다는 점. css에서 처리하는 게 각각의 의도에 맞을 뿐더러, javascript의 색상이 과하게 길어지게 된다.

 

/* css에서 원랜 없던 active라는 클래스를 만든 후 color와 border-color 지정해줌 */
.active {
  color: palevioletred;
  border-color: deeppink;
  transition: border-color 1s ease-in-out;
}

function h1Clicked(){
    if (h1.className === 'active'){
        h1.className = ''
    } else {
        h1.className = 'active'
    }
}

h1.addEventListener('click',h1Clicked)

3. css에서 새로운 class를 만들어 색상을 부여하고, javascript에선 해당 태그의 className을 새로운 class인 경우(색상 부여된 경우) className = None으로 돌리고 else면 className에 새로운 class 부여

- 문제점: 만약 원래 class가 존재한다면? 😨 ⇨ initial class는 지워버리고 replace 되어버리는 문제점 발생

 

 

4. className이 아닌 classList를 사용하자!

- className : class 1개

- classList : 실제 리스트형식은 아니지만, 리스트 형식으로 생각하며 클래스목록에 접근한다.

ﾠ   https://developer.mozilla.org/ko/docs/Web/API/Element/classList

 

function h1Clicked(){
    if (h1.classList.contains('active')){
        h1.classList.remove('active')
    } else {
        h1.classList.add('active')
    }
}

h1.addEventListener('click',h1Clicked)

1) classList.contatins(className) : class 포함 여부 확인

- 포함됐다면? -> classList.remove(className)

- 포함 안됐다면? -> classList.add(className)

 

- 문제점 : 여전히 코드가 길다. 좀 더 숏코딩 가능?

 

✮✬✫✩✡︎

function h1Clicked(){
    h1.classList.toggle('active')
}

h1.addEventListener('click',h1Clicked)

2) classList.toggle(className) : class 포함 여부 확인. 포함 X시 추가/포함 O시 제거 

- 위에서 길었던 5줄 남짓한 코드를 1줄로 축약하여 완성할 수 있다!

 

 

위 코드들 결과물 >.<.. 결국 똑같은 말이긴 하지만 단계별로 차근차근 ~..