Element

<식별자 API>

: 엘리먼트를 조회하기 위한 식별자 (이름, id, class)를 가져오고 변경하는 역할

☞ Element.tagName , 읽기전용

 

☞ Element.id : 단 하나만 등장할 수 있는 식별자

 

☞ Element.className : 클래스는 여러대의 엘리먼트를 그룹핑할때 사용

: 위와같이 class명이 추가 된걸 확인할 수 있다

 

☞ Element.classList : className보다 더 편리

: 없으면 만들어주고 있으면 없애고 == toggle

: classList.add();

: classList.remove();

: classList.toggle();

 

 

<제어 대상을 찾기>

: 문서 내에서 객체를 찾는 방법 => document 객체의 메서드 이용

 

☞ document.getElementsByTagName

: element == tag

: 인자로 전달된 태그명에 해당하는 객체들을 찾아 NodeList라는 유사 배열에 담아 반환

 

☞ document.getElementsByClassName

: class 속성의 값을 기준으로 객체 조회

* 문서 전체 내용 중 active라는 이름을 갖는 클래스들이 조회된다

+ 특정 엘리먼트에 대해 그 엘리먼트 객체.getElementsByClassName() 하게 되면

  => 그 특정 엘리먼트 하위 엘리먼트만 조회된다

 

☞ document.getElementById

: id값을 기준으로 객체 조회

: 결과는 하나만 갖는다

 

☞ document.querySelector

: css 선택자의 문법을 이용해 객체 조회

: 조건에 해당되는것 태그 하나만 선택된다

 

☞ document.querySelectorAll

 

<HTMLElement>

=> 각각 기능이 다르다

=> 모두 HTMLElement를 상속받고 있다

 

<HTMLCollection>

: 리턴 결과가 복수인 경우에 사용하게 되는 객체

: 유사배열, 배열과 비슷한 사용법

: 변경이 있으면 그 순간에 바로 반영된다