I have a question It's not a grammatical question
Among the codes you wrote in the lecture
function els(selector , context){
// It is not a character of the selector type, or the length of the selector space removed is 0
// Return result value null
if(typeof selector !== 'string' || selector.trim().length === 0){ return null; }
// If the context value exists and the node type is not element node (1)... In the context variable,
// Refer to document objects through the el() function
if(context && context.modeType !== document.ELEMENT_NODE){
context = el(String(context));
}
// If the context value is undefined and null, the context refers to the document value
if(!context){context = document;}
return context.querySelectorAll(selector);
}
Among these,
If the context
value exists and the node type is not element node (1)... In the context
variable,
Refer to document objects through the el()
function
if(context && context.modeType !== document.ELEMENT_NODE){
context = el(String(context));
}
You said context.modeType!== document.ELEMENT_NODE
This part
This is because I thought it was ===
not !==
.
If context
exists and that's an element, doesn't that mean you're looking for it?
For example, $("#id", "div")
Did you implement this?
I think it's a function to find something that is selector
in context
. Then, I think it's ===
Here's a question.
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
© 2024 OneMinuteCode. All rights reserved.