JS - 간단한 DOM 사용과 Attribute

Dom 구조의 이해 간단 코드

window.addEventListener('DOMContentLoaded', () => {
    let title = document.getElementById('main-title');
    console.log(title);
});

위 코드로 인해 script js 파일 연결없이 html script문에 직접 입력하여
DOMContentLoaded < 이미지 파일 같은 삽입된 파일 load전 html document만 빠르게 읽고
아래 id를 받아와 load된다.

const title = document.getElementsByClassName('main-title');
const titleSpan = document.getElementsByTagName('span');
console.log(title);
console.log(titleSpan);

window.addEventListener 기능을 사용하지 않고 script js 파일 연결 후 사용하였다
하지만 이렇게 불러오는 방식은 잘 사용하지 않고 querySelector 라는 녀석을 주로 사용한다.

const title = document.querySelector('#main-title span');

이렇게 css에서 사용하는 #을 이용하여 가지고 올 수 있다
css 선택자처럼 span을 뒤에 붙혀도 가능하기에 querySelector라는 녀석의 기능은 막강하다

또한

만약 class="goodboy" 라는 이름으로 설정된 html 태그가 여러개 있다고 가정해보자
그러면 그 태그들을 한번에 다 가지고 오고 싶은데 querySelector는 지정한 한개 밖에 못가지고온다.

그럴땐 이렇게 사용하자

const test = document.querySelectorAll('.goodboy');

뒤에 All만 붙혀서 사용하게 되면 해당 된 이름의 태그들을 배열 형태로 다 가지고 올 수 있게 된다.
console.log를 찍게 되면 index 값과 length 값이 들어있는 상태로 가지고 오게 되는데
console.log(test[0]) 이런식으로 그중에 내가 원하는 값만 가지고 올 수도 있다.

getAttribute, setAttribute, removeAttribute

javascript를 이용하여 html의 속성 (class, id, href .. 등등) 값을 변경해주고 싶을때
(get,set,remove)Attribute를 이용하면 된다

아래의 코드를 확인하자.

//get
element.getAttribute('가지고오고싶은 속성값');

//set
element.setAttribute('set해줄 속성이름', '넣고싶은 데이터');

//remove
element.removeAttribute( '지우고싶은속성이름' );

//예
//goodboy라는 클래스 이름으로 태그 3개가 있음

const test = document.querySelectorAll('.goodboy');
console.log(test[1].getAttribute('class')); //goodboy 확인
test[1].setAttribute('class', 'yapboy');
console.log(test[1].getAttribute('class')); //yapboy 확인
test[1].removeAttribute('class');
console.log(test[1].getAttribute('class')); //null값 확인

위 처럼 get은 return값이 있기 때문에 그 속성이 담겨있는 값을 가지고 올 수 있고
set은 그 속성이 담겨있는 값을 바꿔주거나 새롭게 속성을 추가가 가능하다
remove는 말 그대로 삭제의 기능이다.