DOM Elements 조작하기

Jason Moon·2022년 7월 10일
0
post-thumbnail

Element에 Class 추가하기

let links = document.querySelectorAll('.storylink')
for(link of links){
	link.classList.add('world');
}

classList.add()메소드를 이용해 추가할 수 있다.

Element에 Class 삭제하기

classList.remove()로 삭제할 수 있다.

없으면 넣고 있으면 빼고싶다고 하면 toggle을 이용할 수도 있다.
classList.toggle()

Element 추가하기

createElement()이용
만든 Element에 원하는 속성 값을 주려면 setAttribute('속성이름','속성 값') 사용

let velog = document.createElement('a')
velog.setAttribute('href', 'https://velog.io')

기존 element자식요소 추가하기

appendChild()를 이용하기(마지막 자식요소로 추가)
앞에 삽입하려면 prepend사용

element에 스타일 추가하기

velog.style.width = '200px';
velog.style.height = '200px';

텍스트 추가하기

velog.textContent = '벨로그';

element 지우기

velog.remove();

📘 참고

ClassList MDN
Element조작하기

profile
어려워 보여도 시간을 들여서 해보면 누구나 할 수 있는 일이다

0개의 댓글

관련 채용 정보