자바스크립트 DOM&EVENT #3 노드생성,추가,복제,삭제

수정

이번에는 수정을 해보겠습니다. 먼저 blue를 가져오겠습니다.

  지난 포스팅에서 배웠던 것처럼 firstChild는 text를 가져오고  firstElementChild는 null 없니다 이유는 자식요소노드는 없기 때문입니다. 

 

blueTextNode라는 변수를 만들고 blue.firstChild를 넣어보겠습니다 그리고 

blueTextNode의 정보들을 보겠습니다.

nodeType 3은 문서를 참고하면 3은 텍스트노드임을 알 수 있습니다. 

https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

Node: nodeType property - Web APIs | MDN

 

특정 요소의 텍스트를 가져와서 수정할때 nodeValue를 사용할 수 있습니다. 

수정도 할 수 있습니다. nodeValue에 새로운 값을 넣어줘서 할 수 있습니다.

 

nodeValue는 모든 노드들이 가지고 있는 property이지만 

텍스트노드가 아니면 null을 반환합니다. ul을 통해 확인할 수 있습니다.

 

 

textContent를 이용하면 textNode가 아닌 경우에도 text를 수정할 수 있습니다.

 하지만 이경우에 마크업이 모두 날아갔습니다. 

textContent를 이용해 텍스트를 바꿔보면 아래와 같이 됩니다.

 

태그를 넣어보겠습니다. 

 

넣은 문자열 그대로 나옵니다. 그래서 잘 사용하지 않습니다.

마크업을 제대로 표현하려면 innerHTML을 사용하면 됩니다.

innerHTML은 간단하게 마크업을 적용 할 수 있습니다.

아주 편리한 기능 이긴 한데 단점은 요소를 추가 수정 할때마다 모든 요소를 작성해야합니다.

red 아래에 blue를 추가해보겠습니다.

요소를 추가하다보면 어떤 요소앞에 넣거(또는 제거)나 어떤요소 뒤에 넣어(또는 제거)야 하는 경우가 생깁니다. 

그럴때마다 innerHTML로 재작성 해 줄수는 없습니다.

 

이제 조금더 나은 방법을 살펴보겠습니다.

일단 li요소를 하나 만들겠습니다.요소는 createElement를 이용해 만들 수 있습니다.

 

확인을 해보면 text가 없습니다. 간단히 textnode를 만들어 주려면 innerHTML을 사용하시면 됩니다.

 

 

자식 요소를 만들기위해 innerHTML을 사용했었는데 이번에는 innerHTML을 사용하지 않고 만들어 보겠습니다. 

 

마찬가지로 li를 하나 만들어줍니다. 그리고 newText이름의 TextNode를 하나 생성해줍니다.

이제 li에 방금 만든 텍스트 노드를 넣습니다.

마지막으로 ul에 방금만든 li를 넣습니다.

결과를 보시면 pink가 추가되었음을 알 수 있습니다.

 

그림으로 쉽게 보겠습니다.

 

1. ul이 하나있고 document.createElement로 li 요소를 하나 만들어줍니다.

2. createTextNode로 textNode도 하나 만들어줍니다. 값은 pink로 했습니다.

 

3. li에 appendChild를 이용해 li에 방금만든 textNode를 넣어줍니다. 

 

4. 마지막으로 ul에 appendchild로 li를 넣어줍니다.

 

 

보시다시피 appendchild는 지정한 부모노드의 마지막 자식으로 추가됩니다. 

원하는 위치가 마지막이 아니라면 insertBefore을 이용합니다.

만약 red앞 제일 첫번째 위치에 추가하고 싶으면 red 앞에 추가하라고 하면 됩니다.

다음과 같이 사용합니다

 

   

 

복제

다음은 복제입니다. cloneNode를 이용하면 복제할 수 있습니다.

하지만 li 안에는 비어있습니다.

그래서 cloneNode() 괄호안에 true를 넣어 깊은 복제를 실시합니다. 이러면 자식노드까지 모두 복제됩니다.

위의 경우처럼 false를 하면 노드자식만 달랑 복제됩니다. 

그래서 깊은 복제를 해보면 복제가 잘 됨을 알 수 있습니다.

 

삭제

removechild를 이용해서 삭제할 수 있습니다. 사용법은 동일합니다.