4-14 강의에서 작성하신 코드에 궁금한게 있습니다.

조회수 361회

궁금한게 있습니다 문법적인 질문이 아니라

강의 중에서 작성하신 코드중에

function els(selector , context){
  // selector 유형의 문자가 아니거나 , selector 공백을 제거한 길이가 0일 경우
  // 결과 값 null 반환
  if(typeof selector !== 'string' || selector.trim().length === 0){ return null; }
  // context 값이 존재하고 , 노드 유형이 요소 노드(1)가 아니라면 .. context 변수에
  // el() 함수를 통해 문서 객체 참조
  if(context && context.modeType !== document.ELEMENT_NODE){
    context = el(String(context));
  }
  // context 값이 undefined , null 일 경우 , context는 document 값을 참조
  if(!context){context = document;}
    return context.querySelectorAll(selector);
  } 

이 중에서 context 값이 존재하고 , 노드 유형이 요소 노드(1)가 아니라면 .. context 변수에 el() 함수를 통해 문서 객체 참조

if(context && context.modeType !== document.ELEMENT_NODE){
  context = el(String(context));
}

라고 하셨는데 저는 context.modeType !== document.ELEMENT_NODE 이부분이

!== 이 아니라 === 이라고 생각이 들어서 입니다. context가 존재하고 그게 엘리먼트 라면 그 안에서 찾는다는 의미가 아닌가요?

예를 들면 $("#id", "div") 이런걸 구현 하신가 아닌가? context 안에서 selector인 것을 찾는다는 기능인거 같은데 그렇다면 === 인게 아닌가 싶어서 질문 드립니다.

1 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    안녕하세요 성원님. 야무입니다. :-)

    context.nodeType !== document.ELEMENT_NODE 조건 식이 아닌, context.nodeType === document.ELEMENT_NODE 조건 식이어야 하지 않나 질문 주셨는데요. 질문에 답변 드립니다.

    코드는 아래와 같았죠.

    function els(selector, context) {
    
      // selector 유형이 문자가 아니거나, selector 공백을 제거한 길이가 0일 경우 결과 값 null 반환
      if (typeof selector !== 'string' || selector.trim().length === 0) { return null; }
    
      // context 값이 존재하고, 노드 유형이 요소 노드(1)가 아니라면... context 변수에 el() 함수를 통해 문서 객체 참조.
      if (context && context.nodeType !== document.ELEMENT_NODE) { context = el(String(context)); }
    
      // context 값이 undefined, null 일 경우, context는 document 값을 참조.
      if (!context) { context = document; }
    
      return context.querySelectorAll(selector);
    
    }
    

    els() 함수 활용 예시를 먼저 살펴봅시다.

    // CSS 선택자로 NodeList를 수집한 경우
    var lis = els('li');
    
    // CSS 선택자 selector, context 인자를 전달해 NodeList를 수집한 경우
    var gnb_links = els('a', '.gnb');
    
    // context 인자에 DOM 요소를 전달해 NodeList를 수집한 경우
    var scripts = els('script', document.head);
    
    

    그럼 질문의 조건문을 살펴보겠습니다.

    AND 조건으로 context가 존재해야 하고, context.nodeType 값이 document.ELEMENT_NODE 유형이 아니어야 조건이 true가 됩니다.

    if (context && context.nodeType !== document.ELEMENT_NODE) { 
      context = el(String(context)); 
    }
    

    자 그럼 첫번째 예시 구문을 살펴봅시다.

    var lis = els('li');
    

    전달된 context 인자가 없기에 undefined로 처리 됩니다. 그럼 조건은 거짓으로 코드 블록은 실행되지 않습니다. 대신 아래 조건문이 실행됩니다. 즉, context = document가 되어 문서에서 대상 객체를 찾아 값을 반환하게 됩니다. (문제 없음)

    if (!context) { 
      context = document; 
    }
    

    이어서 두번째 예시 구문을 살펴보겠습니다.

    var gnb_links = els('a', '.gnb');
    

    전달된 context 인자가 문자 값 .gnb로 AND 조건에서 context 조건은 참이 됩니다. 나머지 조건을 살펴보면 context.nodeType 값은 undefined 가 됩니다. 이유는 전달된 데이터 유형은 문자 값으로 DOM 객체가 아니기 때문입니다.

    '.gnb'.nodeType // undefined
    

    그러므로 두번째 조건 또한 참이 됩니다.

    context.nodeType !== document.ELEMENT_NODE // true
    

    즉, 이 조건은 유효합니다.

    context && context.nodeType !== document.ELEMENT_NODE
    

    그럼 조건은 모두 참이므로 코드 블록은 실행됩니다. context 값인 .gnbel() 함수에 전달해 찾은 대상을 context에 할당 하겠죠. context 변수에는 찾은 문서 객체를 참조 할테니 코드는 잘 작동합니다. (문제 없음)

    if (context && context.nodeType !== document.ELEMENT_NODE) { 
      context = el(String(context)); 
    }
    

    그렇다면? 조건이 다음과 같이 변경된다면 결과는 어떻게 될까요?

    context && context.nodeType === document.ELEMENT_NODE
    

    전달된 데이터 유형은 문자 값으로 DOM 객체가 아니기 때문에 context.nodeType 값은 undefined입니다. 그러므로 두번째 조건은 거짓이 됩니다.

    context.nodeType === document.ELEMENT_NODE // false
    

    그럼 최종적으로 참, 거짓에 따른 거짓이므로 아래 코드 블록은 실행되지 않습니다.

    if (context && context.nodeType === document.ELEMENT_NODE) { 
      context = el(String(context)); 
    }
    

    위 조건 코드 블록이 실행되지 않았기에 contextundefined인 채, 다음 조건문에서 조건을 검토 하겠죠. 조건이 !context 이므로 참이 되어 코드 블록이 실행됩니다.

    if (!context) { 
      context = document; 
    }
    

    결국, document 에서 대상을 찾아오는 결과에 도달합니다. 기대한 결과와 다르죠. .gnb에서 대상을 찾아온 것이 아니니까요.

    결론

    context && context.nodeType !== document.ELEMENT_NODE 조건으로 작성해야 기대하는데로 문서 객체를 수집할 수 있습니다. :-)

    P.S

    1개월 전에 질문 주신 <img> 태그 속성에 대한 질문입니다.에 대한 답변을 아직 안 읽어 보신 듯 하여 확인 부탁드립니다. :-)

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.