.png)
[JavaScript] DOM 요소 조작
className
• 클래스 속성값 전체를 가져오거나 수정할 수 있다.
elems.forEach(elem => {
if (elem.className === 'red') {
elem.className = 'blue';
}
});classList
- 개별적으로 클래스를 조작할 수 있다.
- 다양한 메소드를 제공한다.
add()
- 클래스 속성을 추가한다.
remove()
- 클래스 속성을 제거한다
toggle()
- 클래스 속성이 존재할 경우 제거하고, 그렇지 않으면 추가한다.
contains()
- 클래스 속성의 존재 여부에 따라 boolean 값을 반환한다.
replace()
- 클래스 속성을 새로운 클래스 속성으로 교체한다.
elems.forEach(elem => {
if (elem.classList.contains('blue')) {
elem.classList.replace('blue', 'red');
}
});id
- id 속성을 가져오거나 수정할 수 있다.
getAttribute()
- id 속성의 값을 문자열로 가져온다.
removeAttribute()
- id 속성을 제거한다
hasAttribute()
- id 속성의 존재 여부에 따라 boolean 값을 반환한다.
setAttribute()
- id 속성과 값을 설정한다.
<!DOCTYPE html>
<html>
<body>
<input type="text">
<script>
const input = document.querySelector('input[type=text]');
if (!input.hasAttribute('value')) {
input.setAttribute('value', 'hello!');
}
console.log(input.getAttribute('value')); // hello!
input.removeAttribute('value');
console.log(input.hasAttribute('value')); // false
</script>
</body>
</html>HTML 콘텐츠 조작
textContent
- 요소의 텍스트 콘텐츠를 가져오거나 수정할 수 있다
- 순수한 텍스트만 지정해야 하며 마크업을 포함시키면 문자열로 인식되어 그대로 출력된다.
<div id="divA">This is <span>some</span> text!</div>
document.getElementById('divA').textContent;
// This is some text!
document.getElementById('divA').textContent = '<h1>different!</h1>';
// <h1>different!</h1>innerHTML
- 해당 요소의 모든 자식 요소를 포함하는 콘텐츠를 하나의 문자열로 가져올 수 있다.
- 마크업을 인식한다.
const ul = document.querySelector('ul');
console.log(ul.innerHTML);
/*
<li id="one" class="red">Seoul</li>
<li id="two" class="red">London</li>
<li id="three" class="red">Newyork</li>
<li id="four">Tokyo</li>
*/요소 생성 및 삭제
createElement()
- 태그 이름을 인자로 전달하여 요소를 생성한다.
const newElem = document.createElement('li');createTextNode()
- 텍스트를 인자로 전달하여 텍스트 노드를 생성한다.
const newText = document.createTextNode('Beijing');appendChild()
- 인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가한다.
// newText를 newElem 자식으로 DOM 트리에 추가한다.
newElem.appendChild(newText);
const container = document.querySelector('ul');
// newElem을 container의 마지막 자식으로 DOM 트리에 추가된다.
container.appendChild(newElem);removeChild()
- 인자로 전달한 노드를 DOM 트리에서 제거한다.
const removeElem = document.getElementById('one');
// container의 자식인 removeElem를 DOM 트리에 제거한다.
container.removeChild(removeElem);Style
- 특정 요소에 inline 스타일을 지정할 수 있다.
const four = document.getElementById('four');
// inline 스타일 선언을 생성한다.
four.style.color = 'blue';
// font-size와 같이 '-'으로 구분되는 프로퍼티는 카멜케이스로 변환하여 사용한다.
four.style.fontSize = '2em';P.S.
선택한 DOM 요소를 가지고 어떻게 내가 원하는 대로 내용을 조작할 수 있을지 그 방법을 알게 되었다😀
