[javascript] 응용 기록 2

DOM SCRIPT(Document Object Model)

html 요소를 하나의 객체로 바라보는 것

 

객체 선택하기

document.querySelecotr('.ilbuni');

여러 개가 있는 거라도 맨 앞의 1개만 가져온다.

전부 다 가져오고 싶을 땐 querySelectorAll()를 사용하면 된다.

-> Nodelist라는 배열의 형태로 출력이 되기 때문에 특정 요소에 접근하고 싶다면 [인덱스] 형태로 접근하면 된다.

괄호 ( ) 안에 css 선택자도 사용할 수 있다.

 

data-

data-의 형식으로 시작하면 어떤 속성이든 필요에 따라 임의로 추가할 수 있다.

 

setAttribute

변수명.setAttribute( '속성명', 값);

-> 해당 변수에 속성: 값이 세팅이 된다.

 

getAttribute

변수명.setAttribute( '속성명');

-> 내가 가져오고자 하는 속성의 값을 알 수 있다.

 

data-

자동으로 생성되는 객체가 존재한다. -> dataset

char.dataset // DOMStringMap { id : '123' } 출력

 

setAttribute, getAttribute처럼 요소 객체의 속성을 설정할 수 있지만,

data- 형태의 속성 같은 경우에는 dataset 객체를 활용해서 속성을 설정하거나 값을 가져올 수 있다.

char.dataset.id = 777;

char.dataset.title = '안녕!';

console.log(char.dataset.title); // 안녕!

 

element 조립하기

1) 새로 만들기

documene.createElement( ' 넣을 태그 ' );

pElem.innerHTML = 'html 태그 / 문자열';

 

2) 요소 추가 & 삭제

appendChild( ) : 막내 자식으로 넣기

removeChild( ) : 자식 지우기

 

3) 클래스 추가하기

classList.add( '클래스 이름' ); // 기존꺼는 보존하면서 추가

className = ' 클래스 이름'; // 클래스를 아예 변경해버린다.

classList.remove( '클래스 이름' ); 

classList.toggle( '클래스 이름' ); // 클래스를 토글로 작동