[자바스크립트 23] DOM 조작 2(추가, 수정, 삭제)

이번에는 선택한 DOM 을 수정하고 추가하고 삭제하는 방법에 대해 물어보았다

1. 요소의 내용 변경: innerHTML 또는 textContent 속성을 사용하여 요소의 내용을 변경할 수 있습니다.

let element = document.getElementById('myId');
element.innerHTML = '새로운 내용';

혹은

let element = document.getElementById('myId');
element.textContent = '새로운 내용';

 

2. 요소의 속성 변경: setAttribute() 메서드를 사용하여 요소의 속성을 변경할 수 있습니다.

let element = document.getElementById('myId');
element.setAttribute('바꿀속성명', '바꿀속성값');

 

3. 클래스 추가/삭제: classList 객체의 add(), remove(), toggle() 메서드를 사용하여 요소의 클래스를 추가, 삭제 또는 토글할 수 있습니다.

let element = document.getElementById('myId');
element.classList.add('myClass'); // 클래스 추가
element.classList.remove('myClass'); // 클래스 제거
element.classList.toggle('myClass'); // 클래스 토글

 

4. 요소의 스타일 변경: style 속성을 사용하여 요소의 CSS 스타일을 변경할 수 있습니다.

let element = document.getElementById('myId');
element.style.color = 'blue';

 

5. 자식 요소 추가/제거: appendChild(), insertBefore(), removeChild() 등의 메서드를 사용하여 요소의 자식을 추가하거나 제거할 수 있습니다.

let parent = document.getElementById('parentId');
let child = document.getElementById('childId');

parent.appendChild(child); // 자식 추가
parent.removeChild(child); // 자식 제거

 

이와 같은 방법들을 통해 DOM 요소를 직접 수정할 수 있습니다. DOM 요소를 수정할 때는 페이지의 레이아웃이 재계산되거나 요소가 다시 그려질 수 있으므로 성능에 영향을 줄 수 있습니다. 따라서 가능한 한 효율적인 방법을 사용하는 것이 좋습니다.

 

 

// 추가로 insertAdjacentHTML 과 insertAdjacentElement 도 물어보았다.

 

6. insertAdjacentHTML(): 이 메서드는 요소의 특정 위치에 HTML 문자열을 삽입합니다. HTML 문자열은 지정된 위치에 즉시 파싱되어 DOM에 삽입됩니다.

let element = document.querySelector('.찾을클래스명');
let 넣을거 = '<h2>야! 임마!</h2>'
element.insertAdjacentHTML('beforeend', 넣을거);
// 'beforeend' 자리는 4가지 옵션이 있다..

여기서 position은 다음 중 하나일 수 있습니다:

• 'beforebegin': element 자체의 앞에.
• 'afterbegin': element 안의 첫 번째 자식 앞에.
• 'beforeend': element 안의 마지막 자식 뒤에.
• 'afterend': element 자체의 뒤에.

let element = document.getElementById('myId');
element.insertAdjacentHTML('afterend', '<div>새로운 div</div>');

 

7. insertAdjacentElement(): 이 메서드는 요소의 특정 위치에 다른 요소를 삽입합니다.

element.insertAdjacentElement(위치, 요소);

 

위치는 insertAdjacentHTML() 메서드와 동일한 값을 가질 수 있고, 요소는 삽입할 요소입니다.

let element = document.getElementById('myId');
let newElement = document.createElement('div');
newElement.textContent = '새로운 div';
element.insertAdjacentElement('afterend', newElement);

 

// insertAdjacentHTML()은 보면 알겠지만 HTML을 넣는다.. 걍 '<div><h2>얌마</h2></div>' 같은 걸 때려 넣는다 보통

// 반면 insertAdjacentElement() 은 어쩌구저쩌구 요소를 막 만들고 변수에 담은걸 이제 보통 넣을 때 쓴다..

 

// 주의 innerHTML 은 내용을 싹다 갈아치워주는 것임..

// 추가하고 그럴려면 appendChild 나 insertAdjacent어쩌구 그런 다른거 써야함