<자바스크립트 기초> 11. DOM 스크립트 (2)

 우리는 저번 장에서 변수에 HTML의 태그를 불러오는 방법에 대해 배웠다. 이제 불러온 태그를 그 변수를 이용하여 다뤄보자.

 

* 속성 다루기

var link = document.querySelector('.list a');
console.log(link.getAttribute('href'));
link.setAttribute('href', 'google.com');
console.log(link.getAttribute('href'));

 : 먼저 link라는 변수에 list라는 클래스의 a 태그를 삽입하였다. 

  이 때 변수.getAttribute('속성명') 으로 그 속성의 값을 불러올 수 있다.

 

 : setAttribute('속성명', '변경 값') 을 이용하면 속성의 값을 다른 값으로 변경시킬 수 있다. 이렇게 한 후 속성값을 출력시켜보면 변경된 것이 확인된다.

 

 

* 클래스 다루기

var link = document.querySelector('.list a');
link.className = 'special'
link.classList.add('special');
link.classList.remove('link-naver');
console.log(link.classList.contains('special'));

 - 클래스 명 변경 : 변수명.className = '~' 을 이용하여 원래 가지고 있던 클래스를 다른 이름으로 변경시킬 수 있다. 

 

 - 클래스 명 추가 : 변수명.classList.add('~~') 을 이용하면 원래 가지고 있던 클래스에 더불어 새로운 클래스명을 추가할 수 있다.

 

 - 클래스 명 제거 : 변수명.classList.remove('~~') 을 이용하여 원래 있던 변수를 제거시킬 수 있다.

 

 - 클래스 추가 or 제거 : 변수명.classList.toggle('~~')을 이용하면 해당 클래스가 있으면 제거하고 없으면 추가한다.

 

 - 클래스 명 확인 : .contains 메서드를 이용하여 특정 클래스가 있는지 불린 값을 출력시킬 수도 있다.

 

 참고로 추가와 제거 등에서 여러개는 쉼표로 구분한다.

 

* 태그 만들기

 이번에는 스크립트를 이용하여 태그를 통째로 만들어 보자.

var listElem = document.createElement('li');
listElem.innerHTML = '<span>Harry</span>';

 - 태그 생성

  : 먼저 변수를 설정하고 document.createElement를 이용하여 생성하고 싶은 태그를 입력한다.

  그 후 그 변수에 innerHTML 속성의 값으로 원하는 HTML구문을 입력하여 만들어 준다.

 

  위와 같이 만들고 listElem을 출력시키면 <li><span>Harry</span></li> 가 출력된다.

 

 - 태그 삽입

  : 태그를 무사히 만들었다면 이제 원하는 곳에 삽입해야한다. 이를 위해 부모태그를 이용하자.

var listparent = document.querySelector('.list-parent')
var listElem = document.createElement('li');
listElem.innerHTML = '<span>Harry</span>';
listparent.appendChild(listElem);

  먼저 부모태그도 변수에 넣어주었다. 참고로 클래스를 이용했으나 li를 넣을 부모이므로 ul또는 ol이다.

 

  부모태그를 변수에 넣었으면 그 변수의 appendChild() 안에 아까 만들었던 listElem 변수를 넣어주면 완성이다.

 

  이렇게하고 웹을 실행시키면 HTML문서에서 리스트에 Harry를 출력시키는 것을 볼 수 있다.

 

 

---

 

 

참고

 

 

이 글은 1분코딩의 자바스크립트 기본 강의와 인터랙티브 웹 강의를 수강하고 개인적으로 정리하며 작성한 글입니다.

 

 

 

 

유튜브 1분코딩

1분코딩

 

인프런

인터랙티브 웹 개발 제대로 시작하기 - 인프런