주요 내용

요약: DOM 수정 기술

기존 요소 수정하기

기존 요소를 수정할 수 있는 다양한 방법을 살펴보았습니다:

동일한 이름을 갖는 프로퍼티를 설정함으로써 요소에 속성을 설정할 수 있습니다. 예를 들어, 다음과 같이 <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";

요즘 브라우저에서는 classList 기능을 사용할 수 있습니다:

mainEl.classList.add("warning");

요소의 내용을 임의의 문자열로 구성된 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);

비슷하게, insertBefore, replaceChild, removeChild, insertAdjacentHTML.들도 사용할 수 있습니다.

정렬 기준:

포스트가 아직 없습니다.