100 Most Frequently Asked JavaScript Interview Questions and Answers-Part 2 of 10

100 Most Frequently Asked JavaScript Interview Questions and Answers-Part 2 of 10

100 most frequently asked JavaScript interview questions and answers-part 2


Question 11. What is DOM?

answer:

  • DOM stands for Document Object Model, which is an interface (API) for HTML and XML documents.
  • When a browser reads (parses) an HTML document for the first time, it creates a large object. The real large object based on the HTML document is the DOM.
  • It is a tree structure modeled from HTML documents.
  • DOM is used to interact and modify the DOM structure or specific elements or nodes.
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document Object Model </title > </head > < body> < Div > < P > < span > </span > </P > < label > </label > < INPUT > //OTHER Elements </div > </body > </HTML > copy the code

The graphical representation of the DOM of the above code is similar to

The document object in JavaScript represents the DOM.

It provides us with many methods that can be used to select elements to update their content.

  • JavaScript can change all HTML elements in the page
  • JavaScript can change all HTML attributes in the page
  • JavaScript can change all CSS styles in the page
  • JavaScript can delete existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page

Question 12. Please explain the difference between attributes and properties?

answer:

  • JS DOM object
    property
    Similar to instance variables of specific elements.
  • property
    It can be of various data types.
  • By interacting with objects in Vanilla JS or using jQuery's prop() method, you can access
    property
    .
  • attributes
    Located in HTML, not in the DOM.
  • attributes
    Similar to
    property
    , But not as powerful as its function.
  • If you can use
    property
    , It is recommended to use
    property
    Instead of
    attribute
    . versus
    property
    different,
    attribute
    Is a string data type

Question 13. What is a cookie? How will you use JavaScript to create, read and delete cookies?

answer:

  • Cookies are just data sent from a website, usually very small data, and stored on the user's computer through the web browser used to access the website.
  • This is a reliable way for websites to remember status information and record user browsing activities.

Create a cookie:

The most basic way to create a cookie using JS is to assign a string value to the document.

document .cookie = "key1 = value1; key2 = value2; ; keyN = valueN; expires = date"; Copy code

Read Cookie:

  • Use JS to read
    cookie
    It's as simple as creating.
  • Cookies
    Object is
    cookie
    , As long as you want to visit
    cookie
    , Just use this string.
  • The
    document.cookie
    String keeps a pair
    name = value
    List, where a semicolon separates each pair.
  • The name represents the name of a cookie, and value represents the string value of the respective cookie.
  • To divide a string into keys and values, you can use the split() method.

Delete cookies:

  • Just set the expiration date to a time that has passed.
  • Some web browsers do not allow you to delete cookies unless you do not specify the path of the cookie.
  • Therefore, defining the cookie path is essential for ensuring the correct cookie is
    deleted.assign
    The string value of the document is important.

Question 14. What is event propagation?

answer:

  • When an event occurs on a DOM element, the event does not completely occur on that element.
  • In the "bubbling phase", the event bubbles or propagates up to the parent, grandparent, and grandfather's parent until it reaches the window; while in the "capture phase", the event starts from the window and goes down until the element event is triggered or event.target.
  • This process is called event propagation.
  • It is divided into three stages.
    1.
    Capturing Phase
    -The event starts from the window and then descends to each element until it reaches the target element.
    2.
    Target Phase
    The event has reached the target element.
    3.
    Bubbling Phase
    -The event bubbles from the target element and then rises to each element until it reaches the window.

Question 15. What is event bubbling?

Answer:
When an event occurs on a DOM element, the event does not completely occur on that element.

in

Bubbling Phase
In the middle, the event bubbles up, or reaches the parent, grandparent, or grandfather s parent until it reaches the window.

If we have an example tag like this

< div class = "grandparent" > < div class = "parent" > < div class = "child" > 1 </div > </div > </div > Copy code

And javascript code.

function addEvent ( el, event, callback, isCapture = false ) { if (!el || !event || !callback || typeof callback !== 'function' ) return ; if ( typeof el === 'string' ) { el = document .querySelector(el); }; el.addEventListener(event, callback, isCapture); } addEvent( document , 'DOMContentLoaded' , () => { const child = document .querySelector( '.child' ); const parent = document .querySelector( '.parent' ); const grandparent = document .querySelector( '.grandparent' ); addEvent(child, 'click' , function ( e ) { console .log( 'child' ); }); addEvent(parent, 'click' , function ( e ) { console .log( 'parent' ); }); addEvent(grandparent, 'click' , function ( e ) { console .log( 'grandparent' ); }); addEvent( document , 'click' , function ( e ) { console .log( 'document' ); }); addEvent( 'html' , 'click' , function ( e ) { console .log( 'html' ); }); addEvent( window , 'click' , function ( e ) { console .log( 'window' ); }); }); Copy code
  • The
    addEventListener()
    The method has a third optional parameter useCapture, its default value is false, the event will be
    Bubbling phase
    Occurred in.
  • in case
    useCapture
    Yes
    true
    , The event will be
    Capturing Phase
    Occurred in.
  • If you click on the child element, it will
    child, parent, grandparent, html, document and window
    Recorded on the console respectively.
  • This whole incident is incident bubbling.

Question 16. What is event capture?

Answer:
When an event occurs on a DOM element, the event does not completely occur on that element.
In the capture phase, the event starts from the window to the element that triggered the event.

If we have an example tag like this

< div class = "grandparent" > < div class = "parent" > < div class = "child" > 1 </div > </div > </div > Copy code

And the JavaScript code is

function addEvent ( el, event, callback, isCapture = false ) { if (!el || !event || !callback || typeof callback !== 'function' ) return ; if ( typeof el === 'string' ) { el = document .querySelector(el); }; el.addEventListener(event, callback, isCapture); } addEvent( document , 'DOMContentLoaded' , () => { const child = document .querySelector( '.child' ); const parent = document .querySelector( '.parent' ); const grandparent = document .querySelector( '.grandparent' ); addEvent(child, 'click' , function ( e ) { console .log( 'child' ); }, true ); addEvent(parent, 'click' , function ( e ) { console .log( 'parent' ); }, true ); addEvent(grandparent, 'click' , function ( e ) { console .log( 'grandparent' ); }, true ); addEvent( document , 'click' , function ( e ) { console .log( 'document' ); }, true ); addEvent( 'html' , 'click' , function ( e ) { console .log( 'html' ); }, true ) addEvent( window , 'click' , function ( e ) { console .log( 'window' ); }, true ) }); Copy code
  • The
    addEventListener()
    The method has a third optional parameter
    useCapture
    , Its default value is false, the event will be
    Bubbling phase
    Occurred in.
  • in case
    useCapture
    Yes
    true
    , The event will be
    Capturing Phase
    Occurred in.
  • If you click on the child element, it will
    window, document, html, grandparent, parent and child
    Recorded on the console respectively.
  • This whole event is event capture

Question 17. Explain the difference between event.preventDefault() and event.stopPropagation() methods?

answer:

  • event.preventDefault()
    The method prevents the default behavior of the element.
  • If used in a form element, it will prevent its submission.
  • If used in an anchor element, it will prevent its navigation.
  • If used in a context menu, it will prevent its display or display.
  • when
    event.stopPropagation()
    When the method stops the propagation of the event.
  • It prevents the event from occurring during the bubbling or capturing phase.

Question 18. How do I know if event.preventDefault() method is used in the element?

answer:

  • We can use the event.defaultPrevented property in the event object.
  • It returns a boolean indicating whether to call in a specific element
    event.preventDefault()
    .

Top

Question 19. What is Closure (closure)?

answer:

  • Whenever a variable defined outside the current scope is accessed from an internal scope, it will be created
    Closures
    .
  • It allows us to access the scope of the external function from the internal function.
  • In other words, a closure is a locally declared variable related to a function, and it remains in memory when the related function returns.
  • The closure contains all the local variables that were in scope when the closure was created.
  • In JavaScript, a closure is created every time a function is created. To use closures, just define a function in another function and make it public.

Let's see an example

Without Closure

function greet ( message ) { console .log(message); } function greeter ( name, number ) { return name + "says Hey!! He has" + age + "subscribers" ; } var message = greeter( "Tech Talks" , 1026 ); greet(message); Copy code

With Closure

function greeter ( name, age ) { var message = name + "says Hey!! He has" + age + "subscribers" ; return function greet () { console .log(message); }; } //Generate the closure var TechTalksGreeter = greeter( "Tech Talks" , 1026 ); //Use the closure TechTalksGreeter(); Copy code

Question 20. How many ways can you create an array in JavaScript?

Answer:
There are three ways to create an array using JavaScript:

  • By creating an instance of the array:
var someArray = new new the Array (); duplicated code
  • Through the array constructor:
var someArray = new new the Array ( 'VALUE1', 'value2', ..., 'valueN') copying the code
  • By using array literals:
var someArray = [value1, value2, ., valueN]; Copy code

Thank you for reading this blog post and hope it will be helpful to you. I will update Part 3-10 of the series soon. I will keep updating at least one article every day, follow me, or or to collect this article, I will put the follow-up article link at the end of this article.

Save or long press to identify the official account of the following author

La la la I really want to order something


In the future, I will continue to update similar free and fun H5 mini games, Java mini games, front-end basic knowledge, fun and practical projects and software, etc.

Finally, don t forget to support it or

related information

The 100 Most Frequently Asked JavaScript Interview Questions and Answers-Part 1 The
100 Most Frequently Asked JavaScript Interview Questions and Answers-Part 3