SK S&T

JS Bootcamp Session3
DOM Manipulation

Contents

1. Introduction to the DOM:

• Briefly explain what the DOM is and its role in web development.
• Discuss the tree-like structure of the DOM, where each HTML
element is represented as a node.
2. Accessing DOM Elements:
• Explain various methods to access DOM elements, such as
getElementById, getElementsByClassName, getElementsByTagName,
and querySelector.
• Discuss the difference between live and static node lists.
3. Modifying HTML Content:
• Show how to change the content of HTML elements using the
innerHTML and textContent properties.
• Discuss the importance of sanitizing user input to prevent XSS
(Cross-Site Scripting) attacks.
4. Modifying Element Attributes:
• Explore how to change attributes like src, href, and class using
JavaScript.
• Introduce the setAttribute and removeAttribute methods.
5. Manipulating CSS with JavaScript:
• Demonstrate how to change the style of elements using
JavaScript.
• Discuss the style property and the classList object.
6. Creating and Appending Elements:
• Show how to create new HTML elements with
document.createElement.
• Discuss appending, inserting, and removing elements.

Js boot session3
SK S&T

7. Handling Events:
• Introduce event handling with JavaScript.
• Cover common events like click, mouseover, and submit.
• Discuss event propagation.
8. Best Practices:
• Discuss best practices for efficient and maintainable DOM
manipulation code.
• Emphasize the importance of performance considerations.
9. Q&A and Recap:
• Allow participants to ask questions.
• Summarize key concepts covered during the workshop.

Js boot session3
SK S&T

Introduction to the DOM:

• Dom( Document Object Model) is a programming interface for
web development.
• It represents the document as a tree of objetcs.
• In the DOM, every part of an HTML document, including elements,
attributes, and text content, is represented as nodes.

• JavaScript is the language most commonly used to interact with the

DOM.
• By using JavaScript, developers can traverse the DOM, locate
elements, modify their content and attributes, or remove them.

Accessing DOM Elements:

1. Methods to Access DOM Elements:

• getElementById:

• Used to retrieve an element by its unique ID.

• Example: document.getElementById('myElement')

Js boot session3
SK S&T

• getElementsByClassName:

• Retrieves elements by their class name.

• Returns a live HTMLCollection.

• Example: document.getElementsByClassName('myClass')

• getElementsByTagName:

• Fetches elements by their tag name.

• Returns a live HTMLCollection.

• Example: document.getElementsByTagName('p')

• querySelector:

• Returns the first element that matches a specified CSS selector.

• Example: document.querySelector('#myId .myClass')

2. Live vs. Static Node Lists:

• Live Node List:

• Automatically updates when the document changes.

• Reflects the current state of the document.

• Ideal for dynamic content or when elements may be added or removed.

• Static Node List:

• Does not update when the document changes.

• Represents a snapshot of the document at the moment the list was

created.

• More efficient when the document is not expected to change.

Js boot session3
SK S&T

3. Example Usage:

// Represents the number of elements with class 'myClass' when the list was created

// Represents the number of elements with class 'myClass' when the list was created

2. Changing Content with innerHTML and textContent :

Explanation:

innerHTML sets or gets the HTML content within an element.

textContent sets or gets the text content within an element, treating content as plain
text.

Js boot session3
SK S&T

Attention :

• User input should be sanitized to prevent Cross-Site Scripting (XSS) attacks.

• XSS attacks involve injecting malicious scripts into a web application, often
through user inputs.
• A sanitizer function, like the hypothetical sanitizeInput, should be used to
clean user input.
• Libraries such as DOMPurify help prevent XSS by removing or neutralizing
potentially harmful elements and attributes.

4. Changing Attributes with setAttribute and removeAttribute:

Js boot session3
SK S&T

Explanation:

• setAttribute is used to change or add attributes to an HTML element.

• removeAttribute is used to remove attributes from an HTML element.
• Attributes like src, href, and class can be modified using these methods.

5. Manipulating CSS with JavaScript:

Explanation:

• The style property allows you to directly manipulate the inline CSS of an
element.
• classList provides methods like add and remove to manipulate the classes of
an element.
• By changing classes, you can apply predefined styles or toggle between
different styles.

Js boot session3
SK S&T

6. Creating and Appending Elements:

Explanation:

• document.createElement is used to create a new HTML element.

• appendChild is used to append a child element at the end of a parent
element's list of children.
• insertBefore allows you to insert an element before a specified child
element.
• removeChild is used to remove a specified child element from its
parent.

Js boot session3
SK S&T

7. Handling Events:

Understanding Events:

Events are occurrences or interactions that happen in the browser, such as a user
clicking a button, submitting a form, or moving the mouse. JavaScript allows us to
listen for these events and execute specific code in response.

Types of Events:

Click Event:

• Triggers when a user clicks an element.

Mouseover Event:

• Triggers when the mouse moves over an element.

Submit Event:

• Triggers when a form is submitted.

Js boot session3
SK S&T

While the examples provided cover common events, there are many more
event types you might encounter. Some examples include:

Key Events:
• Triggered when a user presses or releases a key.
Change Event:
• Fired when the value of an input element changes.
Resize Event:
• Occurs when the size of the browser window changes.
Example :

Explanation:
• addEventListener is used to attach an event handler to an element. It takes the
event type and a callback function as parameters.
• Common events include click, mouseover, submit, etc.
• The event object (event) passed to the callback contains information about the
event and methods like preventDefault() to prevent the default behavior.

Js boot session3