I have a question about the code you wrote in the 4-14 lecture.

Hello, Sungwon. This is Yamoo. :-)

context.nodeType!== document.ELEMENT_NODE other than the condition expression context.nodeType === document.ELEMENT_NODE You asked me if it should be a conditional expression. I answer your question.

The code was as follows.

function els(selector, context) {

  // Returns a result value null if the selector type is non-character, or the length of the selector space removed is 0
  if (typeof selector !== 'string' || selector.trim().length === 0) { return null; }

  // If context value exists and node type is not element node (1)... Refers to a document object through an el() function in the context variable.
  if (context && context.nodeType !== document.ELEMENT_NODE) { context = el(String(context)); }

  // If the context value is undefined and null, refer to the document value for context.
  if (!context) { context = document; }

  return context.querySelectorAll(selector);

}

Let's take an example of els() function utilization first.

// When NodeList is collected as CSS selector
var lis = els('li');

// When NodeList is collected by delivering CSS selector and context factors
var gnb_links = els('a', '.gnb');

// NodeList is collected by passing the DOM element to the context factor
var scripts = els('script', document.head);

So let's look at the conditional statements of the question.

As an AND condition, context must exist, and the context.nodeType value must not be of the document.ELEMENT_NODE type, so the condition will be true.

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

So let's look at the first example phrase.

var lis = els('li');

Since there is no context factor passed, it is treated as undefined. The condition is false, and the code block is not executed. Instead, the conditional statement below is executed. This means that context = document will find the target object in the document and return the value. (No Problem)

if (!context) { 
  context = document; 
}

Let's move on to the second example phrase.

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

The passed context factor is the character value .Under AND conditions with gnb, the context condition is true. If you look at the rest of the conditions, the context.nodeType value will be undefined. The reason is that The passed data type is a character value and is not a DOM object.

'.gnb'.nodeType // undefined

So the second condition is also true.

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

In other words, this condition is valid.

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

All conditions are true, so the code block is executed. context value We'll pass gnb to the el() function and assign the found target to context. The context variable will refer to the found document object and the code will work well. (No Problem)

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

Then what? What will happen if the condition is changed as follows?

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

The context.nodeType value is undefined because the passed data type is not a DOM object as a character value. So the second condition is false.

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

Then, the code block below will not be executed because it is finally true and false.

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

Since the above condition code block has not been executed, context will remain undefined, and the condition will be reviewed in the following conditional statement. Because the condition is !context, it becomes true and the code block is executed.

if (!context) { 
  context = document; 
}

Eventually, document reaches the result of retrieving the target. It's not what I expected. .Because the target was not found in gnb.

You must create a context&&context.nodeType!== document.ELEMENT_NODE to collect document objects as you expect. :-)

P.S

This is a question about <img> tag properties you asked 1 month ago.I think you haven't read the answer to