The Document Object Model (DOM) is the structure of a webpage's code. There are many different ways to build and alter HTML elements with JavaScript (called nodes).

• Node Properties:
  • attributes — Gets a live list of all the characteristics associated with an element.
  • baseURI — Returns an HTML element's absolute base URL.
  • childNodes — Returns a list of the child nodes of an element.
  • firstChild — Returns the element's first child node.
  • lastChild — An element's final child node.
  • nextSibling — Returns the next node in the same node tree level as the current node.
  • nodeName — Returns a node's name.
  • nodeType — Returns the node's type.
  • nodeValue — Sets or returns a node's value.
  • ownerDocument — This node's top-level document object.
  • parentNode — Returns the element's parent node.
  • previousSibling — Gets the node that comes before the current one.
  • textContent — Sets or returns a node's and its descendants' textual content.
• Node Methods:
  • appendChild() — Adds a new child node as the last child node to an element.
  • cloneNode() — Duplicates an HTML element.
  • compareDocumentPosition() — Compares two elements' document positions.
  • getFeature() — Returns an object that implements the APIs of a feature.
  • hasAttributes() — Returns true if an element has any attributes; otherwise false.
  • hasChildNodes() — Returns true if an element has any child nodes.
  • insertBefore() — Adds a new child node before an existing child node.
  • isDefaultNamespace() — Returns true if a given namespaceURI is the default.
  • isEqualNode() — Determines whether two elements are the same.
  • isSameNode() — Checks if two references point to the same node.
  • isSupported() — Returns true if the element supports the provided feature.
  • lookupNamespaceURI() — Returns the namespace URI for a specific node.
  • lookupPrefix() — Returns the prefix string for a given namespace URI if present.
  • normalise() — Joins neighbouring text nodes and removes empty text nodes.
  • removeChild() — Removes a child node from an element.
  • replaceChild() — Replaces a child node in an element.
• Element Methods:
  • getAttribute() — Returns the value of an element node's attribute.
  • getAttributeNS() — Returns the string value of an attribute with the namespace and name supplied.
  • getAttributeNode() — Returns the attribute node supplied.
  • getAttributeNodeNS() — Returns the attribute node for the specified namespace and name.
  • getElementsByTagName() — Returns a list of all child elements with the supplied tag name.
  • getElementsByTagNameNS() — Returns a live HTMLCollection of items in the provided namespace with a certain tag name.
  • hasAttribute() — Returns true if an element has any attributes.
  • hasAttributeNS() — Returns true/false depending on whether the element in a namespace has the supplied attribute.
  • removeAttribute() — Removes an element's supplied attribute.
  • removeAttributeNS() — Removes an attribute from an element in a specific namespace.
  • setAttributeNode() — Sets or modifies an attribute node.
  • setAttributeNodeNS() — Sets a new namespaced attribute node to an element.

ECMAScript 5 (ES5): Because it was launched in 2009, ES5 is also known as ECMAScript 2009. It has functions where developers concentrate on how items are created. In ES5, you must use the function keyword and return to define the function, just as you would in any other JavaScript language.

ECMAScript 6 (ES6): Because it was launched in 2015, ES6 is also known as ECMAScript 2015. Its class allows developers to create an object with the new operator and an arrow function. They don't need to use the function keyword to define the function, and can also avoid using the return keyword.

The key differences between ES5 and ES6 are as shown below:

Conclusion:

As a programming language, JavaScript is gaining popularity. Because of its proven track record and benefits, it is becoming the language of choice for developing web applications. JavaScript-based libraries like React, Angular, Nest, etc. are becoming popular due to their ease of use. This article highlights the basic differences between ES5 and ES6 and serves as a quick reference for beginners and experienced developers.

Useful Resources:

• Javascript Interview Questions
• Free JavaScript Online Course
• Javascript Concepts
• 9 Best JavaScript IDE & Editors
• 30+ JavaScript MCQ With Answers
• JavaScript Books
• JavaScript Projects
• JavaScript Frameworks
• JavaScript Libraries
• Difference between TypeScript and JavaScript

Various types of errors occur when we are coding in JavaScript. There are a few options for dealing with them:

• try — We can define a code block for testing errors using the try block.
• catch — We can set up a block of code to execute in the event of an error using the catch statement.
• throw — Instead of the typical JavaScript errors, we can also create custom error messages using the throw statement.
• finally — JavaScript also allows us to run our code regardless of the outcome of try and catch.

JavaScript possesses its own inbuilt error object which has the following properties:

• name — Used for setting or returning an error name.
• message — Used for setting or returning the error message as a string.

There are six types of ways in which the error property can return its name. They are as follows:

• EvalError — Indicates that an error has occurred within the eval() method.
• RangeError — Indicates that some number is “out of range”.
• ReferenceError — Indicates that an illegal reference was made.
• SyntaxError — Indicates that a syntax error occurred.
• TypeError — Indicates that a type error occurred.
• URIError — Indicates that an encodeURI() error occurred.

In JavaScript, memory allocation is done in the following regions:

• Heap memory: Data is stored in random order and memory is allocated accordingly.

• Stack memory: Memory that is allocated in stacks. The majority of the time, it's employed for functions.

The function stack is a function that maintains track of all other functions that are running at the same time. An example to illustrate it is as follows:

function second() {
  console.log("Second")
}
function first() {
  second()
}
function foo() {
  first()
}
foo()

The order in which functions are executed (popped out of the stack once completed) is:

1. console.log
2. second
3. first
4. foo

• Event loop: An event loop pulls tasks like methods out of the queue and places them onto the function execution stack whenever the stack becomes empty. This is how JavaScript appears multithreaded, even though it is single-threaded.

The callback function in the event queue waits until the stack is empty. For example, when setTimeout()is called, the Web API waits. Once the stack is empty, the callback is pushed in:

The event loop always takes the first event from the Event Queue and places it on the stack. In this case, it’s the callback function. If this function calls other functions, they will also follow the same stack process:

A number of Web API features now use asynchronous code for running, especially those that access or fetch a resource from external devices, for instance, retrieving files from the network, accessing some database and returning data to it, accessing a video stream from a webcam, or broadcasting the display to a VR headset.

There are two ways in which asynchronous coding can be done in JavaScript:

• Async Callbacks: When invoking a function, async callbacks are functions that are passed as arguments and begin executing code in the background. When the background code is finished, it runs the callback function to notify you that the work is complete or that anything interesting has occurred.

Callbacks are a little out of date these days, but they're still used in older yet popular APIs. For example, the addEventListener() method:

button.addEventListener('click', () => {
  alert('Button has been clicked!');
  let paraElement = document.createElement('p');
  paraElement.textContent = 'A new paragraph.';
  document.body.appendChild(paraElement);
});

The first parameter specifies the event type, while the second is a callback function executed when the event occurs. When we pass a callback to another function, we’re only passing a reference. It’s executed asynchronously when the containing function decides to call it.

• Promises: Promises are a modern async programming paradigm common in current Web APIs. The fetch() API is a great example:

fetch('items.json')
  .then(function(res) {
    return res.json();
  })
  .then(function(json) {
    let item = json;
    initialise(item);
  })
  .catch(function(e) {
    console.log('Fetch error: ' + e.message);
  });

Here, fetch() returns a promise. A promise represents the success or failure of an async operation, acting like the browser saying: “I promise to respond as quickly as I can.”

Note: Pyramid of Doom, also known as Callback Hell, is an anti-pattern in async code. It happens when callbacks become deeply nested, complicating debugging and code maintenance.

An example of callback hell:

fs.readdir(source, function (error, file) {
  if (error) {
    console.log('Problem occurred while finding file: ' + error);
  } else {
    file.forEach(function (filename) {
      console.log(filename);
      gm(source + filename).size(function (error, value) {
        if (error) {
          console.log('Problem occurred while identifying file size: ' + error);
        } else {
          console.log(filename + ' : ' + value);
          aspect = (values.width / values.height);
          widths.forEach(function (width) {
            height = Math.round(width / aspect);
            console.log('resizing ' + filename + ' to ' + height + 'x' + height);
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(error) {
              if (error) console.log('Problem occurred while writing file: ' + error);
            });
          }.bind(this));
        }
      });
    });
  }
});

Event propagation is a technique that governs how events propagate or travel through the DOM tree to reach their destination, as well as what happens to them once they arrive.

Consider the following scenario: you have given a click event handler to a hyperlink (<a> element) nested inside a paragraph (<p> element). The handler executes if you click the link. However, if you set the click event handler to the paragraph instead, the handler triggers even when the link inside it is clicked.

Because events go up and down the DOM tree to reach their target, they don’t merely affect the element that triggered the event. This is known as event propagation.

When an event is fired on an element with parent elements, the above picture shows how the event travels through the DOM tree at different stages of event propagation. Event propagation in current browsers is divided into two phases: capturing and bubbling.

• The Capturing Phase: In the capturing phase, events propagate from the window down through the DOM tree to the target node.
  Example: If a user clicks a hyperlink, the click event passes through<html>, <body>, and <p> containing the link.
  If any ancestor (parent, grandparent, etc.) or the target itself has a specially registered capturing event listener, those listeners are executed during this phase.
• The Bubbling Phase: From the target element up to the window, the DOM tree visits all ancestors of the target element one by one.
  Example: When a hyperlink is clicked, the event passes via the <p> containing the link, then <body>, <html>, and the document.
  If the target element or any ancestor has event handlers for that event, they run during this phase. By default, all event handlers in modern browsers are registered in the bubbling phase.