domManager.update

[lindelwa122]

domManager.update

domManager

The domManager module is responsible for creating, updating, reading, and deleting DOM elements.

update()

The update() function is responsible for modifying information and attributes of elements in the DOM. It allows actions such as toggling className, adding a class to classList, updating id, and modifying certain attributes.

Parameters/Inputs:

• instruction: object

The function takes in an object containing instructions on how an element should be modified. The structure of this object is as follows:

{
    selector: ".content > div",
    action: "toggle",
    className: "active"
}

The selector and action properties are required. If either of them is missing, the function should throw an error. Depending on the action, additional properties may be required, and if they are missing, the function should also throw an error.

Here's another example demonstrating the use of update() to replace items:

{
    selector: ".content > div",
    action: "replace",
    newClassName: "active",
    oldClassName: "disabled"
}

The values after the keywords new and old should be valid attributes; otherwise, an error should be thrown.

An action of update should be capable of modifying all valid attributes that the elements might have. For example, you can update innerHTML with the following object:

{
    selector: ".content > div",
    action: "update",
    innerHTML: "<p>New Text</p>"
}

The update() function should be able to update children of the selected element and other properties. Children are expected to be objects and should be created using _createElement(). For example:

{
    selector: ".content > div",
    action: "update",
    children: [
        {
            tagName: "div",
            options: { classList: ["nv-graph", "active"], style: { color: "red" } }
        }
    ]
}

Although this approach is valid, it's advisable for developers to use domManage.create() to create or append new children.

update() should be able to modify all valid attributes of an element such as id, textContent, value, dataset, etc.

Two more accepted action values are add and remove. These should add or remove specific values from attributes or properties of an element. For example, 'add' should add a specified className to the classList, and remove should remove a specified className from the classList.

add should work for other properties as well, like innerHTML, value, and more. The key difference between add and update is that update removes the old content while add doesn't.

remove should remove specified values from properties, but this may not work for all properties. For example, you cannot remove a certain paragraph from innerHTML using remove. The remove action will have more constraints than others, and these constraints should be clearly documented.

The accepted actions are: toggle | replace | update | add | remove. The function should return an error if the action is not one of the accepted actions. Note that certain actions will have more constraints than others, for example, remove and toggle. These constraints should be thoroughly documented in the function's documentation.

Given the complexity and functionality of the function, it's essential to carefully consider how each component will operate. Additionally, creating private helper functions is necessary to achieve all the required and expected functionalities.