기본적으로 DOM의 각 Element 객체는 해당 엘리먼트와 상호 작용하는 데 사용할 수 있는 속성 및 메서드를 가지고 있죠.
다음은 Element 객체를 조작하는 가장 흔하고 실용적인 방법들입니다:
- 엘리먼트의 내용 변경하기
- 클래스 어트리뷰트 조작하기
- 자바스크립트를 사용한 CSS 스타일 설정하기
- 엘리먼트 생성, 추가, 제거하기
- 특정 위치에 엘리먼트 삽입하기
- 엘리먼트 어트리뷰트 조작하기
- 데이터 어트리뷰트 조작하기
DOM을 조작하는 건 이론상 복잡해 보이지만, 이 글을 통해 보시겠지만, 많은 상황에서 자주 사용하게 될 몇 가지 방법이 있습니다.
이러한 방법들을 알게 되면, DOM 조작 능력을 한 단계 업그레이드하게 되겠죠. 시작해볼까요?
엘리먼트 내용 변경
엘리먼트의 값을 또는 내용을 변경하려면 해당 엘리먼트의 innerText 속성을 설정하면 됩니다.
예를 들어 다음과 같은 단락 (P) 엘리먼트가 있다고 해봅시다:
<p class="myParagraph">This is a paragraph</p>
그 다음 해당 엘리먼트를 선택하고 innerText 값을 이렇게 변경합니다:
const p = document.querySelector('.myParagraph');
p.innerText = 'A new day is dawning';그러면 p 엘리먼트의 값이 아래와 같이 변경됩니다:
<p class="myParagraph">A new day is dawning</p>그리고 이렇게 엘리먼트의 값을 변경하는 방법입니다.
클래스 속성 조작
클래스 리스트 객체의 add() 메서드를 사용하여 엘리먼트에 새로운 클래스 속성을 추가할 수 있습니다:
Element.classList.add('myClass');remove() 메서드를 사용하여 클래스를 제거할 수 있습니다:
Element.classList.remove('myClass');클래스 리스트 객체는 엘리먼트의 클래스 속성을 조작하기 위해서 사용할 수 있는 컬렉션 객체입니다.
classList 속성은 읽기 전용 속성이므로 직접 편집할 수는 없지만, 메서드를 사용하여 엘리먼트 클래스를 변경할 수 있습니다.
기존 클래스를 새 클래스로 교체하려면 replace() 메서드를 사용하십시오:
Element.classList.replace('oldClass', 'newClass');특정 클래스가 있으면 추가하고, 없으면 제거하는 스위치 역할을 하는 toggle() 메서드도 있습니다:
Element.classList.toggle('myClass');엘리먼트에 특정 클래스가 포함되어 있는지 확인하려면 contains() 메서드를 사용하고 문자열로 확인하고자 하는 클래스를 전달하면 됩니다:
Element.classList.contains('myClass');해당 클래스가 지정되어 있으면 메서드가 true를 반환하고, 그렇지 않으면 false를 반환합니다.
자바스크립트를 사용한 CSS 스타일 설정
엘리먼트에 클래스를 설정하고 제거하는 방법에 대해 배웠으니, 엘리먼트에 스타일을 변경하기 위해 스타일 규칙을 추가하거나 제거하는 클래스를 추가할 수 있습니다.
.color-primary {
color: #007bff;
}
.color-secondary {
color: #6c757d;
}
.bold {
font-weight: 700;
}단락 엘리먼트가 다음과 같다고 가정해봅시다:
<p class="myParagraph">A new day is dawning</p>클래스를 사용하여 스타일을 변경하는 방법은 다음과 같습니다:
const p = document.querySelector('.myParagraph');
// add a class to the element
p.classList.add('color-primary');
// replace a class
p.classList.replace('color-primary', 'color-secondary');
// remove a class
p.classList.remove('color-secondary');때로는 선택한 DOM 엘리먼트에 직접 CSS를 적용해야 할 수도 있습니다.
Element 객체는 엘리먼트의 인라인 스타일을 제어하는 style 속성을 제공합니다.
예를 들어, Element.style.fontWeight 속성을 사용하여 엘리먼트의 글꼴 무게를 다음과 같이 변경할 수 있습니다:
const p = document.querySelector('.myParagraph');
p.style.fontWeight = '700'; // set font weight
p.style.textTransform = 'uppercase'; // set to uppercase
p.style.color = '#007bff'; // set color요소의 테두리 스타일을 다음과 같이 변경할 수 있습니다:
p.style.border = '1px solid black';style 속성은 하이픈 카멜표기법 대신 카멜표기법을 사용하므로 font-weight는 fontWeight, text-transform은 textTransform이 됩니다.
그리고 이제 자바스크립트를 사용하여 CSS 스타일을 설정하는 방법을 알게 됐습니다. 엘리먼트 스타일을 변경할 때는 클래스를 추가하고 제거하는 것이 더 유지 관리하기 쉽고 일반적인 접근법을 따르기 때문에 이 방법을 추천합니다.
동일한 스타일을 다른 곳에서 사용하지 않을 경우에만 style 속성에 직접 접근하세요.
엘리먼트 생성, 추가, 제거
HTML 파일로 DOM 트리를 생성하는 것 외에도, JavaScript를 사용하여 프로그래밍 방식으로 DOM 엘리먼트를 생성할 수 있습니다.
이것은 document 객체가 createElement() 메서드를 가지고 있기 때문에 가능하며, 이 메서드를 사용하면 HTML 파일에 작성하는 태그와 본질적으로 동일한 어떤 Element 객체도 생성할 수 있습니다.
예를 들어, 단락 엘리먼트를 다음과 같이 생성할 수 있습니다:
const p = document.createElement('p');그 엘리먼트를 생성한 후에 innerText 속성을 사용하여 내용을 추가할 수 있습니다:
p.innerText = 'This paragraph is created using JavaScript';이제 그것이 화면에 나타나려면 기존 DOM 트리에 추가해야 합니다. 엘리먼트를 기존 트리 구조 안 어디에든 붙일 수 있습니다.
body 태그에 단락을 추가하려면 querySelector() 메서드를 사용해서 body를 선택하고, append() 메서드를 호출하면 됩니다:
const p = document.createElement('p');
p.innerText = 'This paragraph is created using JavaScript';
const body = document.querySelector('body');
body.append(p);이렇게 단락은 body 태그의 자식으로 다음과 같이 추가됩니다:
<body>
<p>This paragraph is created using JavaScript</p>
</body>엘리먼트를 제거하려면, 제거하고자 하는 엘리먼트에서 remove() 메서드를 호출하면 됩니다.
이 코드는 단락 엘리먼트를 제거합니다:
p.remove();특정 위치에 엘리먼트 삽입
앞서 살펴본 append() 메서드는 새 엘리먼트를 부모 엘리먼트의 마지막 자식으로 삽입합니다.
특정 위치에 엘리먼트를 삽입하고 싶다면 insertBefore() 메서드를 사용하면 됩니다.
쉬운 예를 들어보겠습니다. 다음과 같은 HTML 내용이 있다고 가정해봅시다:
<body>
<p id="first">The first paragraph</p>
</body>첫 번째 단락 전에 엘리먼트를 삽입하려면 부모 엘리먼트(여기서는 body 태그)에서 insertBefore() 메서드를 호출하고 두 개의 인수를 전달해야 합니다:
1. 추가하고자 하는 새 엘리먼트
2. 새 엘리먼트가 삽입될 형제 엘리먼트
다음은 두 번째 단락을 생성하고 첫 번째 단락 앞에 삽입하는 예입니다:
let p2 = document.createElement('p');
p2.innerText = 'The second paragraph';
let body = document.querySelector('body');
let p1 = document.querySelector('#first');
body.insertBefore(p2, p1);위 스크립트를 실행하면, 두 번째 단락이 첫 번째 단락 앞에 삽입됩니다:
<body>
<p>The second paragraph</p>
<p id="first">The first paragraph</p>
</body>DOM은 insertAfter 메서드를 제공하지 않는데, 필요하지 않기 때문입니다.
마지막 위치에 엘리먼트를 삽입하려면 append() 메서드를 사용하고, 위치를 제어하고 싶을 때는 insertBefore() 메서드를 사용하세요.
엘리먼트 속성 조작
classList 객체는 엘리먼트의 클래스만 변경하는 방법을 제공합니다. id, href, src와 같은 다른 속성을 변경하려면 setAttribute() 메서드를 사용할 수 있습니다.
setAttribute() 메서드는 두 개의 인수를 받습니다:
1. 설정할 속성의 이름
2. 설정할 속성의 값
예를 들어, img 태그의 src 속성을 설정하는 방법은 다음과 같습니다:
<img id="profile-pic" src="feature-image.png" />querySelector()를 사용하여 img 엘리먼트를 선택하고, 엘리먼트에서 setAttribute() 메서드를 호출하면 됩니다:
const img = document.querySelector('#profile-pic');
img.setAttribute('src', 'new-image.jpg');src 속성 값은 다음과 같이 변경됩니다:
<img id="profile-pic" src="new-image.jpg" />특정 속성의 값을 가져오려면 getAttribute() 메서드를 사용할 수 있습니다.
메서드에 확인하려는 속성을 인수로 전달합니다. 속성이 설정되어 있으면 메서드는 해당 속성의 값을 문자열로 반환합니다. 아니라면 null을 반환합니다:
img.getAttribute('src'); // new-image.jpg
img.getAttribute('href'); // nullsetAttribute() 및 getAttribute() 메서드는 모든 HTML 속성과 상호 작용하는 데 사용할 수 있습니다.
속성을 삭제하려면 removeAttribute() 메서드를 사용하세요:
const img = document.querySelector('#profile-pic');
// Delete the src attribute
img.removeAttribute('src');데이터 속성 조작
데이터 속성은 HTML 엘리먼트에 추가 정보를 저장하는 데 사용되며, 데이터를 어떻게 사용할지는 여러분에게 달려 있습니다.
다음과 같은 HTML 태그가 있다고 가정해 봅시다:
<div id="intro" data-attribute-theme="light" data-session="2022">
Hello World!
</div>위 엘리먼트의 데이터 속성에 접근하려면 다음과 같이 dataset 속성을 사용합니다:
// Select the div
let myDiv = document.querySelector('#intro');
// Access the dataset property
console.log(myDiv.dataset.session) // 2022
// Use camelCase when your data attribute is more than one word
console.log(myDiv.dataset.attributeTheme) // light속성 값이 바뀌면 새 값으로 올바른 dataset 속성을 직접 재할당할 수 있습니다:
// Select the div
let myDiv = document.querySelector('#intro');
// Change the value of a data attribute
myDiv.dataset.session = '2023'데이터 속성을 삭제하려면 removeAttribute() 메서드를 사용하여 일반적인 속성을 삭제하는 것과 마찬가지로 작업을 수행합니다:
let myDiv = document.querySelector('#intro');
// Remove data-session attribute
myDiv.removeAttribute('data-session');
// Remove data-attribute-theme attribute
myDiv.removeAttribute('data-attribute-theme');이렇게 자바스크립트를 사용하여 데이터 속성을 조작하는 방법입니다.
결론
이것으로 자바스크립트가 현대 웹 애플리케이션을 구축하는 데 필수적임을 보여주는 DOM 엘리먼트 조작에 대해 모두 알아보았습니다. 웹사이트에 이미 존재하는 콘텐츠와 상호 작용하고 변경할 수 있어야 합니다.
이를 통해 여러분이 만든 웹사이트에 다양한 동적 변경을 가능하게 합니다.