Conversation

Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0

Sharpen your coding skills—try JavaScript challenges on TOOLX now!

advertisement

Relation Between DOM and JavaScript

Relation Between DOM and JavaScript

DOM & JavaScript

Although JavaScript and DOM are separate entities, they are closely related. DOM is essential for JavaScript because it helps identify HTML documents, XML documents, web pages, and associated components. These components include the document header, tables, table headers, and table content, which are part of the DOM.


1. New Features in JavaScript DOM

Lists some of the new declaration keywords introduced in JavaScript.

  • Const: This means the identifier cannot be reassigned. One should use const to declare objects, arrays, or functions.
  • let: Helps in reassigning variables.
  • Var: Mostly used for Block Scope. Any variable declared within {} is out of scope.


2. Arrow Functions

Arrow functions are a mechanism used to create functions simply. They must be defined before they are used.

How a function used to be created in earlier versions of JavaScript.

function myFunction(argA, argB, argC) {
  /*
  Write the steps of the code here
  */
}

Use the arrow function

const myFunction = (argA, argB, argC) => {
  // Function body goes here
};

Arrow functions are especially useful when working with functions that require another function as an argument. 

document.addEventListener("DOMContentLoaded", function() {
  console.log("loaded");
});

Using the Arrow function

document.addEventListener("DOMContentLoaded", () => {
  console.log("loaded");
});


3. For Of Loop

The for of loop statement creates a loop that repeats over iterable objects, such as arrays, maps, strings, and more.

for (variable of iterableObject) {
  // code to be run
}

Consider some examples.

a. Looping Over an Array

const webFrameworks = ["React", "JavaScript", "Node.js"];
let text = "";
for (let x of webFrameworks) {
  text += x;
}
console.log(text);


b. Looping over a String

const line = "This is a line";
let text = "";
for (let x of line) {
  text += " ' " + x + " ' ";
}
console.log(text);


JavaScript DOM Document object model relation between dom and javascript new features in javascript DOM Arrow Functions in JavaScript Arrow Functions For of loop in javaScript For of loop

advertisement