Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript DOM javascript

Arthi

New Coder
Hi, Its very complicate to learn about DOM js .I have gone througgh so many learning platforms but even am not so clear about concepts. Can anyone pls share detailed explanation about DOM . below example not understanding

JavaScript:
const setupToggleClassButton = function (buttonId, className) {
  const mainElement = document.querySelector("main");
  const toggleClass = function () {
    mainElement.classList.toggle(className);
  };
  const button = document.querySelector(buttonId);
  button.addEventListener("click", toggleClass);
};
 
There is no dom js. The dom is a standard that is created from HTML. You could call it the html dom. This line is stolen from w3schools:
"In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements."

The script you included is listening to the button with an id of buttonid. When it is clicked the object represented by classname changes it's class. What it becomes depends on the css
 
I couldn't understand the concept particularly this line (mainElement.classList.toggle(className); what actually they are saying here.
think of it this way... every time you see .toggle(), whatever is in the parenthesis is going to either be applied to (if not already there), or removed from (if already there) to the element you are calling the method on...kind of like an on/off switch. So in this case, className is going to get applied/removed to/from the classList of the mainElement.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom