주요 내용
컴퓨터 프로그래밍
요약: DOM 수정 기술
기존 요소 수정하기
기존 요소를 수정할 수 있는 다양한 방법을 살펴보았습니다:
속성(attribute) 수정하기
동일한 이름을 갖는 프로퍼티를 설정함으로써 요소에 속성을 설정할 수 있습니다. 예를 들어, 다음과 같이
<img>의 src를 변경할 수 있습니다.imgEl.src = "http://www.dogs.com/dog.gif";추가적으로 다음과 같이
setAttribute 메소드를 사용할 수도 있습니다.imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");버튼에서
disabled 속성을 삭제해 enable로 바꾸는 경우처럼, 속성을 삭제하고자 한다면 removeAttribute를 이용해야 합니다.imgEl.removeAttribute("disabled");스타일 수정하기
속성을 변경하는 것처럼 요소의
style 프로퍼티에 접근하여 원하는 프로퍼티로 설정함으로써 스타일을 변경할 수 있습니다. 예를 들어 다음과 같이 색깔을 변경할 수 있습니다:headingEl.style.color = "hotpink";붙임표(-)는 유효한 JS 프로퍼티 이름이 아니므로 여러 단어로 구성된 CSS 프로퍼티 이름을 표시할 땐 "camelCase"를 사용해야 합니다.
headingEl.style.backgroundColor = "salmon";클래스 이름 수정하기
className 프로퍼티를 설정하면 요소에 클래스를 추가할 수 있습니다.mainEl.className = "warning";위와 같이 하면 기존 클래스를 오버라이드하게 되므로 클래스 목록에 추가하고자 한다면 다음처럼 해야 합니다:
mainEl.className += " warning";mainEl.classList.add("warning");내부 HTML / 텍스트 수정하기
요소의 내용을 임의의 문자열로 구성된 HTML로 바꾸려면
innerHTML을 이용합니다.mainEl.innerHTML = "cats are the <strong>cutest</strong>";HTML 태그를 전달할 필요가 없으면 대신에
textContent를 사용해야 합니다.mainEl.textContent = "cats are the cutest";일반적으로 이러한 두 개의 프로퍼티 중 하나를 사용할 때 조심해야 합니다. 이러한 프로퍼티들은 이벤트 리스너를 제거할 수도 있기 때문입니다. (이 부분은 다음 수업에서 배우도록 하겠습니다.)
요소 새로 생성하기
완전히 새로운 요소를 생성하고 이러한 요소들을 페이지에 추가하는 데 사용할 수 있는 함수들의 집합이 존재합니다.
새로운 요소를 생성하기 위해
createElement를 사용합니다.var imgEl = document.createElement("img");페이지에 요소를 첨부하려면 해당 부모 요소에 대해
appendChild를 호출합니다.document.body.appendChild(imgEl);