Simple program to manipulate DOM elements.
I always think in performance for everything, so for the Background change, I only used one call for the math library and took advantage of bitwise operations to make the function more efficient.
You can run the benchmark in your browser's console. By calling runBenchmark(NUM_INTERACTIONS)
The Document Object Model (DOM) is a programming interface for HTML and XML documents.
document.getElementById("myId"): by ID.elements = document.getElementsByClassName("myClass"): by class name.elements = document.getElementsByTagName("HTML_TAG"): by tag name.elements = document.getElementsByName("name"): by attribute name.element = document.querySelector("#myId | .myClass | HTML_TAG | [attribute='value'] | HTML_TAG.myClass ..."): by CSS selector.elements = document.querySelectorAll("#myId | .myClass | HTML_TAG | [attribute='value'] | HTML_TAG.myClass ..."): by CSS selector.QuerySelector can be used not only as a document method but also on any element to find descendants matching the selector. Ex: p.querySelector("span")
textContent returns only the text of the element.
innerText returns the visible text content of an element, taking into account CSS styles and hidden elements.
innerHTML returns the full html content, you can assign HTML content to it as well. ex: <b>Bold Text</b>
You can change CSS properties of an element using the style property.
Example:element.style.backgroundColor = "red";
Note: CSS property names are camelCased in JavaScript.
background-color becomes backgroundColor.
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them.
Example of an event listener:
element.addEventListener("click", function() {
alert("Element clicked!");
});
Note: you can see what examples exists by going in the HTML TAG and writing "on.." (onmouseover, onclick, onkeydown, etc.)
when you want to pass the element to a event(element) function it needs to be done like this:
element.addEventListener("click", () => myFunction(element));
or on the HTML element directly: <button onclick="myFunction(this)">Click me</button>