문서 수정하기
생동감 있는 웹페이지를 만들기 위한 핵심은 DOM 조적에 있다.
이번엔 적시에 요소를 새롭게 생성하는 방법과 페이지에 있는 기존 컨텐츠를 어떻게 수정할 수 있는지 알아보도록 하자.
요소 생성하기
DOM 노드를 만들때 사용하는 두 가지 메서드
document.createElement(tag)
태그 이름(tag)을 사용해 새로운 요소 노드를 만든다.
let div = document.createElement('div');document.createTextNode(text)
주어진 텍스트(text)를 사용해 새로운 텍스트 노드를 만든다.
let textNode = document.createTextNode('안녕하세요.');개발을 할 땐 위 예시처럼 주로 요소 노드를 만든다.
메시지 생성하기
메시지가 들어갈 div는 세 단계로 만들 수 있다.
<script>
// 1. <div> 요소 만들기
let div = document.createElement('div');
// 2. 만든 요소의 클래스를 'alert'로 설정
div.className = "alert";
// 3. 내용 채워넣기
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";
</script>이렇게 세 단계를 걸치면 요소가 만들어진다. 요소를 만들긴 했지만, 아직 이 요소는 div라는 이름을 가진 변수에 불과하기 때문에 페이지엔 나타나지 않는다.
삽입 메서드
div가 페이지에 나타나게 하려면 document 내 어딘가에 div를 넣어줘야 한다.
document.body로 참조할 수 있는 곳에 말이다.
요소 삽입 메서드 append를 사용한다.
<script>
<style>
.alert {
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
background-color: #dff0d8;
}
</style>
<script>
let div = document.createElement('div');
div.className = "alert";
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";
document.body.append(div);
</script>
</script>여기서는 doument.body에서 append를 호출했지만 다른 요소에도 append 메서드를 호출해 요소를 넣을 수 있다.
div.append(anotherElement)와 같이 div에 무언가를 추가하도록 할 수 있다.
자바스크립트에서 지원하는 노드 삽입 메서드
- node.append(노드나 문자열) // 노드나 문자열을 node 끝에 삽입한다.
- node.prepend(노드나 문자열) // 노드나 문자열을 node 맨 앞에 삽입한다.
- node.befor(노드나 문자열) // 노드나 문자열을 node 이전에 삽입한다.
- node.after(노드나 문자열) // 노드나 문자열을 node 다음에 삽입한다.
- node.replaceWith(노드나 문자열) // node를 새로운 노드나 문자열로 대체한다.
<script>
<ol id="ol">
<li>0</li>
<li>1</li>
<li>2</li>
</ol>
<script>
ol.before('before'); // <ol> 앞에 문자열 'before'를 삽입함
ol.after('after'); // <ol> 뒤에 문자열 'after를 삽입함
let liFirst = document.createElement('li');
liFirst.innerHTML = 'prepend';
ol.prepend(liFirst); // <ol>의 첫 항목으로 liFirst를 삽입함
let liLast = document.createElement('li');
liLast.innerHTML = 'append';
ol.append(liLast); // <ol>의 마지막 항목으로 liLast를 삽입함
</script>
</script>최종 결과는 다음과 같다.
<script>
before
<ol id="ol">
<li>prepend</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>append</li>
</ol>
after
</script>노드 삭제하기
node.remove() 사용하면 노드를 삭제할 수 있다.
1초 후 메시지가 사라지게 하는 예시다.
<style>
.alert {
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
background-color: #dff0d8;
}
</style>
<script>
let div = document.createElement('div');
div.className = "alert";
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";
document.body.append(div);
setTimeout(() => div.remove(), 1000);
</script>참고로, 요소 노드를 다른 곳으로 옮길 때 기존에 있던 노드를 지울 필요가 없다.
모든 노드 삽입 메서드는 자동으로 기존에 있던 노드를 삭제하고 새로운 곳으로 노드를 옮기기 때문이다.
<div id="first">First</div>
<div id="second">Second</div>
<script>
// remove 메서드를 호출할 필요가 없습니다.
second.after(first); // id가 second인 노드를 가져오고, 해당 노드의 뒤에 id가 first인 노드를 삽입
</script>cloneNode로 노드 복제하기
위 예시에서 기존 메시지 창과 유사한 메시지 창을 하나 더 띄워달라는 요구사항이 있을 때
기기존에 만들어 놨둰 div를 복제하고 안에 있는 텍스트를 수정하는 방법도 가능하다.
복제하려는 요소가 클 때는 함수를 만드는 대신 복제를 사용하는 방법이 빠르고 간단할 수 있다.
- elem.cloneNode(true)을 호출하면 elem의 '깊은'복제본이 만들어진다. 속성 전부와 자손 요소 전부가 복사된다. elem.cloneNode(false)을 호출하면 후손 노드 복사 없이 elem만 복제된다.
<style>
.alert {
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
background-color: #dff0d8;
}
</style>
<div class="alert" id="div">
<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.
</div>
<script>
let div2 = div.cloneNode(true); // 메시지 창 복제
div2.querySelector('strong').innerHTML = '안녕히 가세요!'; // 복제한 메시지 창 내용 수정
div.after(div2); // 복제한 메시지 창을 기존 메시지 창 다음에 보여줌
</script>