JS-11 (22/11/11)

[목차]
1-1. classList
1-2. className
2. getAttribute

1-1. classList

class "a b c"
"a b c".split(" ") > 리턴값은 배열 => ["a", "b", "c"] => classList

classList의 리턴값은 배열

["a", "b", "c"] 중 a를 빼려면
["a", "b", "c"], a => 0 (없으면 -1)
["a"], "b", "c"].splice(0,1) => ["b", "c"]

    imgs[0].classList.remove('on')
    imgs[1].classList.add('on') // = .push("on")

classList의 add와 remove의 로직은 push, splice와 동일하다.
그래서 classList는 className보다 요소를 추가, 삭제하기에 용이하다.

1-2. className

className은 기존의 클래스명을 완전히 덮어쓰는 효과가 있다.

html의 특정 요소에 class="on"일 때만 애니메이션 효과를 부여하려고 할 때
className을 사용하면 add와 remove를 동시에 신경쓸 필요가 없다는 장점이 있다.

    imgs[0].className = ''
    imgs[1].className = 'on'

2. getAttribute

Element.getAttribute()

getAttribute는 선택한 엘리먼트의 특정 속성값을 가져온다.

[html]
<input type="text">

[js]
input.getAttribute("type")  // "text"

위와 같이 <input>의 type 속성의 값인 text를 반환...

아래는 사용 예제

function findIndex(){
    for (let i=0; i<imgs.length; i++){
    if(imgs[i].getAttribute("class") === "on") return i
    }
    return -1
}