4-14 강의에서 작성하신 코드에 궁금한게 있습니다.
조회수 765회
궁금한게 있습니다 문법적인 질문이 아니라
강의 중에서 작성하신 코드중에
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 답변
-
안녕하세요 성원님. 야무입니다. :-)
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
값인.gnb
를el()
함수에 전달해 찾은 대상을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)); }
위 조건 코드 블록이 실행되지 않았기에
context
는undefined
인 채, 다음 조건문에서 조건을 검토 하겠죠. 조건이!context
이므로 참이 되어 코드 블록이 실행됩니다.if (!context) { context = document; }
결국,
document
에서 대상을 찾아오는 결과에 도달합니다. 기대한 결과와 다르죠..gnb
에서 대상을 찾아온 것이 아니니까요.결론
context && context.nodeType !== document.ELEMENT_NODE
조건으로 작성해야 기대하는데로 문서 객체를 수집할 수 있습니다. :-)P.S
1개월 전에 질문 주신
<img>
태그 속성에 대한 질문입니다.에 대한 답변을 아직 안 읽어 보신 듯 하여 확인 부탁드립니다. :-)-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력