웹 문서에서 처음 화면에서는 보이지않다가 클릭이나 이벤트가 발생하면 내용이 나타나는 경우가
있다. 이런 동작은 css에 display속성을 사용해서 만들수도 있지만 DOM트리에 새로운 노드를
추가하는 방법도 있다.
이때 주의할점은 노드를 추가하면 단순히 요소노드뿐만 아니라 텍스트와 속성노드도 함께
추가해줘야한다는 점이다.
노드리스트
DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 '노드리스트(node List)'를 사용해야 함.
dom에 접근할때 querySelectorAll()를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있다.
이때 노드 정보를 여러개 저장한 것이 노드 리스트이다.
배열과 비슷하게 동작한다는 특징이 있다.
여러개 노드 중 특정한 노드를 불러오고 싶다면 아래와 같은 기본형을 사용한다.
[기본형]
document.querySelectorAll("li")[인덱스번호]새로운 노드 추가 과정
새로운 노드를 추가할때에는 dom트리를 구성하는 기본 원칙에 따라 추가하여 생성해야한다.
단순히 태그에 해당하는 요소노드뿐만 아니라 텍스트 노드와 속성노드도 추가해야한다.
예를 들어 img태그요소를 자바스크립트를 이용해 동적으로 생성하고 싶다면
태그의 요소노드 뿐만 아니라 속성에 해당하는 src, alt같은 속성 노드도 추가해줘야한다.
어떠한 웹 문서의 DOM트리에 새로운 노드를 추가하려면 그 문서에 새로운 소스 코드를 작성해야한다.
그래서 노드를 추가할때는 웹 문서에 어떤 소스를 추가할지 먼저 생각하고, 그에 따라 요소노드나
텍스트, 속성노드도 만들어야한다.
텍스트 노드를 사용하는 새로운 요소 추가하기
1. 요소 노드 만들기 - createElement()메서드
: dom에 새로운 요소를 추가할때 가장 먼저 해야할 일은 요소 노드를 만드는 것이다.
이 때 사용하는 메서드는 createElement()인데 괄호 안에 해당하는 요소노드를
만들면 된다.
[기본형]
document.createElement('노드명')2. 텍스트 노드 만들기-createTextNode()메서드
: 새로운 요소 노드를 만들었다면 그 다ㅏ음으느 내용을 다는 텍스트 노드를 자식노드로 만들어
연결해야한다. 텍스트 노드를 만드는 메서드는 createTextNode()메서드이고,
아래의 기본형을 사용한다.
[기본형]
document.creatTextNode('텍스트')
텍스트만 만들어준 상태이다 아직 연결 X 1번과 2번의 예시
3. 자식 노드로 연결하기
: 위 1번과 2번은 사용할 새로운 p노드를 만들고, 텍스트 노드를 따로 따로 만든것이다.
text노드를 따로 따로 만들어둔 상태이기때문에 아직 부모노드와 자식노드가 연결되지 않은
상태이다.
appendChild()메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할때 사용한다.
이때 appendChild()메서드를 사용해서 연결하는 노드는 자식노드 중 맨 끝에 추가된다.
[기본형]
부모노드.appendChild(자식노드)
html
<h1>자바스크립트</h1>
<ul id="item_list">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<div class="container">
<h2>dom노드 추가 삭제</h2>
<!-- 링크를 클릭하면 addP()함수가 한 번만 실행되도록 한다. 두 번 실행될 것 같지만
;이 한 번만 실행된다. 지금은 두개이지만 뒤에 this.onclick가 클릭했을때 실행되지 말라고! -->
<a href="#" onclick="addP(); this.onclick='';">더보기</a>
<div id="info"></div>
</div>자바스크립트
function addP() {
// 1. 새로운 p요소 노드 만들기
let newP = document.createElement("p"); //이 줄은<p></p>가 만들어진거임
// 2. 새로운 p요소 노드에 들어갈 텍스트 노드 만들기
let txtNode = document.createTextNode("dom은 createTextNode");
// 3. 텍스트 노드를 자식노드로 연결하기
newP.appendChild(txtNode);
// 4. 부모태그 요소인 #info에 newP를 자식노드로 연결하기
document.getElementById("info").appendChild(newP);
}
이런식으로 더보기를 누르면 텍스트가 나오게 된다.
js-속성값이 있는 노드삭제하기
- 요소노드 만들기 (node01.html페이지 참고)
-
속성노드 만들기 - createAtteibute()메서드
: 속성노드를 추가할때 createAtteibute()메서드를 사용한다.[기본형] document.createAttribute('속성명') -
속성노드에 값 추가하기 - .value프로퍼티
: 생성한 속성노드에 값을 추가할때에는 .value프로퍼티를 이용한다.[기본형] 요소노드.value = "속성값" -
속성 노드를 부모노드에 추가하기- setAttributeNode()메서드
:속성노드는 요소노드에 자식으로 연결해야한다. 새로 만든 속성노드를 요소노드에
연결하려면 setAttributeNode()메서드를 사용한다.
만약 추가할 속성이 요소노드에 이미 들어있다면 기존 속성노드를 새 속성노드로 대체한다.[기본형] 요소노드.setAttributeNode('속성노드 3번에서 만들었던 것')
- 속성노드를 연결한 요소 노드를 부모 노드에 추가하기 (node01.html페이지 참고)
html
<div class="container">
<h2>dom노드 추가 삭제</h2>
<!-- 링크를 클릭하면 addP()함수가 한 번만 실행되도록 한다. 두 번 실행될 것 같지만
;이 한 번만 실행된다. 지금은 두개이지만 뒤에 this.onclick가 클릭했을때 실행되지 말라고! -->
<a href="#" onclick="addP(); this.onclick='';">더보기</a>
<div id="info"></div>
</div>자바스크립트
function addP() {
// 1. 새로운 p요소 노드 만들기
let newP = document.createElement("p"); //이 줄은<p></p>가 만들어진거임
// 1-1. 새로운 img요소 노드 만들기
let newImg = document.createElement("img"); // <img></img>기본형이 만들어진거임
// 2. 새로운 p요소 노드에 들어갈 텍스트 노드 만들기
let txtNode = document.createTextNode("dom은 createTextNode");
// 2-1. 새로운 img 요소노드에 들어갈 속성노드 만들기
let srcNode = document.createAttribute("src");
let altNode = document.createAttribute("alt");
// 2-2. 속성노드에 값 추가하기
srcNode.value = "./img/cute.jpg"; // src 속성값지정
altNode.value = "치명적"; // alt 속성값지정
// 3. 텍스트 노드를 자식노드로 연결하기
newP.appendChild(txtNode);
// 3-1. 속성 노드를 자식노드로 연결하기
newImg.setAttributeNode(srcNode);
newImg.setAttributeNode(altNode);
// 4. 부모태그 요소인 #info에 newP를 자식노드로 연결하기
document.getElementById("info").appendChild(newP);
// 4-1. 부모태그요소인 #info에 newImg를 자식노드로 연결하기
document.getElementById("info").appendChild(newImg);
}
응용해서 a 태그추가
let newA = document.createElement("a");
let txtA = document.createTextNode("aaaaaaaa");
let hrefa = document.createAttribute("href");
hrefa.value = "https://www.naver.com";
newA.appendChild(txtA);
txtA.setAttributeNode(hrefa);
document.getElementById("info").appendChild(newA);