04-DOM Node 생성, 추가, 복제, 삭제

1. Node 콘텐츠 생성

속성	설명
`textContent`	요소 노드의 모든 텍스트에 접근
`innerText`	요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근
`innerHTML`	요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>콘텐츠 조작</title>
8  </head>
9  <body>
10    <p id="title">Hello, <span style="display: none">JavaScript</span></p>
11    <script>
12      document.getElementById('title').textContent // Hello, Javascript!
13      document.getElementById('title').innerText // Hello,
14      document.getElementById('title').innerHTML // Hello, <span style="display: none;">JavaScript</span>
15
16      console.log(document.getElementById('title').textContent)
17      console.log(document.getElementById('title').innerText)
18      console.log(document.getElementById('title').innerHTML)
19    </script>
20  </body>
21</html>

콘텐츠 조작 속성은 접근한 노드의 콘텐츠를 가져올 뿐만 아니라 속성에 값을 할당하면, 각 노드의 콘텐츠를 바꿀 수도 있습니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>DOM Modify Set</title>
8  </head>
9  <body>
10    <p id="textContent"></p>
11    <p id="innerText"></p>
12    <p id="innerHTML"></p>
13    <script>
14      // 단순히 텍스트로 취급해서 값을 그대로 노드의 콘텐츠에 적용
15      document.querySelector('#textContent').textContent = `<strong>textContent</strong> 속성`
16      document.querySelector('#innerText').innerText = `<strong>innerText</strong> 속성`
17
18      // 태그로 인식해 노드의 콘텐츠에 적용
19      document.querySelector('#innerHTML').innerHTML = `<strong>innerHTML</strong> 속성`
20    </script>
21  </body>
22</html>

아래와 같은 li 태그가 있을 때,

1<li id="blue">Blue</li>
2<script>
3  const blue = document.getElementById('blue') // 아이디로 태그를 선택
4
5  blue.firstChild // "Blue" - 모든 노드를 반환하므로, text 노드만 가져옴
6  blue.firstElementChild // "null" - 노드의 요소만 반환
7
8  const blueTextNode = blue.firstChild
9
10  blueTextNode.nodeName // '#text'
11  blueTextNode.nodeType // 3
12  blueTextNode.nodeValue // 'Blue' - 특정 노드의 텍스트를 가져옴
13
14  blueTextNode.nodeValue = '파랑' // 이렇게 입력도 가능
15</script>

firstChild, firstElementChild 로 해당 노드 및 해당 노드의 요소를 반환
nodeName, nodeType, nodeValue 를 사용하면 해당 노드의 값들을 불러옴

1.1 innerHTML 방법

ul 태그 안에 글자를 넣은 li 태그를 만들고 싶다면,

1const newLi = document.createElement('li') // li 태그 만들고
2newLi.innerHTML = 'green' // 만든 li 태그 안에 글자 넣고
3const ul = document.getElementById('color') // ul 태그 만들고
4ul.appendChild(newLi) // 만든 ul 태그 안에 li 태그를 넣는다.

1.2 createTextNode 방법

innerHTML 사용하지 않고 만든다면, 아래처럼 createTextNode 를 쓸 수도 있습니다.

1const newLi2 = document.createElement('li') // li 태그 생성
2const newText = document.createTextNode('pink') // 텍스트 노드만 생성
3newLi2.appendChild(newText) // 텍스트 노드를 생성한 li 태그에 넣는다.

2. Node 추가

노드 생성
- createElement() : 요소 노드를 생성
- createTextNode() : 텍스트 노드를 생성
- createAttribute() : 속성 노드를 생성
노드 연결
- <기준 노드>.appendChild(<자식 노드>)
  - 기준 노드에 자식 노드를 연결
- <기준 노드>.setAttributeNode(<속성 노드>)
  - 기준 노드에 속성 노드를 연결

특정 요소 앞에 리스트를 추가하고 싶다면 insertBefore 를 사용합니다.

1ul.insertBefore(newLi2, red)
2// ul 에 newLi2 를 추가하는데 red 로 선택한 요소 앞에 넣어라

3. Node 복제

노드 복제할 때는 cloneNode() 를 사용합니다.

1const newBlack = newLi.cloneNode() // 빈 노드만 복제
2const newBlack = newLi.cloneNode(ture) // 노드의 요소까지 복제

4. Node 삭제

삭제 노드는 항상 부모 노드에서 removeChild() 메서드를 사용
따라서 부모 노드를 반환하는 parentNode 속성으로 부모 노드에 접근해서 삭제
parentNode.removeChild.(자식노드)

1ul.removeChild(red)
2
3ul.removeChild(ul.firstElementChild) // ul 의 첫번째 자식요소
4ul.removeChild(ul.lastElementChild) // ul 의 마지막 자식요소

03-DOM Node 접근 05-DOM Node CSS style, class 제어