Full Stack Development - Assignment 2 Answers
1. Explain all the methods in DOM in detail with example.
The DOM (Document Object Model) provides several methods to interact with the HTML
elements:
- getElementById("id"): Selects an element by its ID.
Example: document.getElementById("header");
- getElementsByClassName("class"): Returns a collection of elements with the given class
name.
Example: document.getElementsByClassName("menu-item");
- getElementsByTagName("tag"): Returns all elements with the specified tag name.
Example: document.getElementsByTagName("li");
- querySelector("selector"): Returns the first element that matches a CSS selector.
Example: document.querySelector(".highlight");
- querySelectorAll("selector"): Returns a static NodeList of all elements that match a CSS
selector.
Example: document.querySelectorAll("div.note");
- createElement("tag"): Creates a new HTML element.
Example: var p = document.createElement("p");
- appendChild(child): Appends a child node to a parent node.
Example: document.body.appendChild(p);
- removeChild(child): Removes a child node.
Example: document.body.removeChild(p);
- setAttribute("attr", "value"): Sets the value of an attribute.
Example: p.setAttribute("class", "text-bold");
- getAttribute("attr"): Gets the value of an attribute.
Example: p.getAttribute("class");
- addEventListener("event", function): Attaches an event handler to an element.
Example: p.addEventListener("click", function() { alert("Clicked!"); });
2. Explain different approaches to adding and removing content from DOM
tree.
There are two main approaches:
- Using innerHTML:
Example to add: document.getElementById("demo").innerHTML = "<p>New
Paragraph</p>";
Example to remove: document.getElementById("demo").innerHTML = "";
- Using DOM manipulation methods:
Example to add:
var p = document.createElement("p");
var text = document.createTextNode("New Text");
p.appendChild(text);
document.body.appendChild(p);
Example to remove:
var p = document.getElementById("demo");
p.parentNode.removeChild(p);
3. Explain the two steps for accessing and updating attribute nodes with
example.
Two steps are:
1. Select the element node.
Example: var img = document.getElementById("logo");
2. Use methods/properties:
- getAttribute("src"): img.getAttribute("src");
- setAttribute("alt", "New Logo"): img.setAttribute("alt", "New Logo");
- removeAttribute("title"): img.removeAttribute("title");
- hasAttribute("src"): img.hasAttribute("src");
4. Explain different types of events in detail.
Events in browsers are actions like:
- Mouse Events: click, dblclick, mouseover.
- Keyboard Events: keydown, keyup.
- Form Events: submit, focus, blur.
- Window Events: load, resize, scroll.
- Clipboard Events: copy, cut, paste.
- Drag and Drop Events: dragstart, dragover, drop.
Example for Mouse Event:
element.addEventListener("click", function() { alert("Clicked!"); });
5. Explain three ways of binding an element with example.
Three ways are:
- HTML Event Attributes:
Example: <button onclick="alert('Clicked!')">Click Me</button>
- Traditional DOM Event Handlers:
Example:
document.getElementById("btn").onclick = function() { alert("Clicked!"); };
- Event Listeners:
Example:
document.getElementById("btn").addEventListener("click", function()
{ alert("Clicked!"); });
6. Explain four components of MERN stack in detail.
- MongoDB: NoSQL database storing flexible documents.
- Express.js: Web framework for handling routes and HTTP requests.
- React: Library for building user interfaces with components.
- Node.js: JavaScript runtime for server-side code.
Example:
Frontend sends form data to Express, Express saves it in MongoDB, React shows it in the UI.
7. What are the key features of React classes?
Key features:
- Extends React.Component.
- Must have a render() method returning JSX.
- Can manage internal state using this.state.
- Use lifecycle methods like componentDidMount().
Example:
class Welcome extends React.Component {
render() { return <h1>Hello, {this.props.name}</h1>; }
}
8. Write a note on issue tracker.
Issue Tracker is a CRUD application that:
- Adds, updates, deletes, filters issues.
- Each issue has title, owner, status, dates, effort estimate.
- Used in tools like GitHub Issues and Jira.
Example:
New issue - Title: 'Login Bug', Status: 'Open', Owner: 'Dev1'
9. Write a note on React components.
React components are reusable parts of UI.
- Function Components: simple.
- Class Components: have state and lifecycle.
- Props are inputs, State is internal data.
Example:
function Greet(props) { return <h1>Hello, {props.name}</h1>; }
10. Explain server-less hello world using react components.
Server-less Hello World involves:
- Including React and ReactDOM via CDN.
- Using React.createElement() and ReactDOM.render().
Example:
ReactDOM.render(React.createElement('h1', null, 'Hello World!'),
document.getElementById('root'));
11. Write a note on mutation events and observers.
- Mutation Events (deprecated): Detected DOM changes but slow.
- Mutation Observers (modern): Efficiently observe DOM changes.
Example:
const observer = new MutationObserver((mutations) => { console.log(mutations); });
observer.observe(document.body, { childList: true, subtree: true });
