⭐innerHTML & textContent & innerText
✔ innerHTML
innerHTML 속성 은 DOM 요소의 HTML 콘텐츠를 읽거나 설정할 때 사용된다. 이를 통해 요소의 내부 HTML 마크업을 조작할 수 있다. 이 속성은 동적으로 웹 페이지의 내용을 변경할 수 있다.
읽기
var content = element.innerHTML;쓰기
element.innerHTML = '<p>새로운 내용</p>';✔ textContent
textContent 속성은 DOM 요소의 텍스트 콘텐츠를 읽거나 설정할 때 사용된다. 이 속성은 요소의 모든 텍스트 콘텐츠를 포함하며, HTML 마크업을 무시한다. 즉, HTML 태그를 포함하지 않고 순수한 텍스트만을 다룬다.
innerHTML과의 가장 큰 차이는 innerHTML과 달리 text값만 다루기 때문에 html태그 사용 불가능하다는 점이다.
textContent에 html태그를 넣으면 태그도 text값으로 인식하고 문자열로 그대로 표시한다.
읽기
var text = element.textContent;쓰기
element.textContent = '새로운 텍스트 내용';✔ innerText
innerText 속성은 DOM 요소의 텍스트 콘텐츠를 읽거나 설정할 때 사용된다. innerText는 요소의 텍스트 콘텐츠를 표시된 그대로 반환하며, CSS 스타일에 의해 숨겨진 텍스트는 포함하지 않는다. 또한, HTML 마크업을 무시하고 순수한 텍스트만을 다루는 textContent와 달리, innerText는 요소의 실제 렌더링된 텍스트를 반영한다.
innerText도 text값만 다루기 때문에 html태그 사용 불가능하다.
innerText에 html태그를 넣으면 태그도 text값으로 인식하고 문자열로 그대로 표시한다.
읽기
var text = element.innerText;쓰기
element.innerText = '새로운 텍스트 내용';✔ 활용
<div class="box">
<div><strong>Log:</strong></div>
<div class="log"></div>
</div>function log(msg) {
var logElem = document.querySelector(".log");
var time = new Date();
var timeStr = time.toLocaleTimeString();
logElem.innerHTML += timeStr + ": " + msg + "<br/>";
}
log("Logging mouse events inside this container...");⭐DOM을 통한 속성 변경
✔ getAttribute
getAttribute 메서드는 지정된 요소의 속성 값을 가져오는 데 사용된다. 이 메서드는 HTML 속성의 값을 문자열로 반환한다.
var attributeValue = element.getAttribute(attributeName);- attributeName: 가져올 속성의 이름을 문자열로 지정.
✔ setAttribute
setAttribute 메서드는 DOM 요소에 속성을 추가하거나 기존 속성의 값을 변경하는 데 사용된다. 이 메서드는 속성 이름과 값을 문자열로 지정하여 요소의 속성을 설정한다.
element.setAttribute(attributeName, attributeValue);- attributeName: 설정할 속성의 이름을 문자열로 지정.
- attributeValue: 설정할 속성의 값을 문자열로 지정.
✔ 활용
다음 예시에서는 id가 myElement인 요소의 href 속성을 설정한다.
<!DOCTYPE html>
<html>
<head>
<title>setAttribute Example</title>
</head>
<body>
<a id="myElement">Example Link</a>
<script>
var element = document.getElementById('myElement');
element.setAttribute('href', 'https://www.example.com');
</script>
</body>
</html>⭐DOM을 통한 스타일 변경
이전에 배운 querySelector 를 활용하여 스타일을 변경한다.
querySelector를 통해 요소를 선택하여 변수에 저장하고,
변수.style.속성 = "속성값" 를 사용하면 스타일을 변경할 수 있다.
var element = document.querySelector(selector);
element.style.속성 = "속성값";✔ 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelector 스타일 변경 예시</title>
<style>
.example {
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="example">Hello, world!</div>
<button id="changeStyleBtn">Change Style</button>
<script src="script.js"></script>
</body>
</html>// 버튼 클릭 시 스타일 변경
document.getElementById('changeStyleBtn').addEventListener('click', function() {
// querySelector를 사용하여 첫 번째 .example 클래스 요소 선택
var element = document.querySelector('.example');
// 스타일 변경
element.style.backgroundColor = 'coral';
element.style.color = 'white';
element.style.fontSize = '20px';
element.style.border = '2px solid black';
});
⭐ClassList를 통한 다수 요소 변경
classList는 DOM 요소의 클래스 속성을 조작할 수 있는 프로퍼티이다. 이를 통해 클래스의 추가, 제거, 토글, 확인 등의 작업을 효율적으로 수행할 수 있다. classList는 Element 인터페이스의 읽기 전용 속성으로, DOMTokenList 객체를 반환한다. 이 객체는 여러 유용한 메서드를 제공한다. 주요 메서드는 add, remove, toggle이 있다. 이 외에도 contains, replace, item 메서드가 있다.
✔ add
element.classList.add('class1', 'class2');✔ remove
element.classList.remove('class1', 'class2');✔ toggle
element.classList.toggle('class1'); //true면 false로, false면 true로
element.classList.toggle('class1', true); // 무조건 추가
element.classList.toggle('class1', false); // 무조건 제거✔ 활용
li 태그에 listyle 스타일을 토글.
const liEls = document.querySelectorAll("li")
for (let liEl of liEls) {
liEl.classList.toggle("liStyle")
}⭐ 계층 이동
✔ parentElement
parentElement는 DOM 트리에서 특정 요소의 부모 요소를 나타내는 읽기 전용 속성이다. 이 속성은 해당 요소의 부모 요소를 반환하며, 부모 요소가 없는 경우 null을 반환한다. 주로 DOM 요소 간의 관계를 탐색할 때 사용된다.
var parent = element.parentElement;✔ firstElementChild, lastElementChild
firstElementChild는 주어진 요소의 첫 번째 자식 요소를 반환하는 읽기 전용 속성이다. 자식 요소가 없는 경우 null을 반환한다.
var firstChildElement = element.firstElementChild;lastElementChild는 DOM 요소의 마지막 자식 요소를 나타내는 읽기 전용 속성이다. 이 속성은 특정 요소의 자식 요소 중 마지막 요소를 반환하며, 자식 요소가 없는 경우 null을 반환한다.
var lastChildElement = element.lastElementChild;✔ nextSibling
nextSibling 속성은 DOM 트리에서 특정 노드의 다음 형제 노드를 나타낸다. 이 속성은 다음 형제 노드를 반환하며, 다음 형제 노드가 없으면 null을 반환한다. 여기서 "형제 노드"는 같은 부모를 공유하는 모든 노드를 의미하므로 Element, Text, Comment 등 다양한 노드 타입을 포함할 수 있다.
var nextNode = element.nextSibling;📌
firstElementChild와nextSibling의 다른 점
nextSibling는다음 형제 노드를 반환한다는 점에서첫 번째 자식 요소를 반환하는firstElementChild와는 다르다.
Node:태그(요소 노드),속성,주석,내용(텍스트 노드)를 모두 표현
Element: Node의 하위 개념으로요소 노드만을 표현한다.
(즉,속성,주석,내용은 해당하지 않는다.)
✔ previousSibling
previousSibling은 주어진 노드의 이전 형제 노드를 반환하는 읽기 전용 속성이다. 이전 형제 노드가 없으면 null을 반환한다.
var prevNode = element.previousSibling;
⭐ 노드 추가 및 삭제
✔ append & appendChild
append 메서드 는 한 개 이상의 노드를 부모 요소의 마지막 자식으로 추가한다. 이 메서드는 Node 객체뿐만 아니라 문자열도 추가할 수 있다.
parentElement.append(node1, node2, "some text");상대적으로 새로운 메서드로, IE에서는 지원되지 않는다.
appendChild 메서드 는 한 개의 노드를 부모 요소의 마지막 자식으로 추가한다. 추가할 수 있는 대상은 반드시 Node 객체여야 한다.
parentElement.appendChild(node);✔ remove & removeChild
remove 메서드 는 해당 노드를 DOM 트리에서 제거한다. 해당 노드를 제거하기 때문에 removeChild보다 편리하다.
element.remove();하지만 상대적으로 새로운 메서드로, IE에서는 지원되지 않는다.
removeChild 메서드 는 부모 노드에서 특정 자식 노드를 제거한다.
parentElement.removeChild(childElement);📌 removeChild의 단점
원하는 노드를 제거하려면 부모에서 removeChild를 사용해야 한다.ele.parentElement().removeChild(ele)
✔ 활용
"container" div 아래에 버튼 100개를 추가.
const a = document.querySelector("#container")
for(let k=0; k<100; k++){
const button = document.createElement("button")
button.innerText = `${k}`
a.appendChild(button)
}