티스토리 뷰

Frontend/JavaScript

[생활코딩] JS문법(패턴)- 재귀함수(feat. 노드 종류 API)

blueprint-12 2022. 1. 22. 20:46

재귀함수는 함수 자신을 호출하는 프로그래밍 기법이다. 

재귀 함수에 관한 수업은 웹브라우저 자바스크립트 모듈에서 언급

->http://opentutorials.org/module/904/6700

 

노드 종류 API - 웹브라우저 JavaScript

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다.  Node.nodeType node의 타입을 의미한다.  Node.nodeName no

opentutorials.org

노드 종류 API

노드 작업을 하게 되면 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있습니다.

이런 경우에 사용할 수 있는 API 가 nodeType, nodeName 이다. 

  • Node.nodeType //node의 타입을 의미한다. 
  • Node.nodeName // node의 이름(태그명을 의미한다.)

Node Type

노드의 종류에 따라서 정해진 상수가 존재한다.

▶모든 노드의 종류와 종류에 따른 값을 출력하는 예제 

for(let name in Node){
   console.log(name, Node[name]);
}

아래는 결과이다. 

ELEMENT_NODE 1  // 엘리먼트 객체에 해당하는 노드라면 상수로 접근할 수 있고 숫자 1입니다. 
ATTRIBUTE_NODE 2 
TEXT_NODE 3 //Node.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

const body = document.querySelector("body");
document.write(body.nodeType + "<br/>"); //output: 1 (ELEMENT_NODE)
document.write(document.nodeType); //쿼리 셀렉터로 하지 않아도 뜸
document.nodeType === 9 //true를 반환
  • 노드의 순서를 외우고 숫자를 쓰는 것도 괜찮지만 Node객체가 제공하는 상수명이 있기 때문에 아래와 같이 숫자가 아닌 상수명을 작성해준다면 무엇을 나타내는지 확실히 알 수 있다. (참고로 Node. 을 하면 자동완성으로 내용이 뜬다.)
  • document.nodeType === Node.ELEMENT_NODE;

재귀함수 활용

<!DOCTYPE html>
<html>
  <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>
      //재귀함수 - 어떤 함수가 실행될 때, 자기자신을 호출하는 것

      /* traverse 함수는 2개의 매개변수를 가지고 있어야 한다.
      1. 조회하려고하는 root element
      2. 다른 함수에 매개변수로 넘겨준 함수 이를 callback함수라함,
      매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념
      ->콜백함수는 traverse 의 내부에서 실행됨
     for문 돌릴때 제한을 걸고싶다-> elements Node는 제한 -> Node의 타입을 확인하면 된다.
      */
      function traverse(target, callback) {
        //if 문 내부의 Node.ELEMENT_NODE는 숫자로 1 이지만 명시적으로 써두는 것이 이해에 좋다
        if (target.nodeType === Node.ELEMENT_NODE) {
          // a태그에 해당하는 element 만 callback함수의 인자로 전달됨
          if (target.nodeName === "A") callback(target);
          const c = target.childNodes;
          for (let i = 0; i < c.length; i++) {
            traverse(c[i], callback);
          }
        }
      }

      traverse(document.getElementById("start"), function (elem) {
        console.log(elem);
      });
    </script>
  </body>
</html>

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

[생활코딩][웹브라우저JS]- 사용자와 커뮤니케이션 하기  (0) 2022.01.26
[생활코딩][웹브라우저JS]- 스크립트 태그 위치, Object Model  (0) 2022.01.23
[생활코딩] JS문법(객체지향)- 참조  (0) 2022.01.21
[생활코딩] JS문법(객체지향)- 데이터타입  (0) 2022.01.21
[생활코딩] JS문법(객체지향)- Object객체  (0) 2022.01.19
댓글