DOM Interview Questions

try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 3795010) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } Sivakumar Mathiyalagan Posted on Apr 28 DOM Interview Questions #beginners #javascript #interview #webdev What is DOM? DOM(Document Object Model)is a programming interface that represents a web page as a tree-like structure using DOM JavaScript make the html and css to behave dynamic In this DOM each HTML element is an Object that can be accessed and manipulated How to access an Element using DOM? document.getElementById("myElement"); // Select by ID document.getElementsByClassName("myClass"); // Select by Class document.getElementsByTagName("p"); // Select by Tag Name document.querySelector(".myClass"); // Select First Matching Element document.querySelectorAll(".myClass"); // Select All Matching Elements document is an object (the whole webpage is the document) Note: can be verified as when html file is created the default title is Document An element in object can be accessed using DOT operator so (".") after document is used to call the methods inside of object document listed methods like getElementById("myElement"); getElementsByClassName("myClass"); getElementsByTagName("p"); querySelector(".myClass"); querySelectorAll(".myClass"); are some of the methods available in document to access the exact element in HTML const element = document.getElementById("myElement"); element.innerText = "Welcome"; here myElement is itself an object that was stored in variable "element" so now the object name of the "myElement" is "element" by using this object name now the values inside can be modified innerText is a key that is inside the object myElement(element) its value is now being modified What is event in Javascript? Events are actions that occur in the browser, such as clicks, key presses, or page loads. JavaScript can listen for these events and execute functions when they occur How do you create and append a new element dynamically? JavaScript allows you to create and append new elements dynamically using the Document Object Model (DOM) methods document.createElement(): Creates a new element node of the specified type (e.g., div, p, button).(TBD) element.textContent / innerHTML: Lets you add text or HTML content inside the newly created element.(TBD) parent.appendChild() / parent.append(): Appends the new element to a parent node in the DOM, making it visible on the page.(TBD) Top comments (0) Subscribe Personal Trusted User Create template Templates let you quickly answer FAQs or store snippets for re-use. Submit Preview Dismiss Code of Conduct • Report abuse Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse

This excerpt is published under fair use for community discussion. Read the full article at DEV Community.