티스토리 뷰

Frontend/JavaScript

[생활코딩][웹브라우저JS]- Node 객체, Node객체 API

blueprint-12 2022. 2. 6. 20:59

Node객체?

Node 객체는 DOM에서 시조(최상위 객체)와 같은 역할을 한다.

다른 말로 모든 DOM객체는 Node객체를 상속 받는다.

Node객체의 주요기능

▶관계 (관계 API)

  • 엘리먼트는 서로 부모, 자식, 혹은 형제 자매 관계로 연결되어 있다.
  • 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.
    • Node.childNodes // 자식 노드들을 유사배열에 담아서 리턴
    • Node.firstChild //첫 번째 자식 노드 
    • Node.lastChild //마지막 자식 노드
    • Node.nextSibling // 다음 형제 노드
    • Node.previousSibling // 이전 형제 노드
    • Node.contains() //해당 엘리먼트가 하위에 특정한 자식 엘리먼트를 가지고 있는 지 확인
    • Node.hasChildNodes() //contains()와 비슷한 용도 
      <body id="start">
    <ul>
      <li><a href="./532">html</a></li>
      <li><a href="./533">css</a></li>
      <li>
        <a href="./534">JavaScript</a>
        <ul>
          <li><a href="./535">JavaScript Core</a></li>
          <li><a href="./536">DOM</a></li>
          <li><a href="./537">BOM</a></li>
        </ul>
      </li>
    </ul>
    <script>
      const s = document.getElementById("start");
      console.log(1, s.firstChild); // #text (줄바꿈 문자) 텍스트객체
      //firstChild 가 엘레멘트가 아니라 텍스트로 잡혔을 때는 태그 사이에 "공백 or 줄바꿈"이 있을 경우
      //공백이나 줄바꿈을 없애면 첫번째 자식 요소가 잡힌다-> ul엘리먼트
      const ul = s.firstChild.nextSibling;
      console.log(2, ul); // ul
      console.log(3, ul.nextSibling); // #text
      console.log(4, ul.nextSibling.nextSibling); // script
      console.log(5, ul.childNodes); //text, li, text, li, text, li, text
      //위의 childNodes 를 조회했을 때에도 중간에 text 가 껴있는 걸 볼 수 있다-> 보이지 않는 줄바꿈 공백이 존재한다.
      //for문을 돌려서 전체 속성에 style.color = "red"; typeError발생 why? text가 껴있기 때문에
      console.log(6, ul.childNodes[1]); // li(html)
      console.log(7, ul.parentNode); // body
    </script>
  </body>​

▶노드의 종류 API

*"노드의 종류"의 경우, 이전에 재귀함수와 같이 정리했던 파트에 똑같은 내용을 포함하고 있습니다.

Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지 알려주는 식별자를 제공한다.

  • Node.nodeType // node의 타입을 의미한다.
    • 노드의 종류에 따라 정해진 상수가 존재합니다. 모든 노드의 종류와 종류에 따른 값을 출력하는 for문을 활용하면 확인할 수 있습니다.  
      for (let name in Node) {
        console.log(name, Node[name]);
      }
      /*
      ELEMENT_NODE 1
	 ATTRIBUTE_NODE 2
	 TEXT_NODE 3
	 CDATA_SECTION_NODE 4
	 ENTITY_REFERENCE_NODE 5
	 ENTITY_NODE 6
	 PROCESSING_INSTRUCTION_NODE 7
	 COMMENT_NODE 8
	 DOCUMENT_NODE 9
	 DOCUMENT_TYPE_NODE 10
	 DOCUMENT_FRAGMENT_NODE 11
	 NOTATION_NODE 12
	 DOCUMENT_POSITION_DISCONNECTED 1
	 DOCUMENT_POSITION_PRECEDING 2
	 DOCUMENT_POSITION_FOLLOWING 4
	 DOCUMENT_POSITION_CONTAINS 8
	 DOCUMENT_POSITION_CONTAINED_BY 16
	 DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32 
     */
    • console.log(s.nodeType === Node.CDATA_SECTION_NODE);​
      ->상수를 기억하고 있는 것은 어렵기 때문에 Node객체는 상수에 해당하는 변수명을 제공하고 있습니다
  • Node.nodeName // node의 이름(태그명을 의미) 
    • 요소 노드의 nodeName프로퍼티는 언제나 해당 HTML 요소의 태그 이름을 대문자로 저장
    • 노드 고유의 이름을 저장하므로, read only 프로퍼티 입니다.
      노드 프로퍼티 값 
      문서 노드(document node) #document
      요소 노드(element node) 태그 이름(대문자)
      속성 노드(attribute node) 속성이름
      텍스트 노드(text node) #text

▶값 API

Node 객체의 값을 제공하는 API

  • Node.nodeValue // 노드의 값을 저장한다. 
    노드  프로퍼티 값 
    요소 노드(element node) undefined
    속성 노드(attribute node) 해당 속성의 속성값
    텍스트 노드(text node) 해당 텍스트 문자열
  • Node.textContent // 노드의 하위 컨텐트 즉 텍스트값을 알 수 있는 기능 
    •   console.log(t.textContent); //본인 포함 하위 텍스트 내용까지 전부 출력

▶노드 변경 API

노드를 추가, 제거, 변경하는 방법을 알아보자. 

 

노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 한다(전제 조건) 

-> 특정 노드가 엘리먼트를 만드는 것보단 문서가 엘리먼트를 만드는 것이므로 이 역할은 Node객체가 아닌 document객체의 기능

  • document.createElement(tagname) // 엘리먼트 노드를 추가한다. 
  • document.createTextNode(data) // 텍스트 노드를 추가한다. 
 

createTextNode VS textContent VS innerText VS innerHTML VS nodeValue 비교분석

Node, Document, Element 등의 메소드와 속성 등을 사용하여 다양하여 화면에 텍스트를 렌더링하여 넣을 수 있다.

r2fresh.github.io

(엘리먼트를 생성했다면 아래의 Node API를 통해서 자식을 추가 하면된다.)

  • Node.appendChild(child) //노드의 마지막 자식으로 주어진 엘레먼트 추가

 

  • Node.insertChild(newElement, referenceElement) //appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때, 이것 앞에 엘리먼트가 추가된다. 
    • 부모노드의 기준 점 노드(referenceElement) 앞에 새로만든 노드(newElement)를 삽입합니다.
    • 내가 원하는 위치에 삽입할 때 용이
    • 위치 변경 시, 기존 부모 노드에서도 굳이 삭제할 필요 없이 자동으로 이동(노드가 document에 동시에 두 곳에 존재할 수 없기 때문에 노드가 이미 부모를 가지고 있다면, 노드가 제거된 뒤에 새로운 위치에 삽입)
    • 만약 참조 노드(referenceElement)가 nulll 이라면, 노드는 부모 노드의 자식 노드 리스트 맨 끝에 추가된다. 
<body>
    <ul id="target">
      <li>HTML</li>
      <li>CSS</li>
    </ul>
    <input type="button" onclick="callAppendChild();" value="appendChild()" />
    <input type="button" onclick="callInsertBefore();" value="insertBefore()" />
    <script>
      function callAppendChild() {
        const target = document.getElementById("target");
        const li = document.createElement("li");
        //위에서 li엘리먼트를 만들었다면 Text Node를 통해서 내용을 삽입합니다.
        //li 엘리먼트에 담을 text 객체를 만들고 결합해야 합니다.
        const text = document.createTextNode("JavaScript");
        // li에 appendChild를 통해 인자로 text객체(text node)를 전달
        li.appendChild(text);
        //appendChild 를 통해 해당 객체 target의 맨 끝자식으로 추가한다.
        target.appendChild(li);
      }

      //원하는 위치에 새로만든 엘리먼트를 추가하고싶다면 insertBefore를 사용하면 된다.
      function callInsertBefore() {
        const target = document.getElementById("target");
        const li = document.createElement("li");
        const text = document.createTextNode("jQuery");
        li.appendChild(text);
        //target.firstChild 의 앞쪽에 추가한다. -> target.firstChild 는 첫번째 li태그
        target.insertBefore(li, target.firstChild);
        console.log(target.firstChild);
      }
    </script>
  </body>

노드 변경 API : 삭제

노드를 제거하기 위해서는 부모노드.removeChild(child) 메소드를 사용한다. 

이 때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행해야 한다는 점을 유의해야 한다.

 <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li id="target">JavaScript</li>
    </ul>
    <input type="button" onclick="callRemoveChild();" value="removeChild()" />
    <script>
      function callRemoveChild() {
        //1. 삭제하고자 하는 엘리먼트의 객체를 target에 담기
        //2. 부모 노드 객체.removeChild(삭제하고자 하는 엘리먼트를 담은 객체);
        const target = document.getElementById("target");
        target.parentNode.removeChild(target);
      }
    </script>

->해당 엘리먼트의 부모 노드를 알아내기 위해서는 parentNode 프로퍼티를 사용하면 됩니다. 그 다음 removeChild 메소드에 인자로 target 변수를 전달하면 id가 target인 li태그가 삭제됩니다. 

 

노드 변경 API : 노드 바꾸기(변경)

  • replaceChild(newChild, oldChild) // newChild: 새로넣을 엘리먼트, oldChild: 대체시킬 대상인 엘리먼트
  • 새로 뭔가를 삽입하려면 우선 새로운 요소를 만들어야 합니다. (전제조건) 
    <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li id="target">JavaScript</li>
    </ul>
    <input type="button" onclick="callReplaceChild();" value="replaceChild()" />
    <script>
	function callReplaceChild() {
        //1.삽입할 새로운 엘레멘트 생성하기
        const a = document.createElement("a");
        a.setAttribute("href", "http://opentutorials.org/module/904/6701");
        a.appendChild(document.createTextNode("Web browser JavaScript"));

        //2. 변경하고자하는 엘리먼트를 담은 객체.replaceChild(newElement, oldElement)
        // 여기서 target.firstChild 가 -> text node 기 때문에
        const target = document.getElementById("target");
        console.log(target.firstChild); //text node-> 즉, javaScript
        target.replaceChild(a, target.firstChild);
        console.log(target.firstChild); //-> 전 코드에서 수정이됐기 때문에 내가 새로만든 a태그로 변경됨
      }
      </script>
</body>​

 

빈 텍스트 노드의 처리 (ref: http://www.tcpschool.com/javascript/js_dom_nodeAccess)

대부분의 주요 웹 브라우저는 모두 W3C DOM모델을 지원하지만, 처리 방식에 있어 약간의 차이가 있음

->가장 큰 차이점은 띄어쓰기와 줄 바꿈을 처리하는 방식

  • 파이어폭스나 기타 브라우저들은 띄어쓰기나 줄 바꿈을 텍스트 노드(text node)취급 but, 익스플로러 띄어쓰기나 줄 바꿈을 텍스트 노드 취급 X
  • 따라서 자식 노드나 형제 노드를 이용하여 원하는 노드에 접근하려고 할 때 브라우저 간에 차이 발생
  • 이 차이를 없애는 가장 손쉬운 방법: nodeType 프로퍼티를 사용하여 선택된 요소의 타입을 검사하기 
    var lastNode;

function findLastChild(parentNode) {

    lastNode = parentNode.lastChild;

    while (lastNode.nodeType != 1) {

        lastNode = lastNode.previousSibling;

    }

}

function printLastChild() {

    var parentNode = document.getElementById("parentNode");

    findLastChild(parentNode);

    document.getElementById("nodename").innerHTML = lastNode.nodeName;

}
  • 위의 예시는 마지막 자식 노드를 찾은 후에, 찾은 노드의 타입이 요소 노드가 아니면 그 앞의 노드를 다시 검사합니다. 이 방식을 사용하면 모든 브라우저에서 마지막 자식 노드로 같은 요소 노드를 선택할 수 있게 된다. 

 

'Frontend > JavaScript' 카테고리의 다른 글

[생활코딩][웹브라우저JS] - Document 객체, Text 객체  (0) 2022.02.09
[생활코딩][웹브라우저JS]- 문자열로 노드 제어  (0) 2022.02.09
[생활코딩][웹브라우저JS]- Element객체, 관련 API  (0) 2022.02.03
[생활코딩]-JS Execute context & closure  (0) 2022.02.02
[생활코딩][웹브라우저JS]- HTMLElement, Dom Tree  (0) 2022.01.29
댓글