Below we are creating a JavaScript utility that fully supports the functionality of the DOM (like appendChild, removeChild, etc.) in Microsoft Edge and other modern browsers involves wrapping standard DOM methods in a utility class for easier access. Below is a utility library that includes core DOM functionalities
Key Features
- appendChild: Add a new child element
- .removeChild: Remove an existing child element
- .replaceChild: Replace an old child with a new one.
- Provides on and off for attaching and detaching events.
- attr, addClass, and removeClass simplify attribute and class manipulation.
- Methods also return the instance for chaining multiple operations
To ensure that every time you create an object of getDOMFORChrome, a new instance is created, you can use a constructor function (or a class) that encapsulates the functionality. Each instance will have its own methods and properties, independent of other instances.
var getDOMFORChrome = function () {
// Constructor function to initialize the instance
function DOMUtils() {
// Instance-specific properties can be added here if needed
}
// Define methods for the DOMUtils object
DOMUtils.prototype = {
select: function (selector) {
return document.querySelectorAll(selector);
},
createElement: function (tagName, attributes = {}, innerHTML = "") {
var element = document.createElement(tagName);
for (var key in attributes) {
element.setAttribute(key, attributes[key]);
}
element.innerHTML = innerHTML;
return element;
},
appendChild: function (parent, child) {
if (typeof parent === "string") {
parent = document.querySelector(parent);
}
if (typeof child === "string") {
child = document.createElement(child);
}
if (parent && child) {
parent.appendChild(child);
}
},
removeChild: function (parent, child) {
if (typeof parent === "string") {
parent = document.querySelector(parent);
}
if (typeof child === "string") {
child = document.querySelector(child);
}
if (parent && child && parent.contains(child)) {
parent.removeChild(child);
}
},
replaceChild: function (parent, newChild, oldChild) {
if (typeof parent === "string") {
parent = document.querySelector(parent);
}
if (typeof newChild === "string") {
newChild = document.createElement(newChild);
}
if (typeof oldChild === "string") {
oldChild = document.querySelector(oldChild);
}
if (parent && newChild && oldChild && parent.contains(oldChild)) {
parent.replaceChild(newChild, oldChild);
}
},
on: function (selector, event, handler) {
var elements = document.querySelectorAll(selector);
elements.forEach(function (element) {
element.addEventListener(event, handler);
});
},
off: function (selector, event, handler) {
var elements = document.querySelectorAll(selector);
elements.forEach(function (element) {
element.removeEventListener(event, handler);
});
},
attr: function (selector, name, value) {
var elements = document.querySelectorAll(selector);
if (value === undefined) {
return elements[0]?.getAttribute(name) || null;
}
elements.forEach(function (element) {
element.setAttribute(name, value);
});
},
html: function (selector, value) {
var elements = document.querySelectorAll(selector);
if (value === undefined) {
return elements[0]?.innerHTML || "";
}
elements.forEach(function (element) {
element.innerHTML = value;
});
},
text: function (selector, value) {
var elements = document.querySelectorAll(selector);
if (value === undefined) {
return elements[0]?.textContent || "";
}
elements.forEach(function (element) {
element.textContent = value;
});
},
};
// Return a new instance every time
return function () {
return new DOMUtils();
};
}();
Key Features
- Instance-Based: Every call to
getDOMFORChrome()creates a new instance ofDOMUtilswith no shared state. - Encapsulation: Methods and properties are encapsulated within each instance.
Usage
You can create multiple independent objects, each with its own methods:
var dom1 = getDOMFORChrome();
var dom2 = getDOMFORChrome();
// Use dom1
var newDiv = dom1.createElement("div", { class: "example" }, "Hello, dom1!");
dom1.appendChild("body", newDiv);
// Use dom2
var span = dom2.createElement("span", { id: "unique" }, "Hello, dom2!");
dom2.appendChild("body", span);
// dom1 and dom2 are independent
console.log(dom1 === dom2); // false
Explanation
- Constructor Function:
DOMUtilsacts as a blueprint for each object. - Factory Pattern: The outer
getDOMFORChromefunction wraps the constructor to ensure a new instance is always returned. - Instance Independence: Each object created by
getDOMFORChromehas its own state and does not share methods or properties with other instances.
After use how to remove these objects from memory to make our code execution faster
To remove unused objects and improve memory management in JavaScript, you generally rely on the JavaScript engine’s garbage collection mechanism. However, you can aid this process by explicitly removing references to objects when they are no longer needed. Here’s how you can manage memory effectively:
Explicitly Nullify References
When you’re done using an object, set its reference to null or undefined so the garbage collector can reclaim the memory.
var dom1 = getDOMFORChrome();
// Perform operations with dom1
dom1.appendChild("body", document.createElement("div"));
// Done with dom1
dom1 = null; // Remove the reference