The Complete Guide to Becoming a Web Developer: Part 3
Tags: webdev, javascript, tutorial, programming
Published: 2023-06-30 11:52:16

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>Hello there, web development enthusiasts! If you've ever built a website, you've interacted with the Document Object Model (DOM). But what exactly is the DOM, and why is it so crucial in web development? Buckle up, because we're about to dive deep into the fascinating world of the DOM! </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you're new here you can start with <a href="https://nerdleveltech.com/the-complete-guide-to-becoming-a-web-developer-part-1/" target="_blank" rel="noreferrer noopener nofollow">part 1</a> and <a href="https://nerdleveltech.com/the-complete-guide-to-becoming-a-web-developer-part-2/" target="_blank" rel="noreferrer noopener nofollow">part 2</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:rank-math/toc-block {"headings":[{"key":"b5139aa2-f897-4379-b48d-5a7314f0c015","content":"Introduction","level":2,"link":"#introduction","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"f35c0f0c-7cc5-45e8-951d-3dbd3e112f33","content":"Section 1: Understanding the DOM","level":2,"link":"#section-1-understanding-the-dom","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"dae73ee6-ad5f-41d8-a35f-e39b18459e27","content":"What is the DOM?","level":3,"link":"#what-is-the-dom","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"e2d6b3f3-fc87-4540-9313-f3756b34a793","content":"How Does the DOM Work?","level":3,"link":"#how-does-the-dom-work","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"3e988321-f095-4d42-addc-c3429cbd9936","content":"The Role of the DOM in JavaScript","level":3,"link":"#the-role-of-the-dom-in-java-script","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"c8a139c2-52f8-4949-a1cf-49e36a469897","content":"Section 2: Selecting Elements","level":2,"link":"#section-2-selecting-elements","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"981b6197-8ef8-440b-9792-f7b4a39a20d8","content":"querySelector","level":3,"link":"#query-selector","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"e19370ee-4552-4d86-8631-4eba53f00001","content":"querySelectorAll","level":3,"link":"#query-selector-all","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"372593ae-f7b7-4d2e-ae0f-ce590b74ac46","content":"Section 3: DOM Most Important Properties \u0026 Methods","level":2,"link":"#section-3-dom-most-important-properties-methods","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"0331a274-676f-4d30-ab71-1bb470cae628","content":"classList","level":3,"link":"#class-list","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"c8d1ab25-6779-48b8-85ad-981ff553be93","content":"getAttribute() and setAttribute()","level":3,"link":"#get-attribute-and-set-attribute","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"cfd9e2b0-2109-474d-a09d-dd777e1c4acd","content":"appendChild(), append(), and prepend()","level":3,"link":"#append-child-append-and-prepend","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"57c0d368-ab9d-4263-ac83-c1f3478dde0a","content":"removeChild() and remove()","level":3,"link":"#remove-child-and-remove","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"d1d50f34-726a-4de5-93ab-34cfcf0d2252","content":"createElement, innerText, textContent, and innerHTML","level":3,"link":"#create-element-inner-text-text-content-and-inner-html","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"91e3426a-2abf-489d-b1ec-676d1a79e036","content":"value, parentElement, children, nextSibling, previousSibling, and style","level":3,"link":"#value-parent-element-children-next-sibling-previous-sibling-and-style","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"a3ea986a-1e34-4494-8a1a-bc9bca4e4e56","content":"Section 4: Event Handling and Most Common Events in JavaScript","level":2,"link":"#section-4-event-handling-and-most-common-events-in-java-script","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"885d9499-8c43-4be6-9139-e216e6d2600c","content":"What is Event Handling?","level":3,"link":"#what-is-event-handling","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"6f2f6806-435d-4d3e-b776-3c8725238dd5","content":"Common JavaScript Events","level":3,"link":"#common-java-script-events","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"b5465a20-4698-42ea-b0a5-5ab98494f649","content":"Clicks","level":4,"link":"#clicks","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"e0d8872b-77f9-4c95-b76e-6913e04fb242","content":"Drags and Drops","level":4,"link":"#drags-and-drops","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"52175b6d-5490-4fc6-a506-3f6b3fc0cbdd","content":"Hovers","level":4,"link":"#hovers","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"428d6f95-941c-4108-8568-86784e39c163","content":"Scrolls","level":4,"link":"#scrolls","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"6ca30f2c-6be5-4bf4-9a79-c2b75fee790a","content":"Form Submission","level":4,"link":"#form-submission","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"a4df8fb4-a823-4f82-8b2e-43e3b7624b04","content":"Key Presses","level":4,"link":"#key-presses","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"28561f83-78ed-496c-887d-cd8ef3b56d5d","content":"Focus/Blur","level":4,"link":"#focus-blur","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"4f704c9c-9456-4612-a250-2d8d6ea0e77e","content":"Double Click","level":4,"link":"#double-click","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"e25c6294-34af-4ef6-925d-b7b19dbc9783","content":"Section 5: Asynchronous JavaScript and the DOM","level":2,"link":"#section-5-asynchronous-java-script-and-the-dom","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"9f7b58e1-ce35-4ac8-9881-5c3477578d08","content":"Section 6: Common Pitfalls in DOM Manipulation","level":2,"link":"#section-6-common-pitfalls-in-dom-manipulation","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"4c26850c-ab17-452a-9593-5543482e43d8","content":"Pitfall 1: Not Waiting for the DOM to Load","level":3,"link":"#pitfall-1-not-waiting-for-the-dom-to-load","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"1716740d-c16a-4304-b55a-13fa7f540f9d","content":"Pitfall 2: Overusing innerHTML","level":3,"link":"#pitfall-2-overusing-inner-html","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"0fb102e6-3e01-443e-844e-ebe47c93c936","content":"Pitfall 3: Forgetting That NodeList Is Not an Array","level":3,"link":"#pitfall-3-forgetting-that-node-list-is-not-an-array","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"3c5fcc87-2fde-4bfd-a244-7d57a2eaa296","content":"Pitfall 4: Not Properly Handling Event Propagation","level":3,"link":"#pitfall-4-not-properly-handling-event-propagation","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"6b401094-5a64-4003-bab3-3a605711da61","content":"Section 7: Building a Simple To-Do List Project","level":2,"link":"#section-7-building-a-simple-to-do-list-project","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"478b3c6f-6364-4737-ae69-2f502c1990ad","content":"Step 1: Setting Up the HTML","level":3,"link":"#step-1-setting-up-the-html","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"3b7dde30-990a-4b73-bff7-bb062e31c727","content":"Step 2: Adding Tasks","level":3,"link":"#step-2-adding-tasks","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"53784fae-dd17-44aa-8fa7-e56637b5a16d","content":"Step 3: Marking Tasks as Completed","level":3,"link":"#step-3-marking-tasks-as-completed","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"f51284cb-ed64-4954-9ef5-a954edd6fcfc","content":"Step 4: Removing Tasks","level":3,"link":"#step-4-removing-tasks","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"1dec7261-b229-4483-accf-f67d7d32aa3b","content":"Step 5: Add Some Style","level":3,"link":"#step-5-add-some-style","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"e9d7a9d1-c565-47ca-8f95-8c846c66ba91","content":"Conclusion","level":2,"link":"#conclusion","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"3187e912-5dc6-4911-aaec-e91138fa067f","content":"Additional Resources","level":2,"link":"#additional-resources","disable":false,"isUpdated":false,"isGeneratedLink":true}],"listStyle":"ul"} -->
<div class="wp-block-rank-math-toc-block" id="rank-math-toc"><nav><ul><li class=""><a href="#introduction">Introduction</a></li><li class=""><a href="#section-1-understanding-the-dom">Section 1: Understanding the DOM</a><ul><li class=""><a href="#what-is-the-dom">What is the DOM?</a></li><li class=""><a href="#how-does-the-dom-work">How Does the DOM Work?</a></li><li class=""><a href="#the-role-of-the-dom-in-java-script">The Role of the DOM in JavaScript</a></li></ul></li><li class=""><a href="#section-2-selecting-elements">Section 2: Selecting Elements</a><ul><li class=""><a href="#query-selector">querySelector</a></li><li class=""><a href="#query-selector-all">querySelectorAll</a></li></ul></li><li class=""><a href="#section-3-dom-most-important-properties-methods">Section 3: DOM Most Important Properties &amp; Methods</a><ul><li class=""><a href="#class-list">classList</a></li><li class=""><a href="#get-attribute-and-set-attribute">getAttribute() and setAttribute()</a></li><li class=""><a href="#append-child-append-and-prepend">appendChild(), append(), and prepend()</a></li><li class=""><a href="#remove-child-and-remove">removeChild() and remove()</a></li><li class=""><a href="#create-element-inner-text-text-content-and-inner-html">createElement, innerText, textContent, and innerHTML</a></li><li class=""><a href="#value-parent-element-children-next-sibling-previous-sibling-and-style">value, parentElement, children, nextSibling, previousSibling, and style</a></li></ul></li><li class=""><a href="#section-4-event-handling-and-most-common-events-in-java-script">Section 4: Event Handling and Most Common Events in JavaScript</a><ul><li class=""><a href="#what-is-event-handling">What is Event Handling?</a></li><li class=""><a href="#common-java-script-events">Common JavaScript Events</a><ul><li class=""><a href="#clicks">Clicks</a></li><li class=""><a href="#drags-and-drops">Drags and Drops</a></li><li class=""><a href="#hovers">Hovers</a></li><li class=""><a href="#scrolls">Scrolls</a></li><li class=""><a href="#form-submission">Form Submission</a></li><li class=""><a href="#key-presses">Key Presses</a></li><li class=""><a href="#focus-blur">Focus/Blur</a></li><li class=""><a href="#double-click">Double Click</a></li></ul></li></ul></li><li class=""><a href="#section-5-asynchronous-java-script-and-the-dom">Section 5: Asynchronous JavaScript and the DOM</a></li><li class=""><a href="#section-6-common-pitfalls-in-dom-manipulation">Section 6: Common Pitfalls in DOM Manipulation</a><ul><li class=""><a href="#pitfall-1-not-waiting-for-the-dom-to-load">Pitfall 1: Not Waiting for the DOM to Load</a></li><li class=""><a href="#pitfall-2-overusing-inner-html">Pitfall 2: Overusing innerHTML</a></li><li class=""><a href="#pitfall-3-forgetting-that-node-list-is-not-an-array">Pitfall 3: Forgetting That NodeList Is Not an Array</a></li><li class=""><a href="#pitfall-4-not-properly-handling-event-propagation">Pitfall 4: Not Properly Handling Event Propagation</a></li></ul></li><li class=""><a href="#section-7-building-a-simple-to-do-list-project">Section 7: Building a Simple To-Do List Project</a><ul><li class=""><a href="#step-1-setting-up-the-html">Step 1: Setting Up the HTML</a></li><li class=""><a href="#step-2-adding-tasks">Step 2: Adding Tasks</a></li><li class=""><a href="#step-3-marking-tasks-as-completed">Step 3: Marking Tasks as Completed</a></li><li class=""><a href="#step-4-removing-tasks">Step 4: Removing Tasks</a></li><li class=""><a href="#step-5-add-some-style">Step 5: Add Some Style</a></li></ul></li><li class=""><a href="#conclusion">Conclusion</a></li><li class=""><a href="#additional-resources">Additional Resources</a></li></ul></nav></div>
<!-- /wp:rank-math/toc-block -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="introduction">Introduction</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The DOM is like the backbone of your web page. It's a programming interface that allows your web page to come to life, interact with users, and change dynamically. When you load a web page, the browser creates the DOM of that page, which is essentially an object-oriented representation of the web page's structure.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Think of the DOM as a tree-like structure where each branch ends in a node, and each node contains objects. These objects are parts of your webpage like HTML tags, text content, links, images, etc. The DOM allows JavaScript to access and manipulate these objects, change their properties, react to events, and even create new elements and attributes.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Understanding the DOM is fundamental to web development because it's the bridge between your HTML/CSS and JavaScript. Without the DOM, your JavaScript code wouldn't be able to interact with your web page's content and structure.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="section-1-understanding-the-dom">Section 1: Understanding the DOM</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Welcome to the first section of our deep dive into the DOM! Now that we've covered the basics, let's roll up our sleeves and get into the nitty-gritty of what the DOM is, how it works, and its role in JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="what-is-the-dom">What is the DOM?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The Document Object Model, or DOM, is a programming interface for HTML and XML documents. It represents the structure of a document in a way that's easy for programming languages like JavaScript to interact with. The DOM transforms your document into an object-oriented hierarchy or a "tree" of nodes. These nodes are objects that represent parts of the document, such as elements, attributes, and text.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Imagine a family tree. You have the grandparents at the top (the root node), their children below them (child nodes), and their grandchildren below them (leaf nodes). Similarly, in the DOM tree, the <code>document</code> object is the root node, elements like <code>&lt;body&gt;</code> and <code>&lt;head&gt;</code> are child nodes, and the elements and text inside them are leaf nodes.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="how-does-the-dom-work">How Does the DOM Work?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When you load a web page, the browser fetches the HTML and parses it, creating the DOM. This DOM is stored in the browser's memory, not as a string, but as a set of interconnected objects with properties and methods.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's take a look at a simple HTML document:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">&lt;!DOCTYPE html>
&lt;html>
&lt;head>
    &lt;title>My Web Page&lt;/title>
&lt;/head>
&lt;body>
    &lt;h1>Welcome to my web page!&lt;/h1>
    &lt;p>This is a paragraph.&lt;/p>
&lt;/body>
&lt;/html>
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>On the other hand, the browser would create a DOM that looks something like this:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">document
|-- html
    |-- head
        |-- title
            |-- "My Web Page"
    |-- body
        |-- h1
            |-- "Welcome to my web page!"
        |-- p
            |-- "This is a paragraph."
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>This tree-like structure is what JavaScript interacts with. It can access any node, change its contents, apply styles, add or remove nodes, and so on. For instance, if you want to change the text inside the <code>&lt;h1&gt;</code> tag or you can select the <code>&lt;body&gt;</code> node and add a new child node to it. You do many things and you use JavaScript to select these nodes in the DOM and manipulate its contents. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="the-role-of-the-dom-in-java-script">The Role of the DOM in JavaScript</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The DOM is the meeting point between HTML and JavaScript. It's what allows JavaScript to interact with the HTML, changing the document's structure, content, and styling on the fly.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Without the DOM, your JavaScript code would have no way of accessing or manipulating the HTML. You wouldn't be able to respond to user events, update the content dynamically, or create interactive web experiences.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In other words, the DOM is what turns your static HTML document into a dynamic, interactive web page. It's the magic behind every JavaScript-powered website or web app you've ever used.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="section-2-selecting-elements">Section 2: Selecting Elements</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Alright, now that we've got a solid understanding of what the DOM is, let's get our hands dirty and start interacting with it. The first step in DOM manipulation is selecting the elements you want to work with, and that's where <code>querySelector</code> and <code>querySelectorAll</code> come into play.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="query-selector">querySelector</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>querySelector</code> is a powerful method that allows you to select the first element that matches a specified CSS selector(s) in the document. It's like a Swiss Army knife for DOM selection. You can use it to select elements by their tag name, class, ID, attribute, and more.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's how it works:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let element = document.querySelector(selector);
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>The <code>selector</code> is a string containing one or more CSS selectors separated by commas. <code>querySelector</code> returns the first element that matches any of the specified selectors. If no matches are found, it returns <code>null</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's say we have the following HTML:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">&lt;div class="container">
    &lt;h1 id="title">Hello, World!&lt;/h1>
    &lt;p class="text">Welcome to my web page.&lt;/p>
&lt;/div>
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Here's how you can use <code>querySelector</code> to select these above elements:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let title = document.querySelector('#title'); // selects the element with the ID "title"
let text = document.querySelector('.text'); // selects the element with the class "text"
let div = document.querySelector('div'); // selects the first &lt;div> element
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="query-selector-all">querySelectorAll</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>While <code>querySelector</code> returns the first matching element, <code>querySelectorAll</code> returns a NodeList (think of it as a collection) of all elements in the document that match the specified CSS selector(s).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's how you can use it:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let elements = document.querySelectorAll(selector);
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Again, <code>selector</code> is a string containing one or more CSS selectors separated by commas. <code>querySelectorAll</code> returns a NodeList of all elements that match any of the specified selectors. If no matches are found, it returns an empty NodeList.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Using the same HTML as before, here's how you can use <code>querySelectorAll</code>:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let divs = document.querySelectorAll('div'); // selects all &lt;div> elements
let elements = document.querySelectorAll('.text, #title'); // selects all elements with the class "text" and the ID "title"
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Remember, <code>querySelectorAll</code> returns a NodeList, not an array. While you can use some array methods on a NodeList (like <code>forEach</code>), others (like <code>map</code> and <code>filter</code>) are not available. If you need to use these methods, you can convert the NodeList to an array using <code>Array.from()</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And there you have it! You now know how to select elements in the DOM using <code>querySelector</code> and <code>querySelectorAll</code>. These methods are incredibly powerful and versatile, and they're the foundation of all DOM manipulation. So go ahead, start selecting elements and playing around with them.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="section-3-dom-most-important-properties-methods">Section 3: DOM Most Important Properties &amp; Methods</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Welcome to the heart of DOM manipulation: properties and methods. Now that we know how to select elements, it's time to learn how to interact with them. In this section, we'll explore a variety of properties and methods that allow us to read, change, add, and remove elements and their content. Let's dive in!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="class-list">classList</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>classList</code> property returns a live <code>DOMTokenList</code> collection of the class attributes of the element. This property is useful for adding, removing and toggling CSS classes on an element.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let element = document.querySelector('#myElement');
element.classList.add('new-class'); // adds 'new-class' to the element
element.classList.remove('new-class'); // removes 'new-class' from the element
element.classList.toggle('new-class'); // toggles 'new-class'
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="get-attribute-and-set-attribute">getAttribute() and setAttribute()</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>getAttribute()</code> returns the value of a specified attribute on the element. <code>setAttribute()</code> sets the value of an attribute on the specified element.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let link = document.querySelector('a');
let href = link.getAttribute('href'); // gets the href attribute
link.setAttribute('href', 'https://www.example.com'); // sets the href attribute
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="append-child-append-and-prepend">appendChild(), append(), and prepend()</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>appendChild()</code> adds a node to the end of the list of children of a specified parent node. <code>append()</code> and <code>prepend()</code> do the same but allow you to add multiple nodes, and they also accept strings to be inserted as text nodes.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let newElement = document.createElement('div');
document.body.appendChild(newElement); // appends newElement to the body

let textNode = document.createTextNode('Hello, World!');
newElement.append(textNode, ' Welcome!'); // appends two nodes to newElement

newElement.prepend('Greetings! '); // prepends a text node to newElement
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="remove-child-and-remove">removeChild() and remove()</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>removeChild()</code> removes a child node from the DOM and returns the removed node. <code>remove()</code> removes the current node from the DOM.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let element = document.querySelector('#myElement');
document.body.removeChild(element); // removes element from the body

element.remove(); // removes element
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="create-element-inner-text-text-content-and-inner-html">createElement, innerText, textContent, and innerHTML</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>createElement()</code> creates a new element node. <code>innerText</code> and <code>textContent</code> get or set the text content of a node and its descendants. <code>innerHTML</code> gets or sets the HTML content (inner HTML) of an element.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let newElement = document.createElement('div'); // creates a new &lt;div> element

newElement.innerText = 'Hello, World!'; // sets the text content
console.log(newElement.textContent); // gets the text content

newElement.innerHTML = '&lt;strong>Hello, World!&lt;/strong>'; // sets the HTML content
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="value-parent-element-children-next-sibling-previous-sibling-and-style">value, parentElement, children, nextSibling, previousSibling, and style</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><code>value</code> gets or sets the value of the <code>value</code> attribute of a text field. <code>parentElement</code> returns the parent element of the specified element. <code>children</code> returns a live HTMLCollection of child elements. <code>nextSibling</code> and <code>previousSibling</code> return the next and previous sibling of the node in the tree, or <code>null</code> if there are no siblings. <code>style</code> gets or sets the inline style of an element.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let input = document.querySelector('input');
input.value = 'Hello, World!'; // sets the value

let parent = element.parentElement; // gets the parent element
let children = element.children; // gets the child elements

let next = element.nextSibling; // gets the next sibling
let previous = element.previousSibling
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="section-4-event-handling-and-most-common-events-in-java-script">Section 4: Event Handling and Most Common Events in JavaScript</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Welcome to the exciting world of event handling in JavaScript! This is where your web pages truly come to life, responding to user interactions in real time. From simple clicks to complex drags and drops, JavaScript events are the heart of interactive web experiences. Let's dive in!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="what-is-event-handling">What is Event Handling?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In JavaScript, an event is a signal that something has happened. This could be a user action, like clicking a button or submitting a form, or a browser action, like loading a page or resizing a window.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Event handling is the process of setting up listeners on elements that respond to these events. When an event occurs, the listener executes a JavaScript function, known as an event handler.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Event handling is crucial in JavaScript because it allows your web pages to respond to user interactions and create dynamic, interactive experiences.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="common-java-script-events">Common JavaScript Events</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let's take a look at some common JavaScript events and how to handle them.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="clicks">Clicks</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>click</code> event fires when a user clicks an element.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let button = document.querySelector('button');
button.addEventListener('click', function() {
    console.log('Button clicked!');
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="drags-and-drops">Drags and Drops</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>dragstart</code>, <code>dragover</code>, and <code>drop</code> events are used to create drag and drop functionality.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let draggable = document.querySelector('.draggable');
let dropzone = document.querySelector('.dropzone');

draggable.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', draggable.id);
});

dropzone.addEventListener('dragover', function(event) {
    event.preventDefault(); // prevent default to allow drop
});

dropzone.addEventListener('drop', function(event) {
    event.preventDefault(); // prevent default action (open as link for some elements)
    let id = event.dataTransfer.getData('text');
    let draggable = document.getElementById(id);
    dropzone.appendChild(draggable);
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="hovers">Hovers</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>mouseover</code> and <code>mouseout</code> events fire when the mouse pointer enters and leaves an element, respectively.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let element = document.querySelector('#myElement');
element.addEventListener('mouseover', function() {
    element.style.backgroundColor = 'yellow';
});
element.addEventListener('mouseout', function() {
    element.style.backgroundColor = '';
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="scrolls">Scrolls</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>scroll</code> event fires when an element's scrollbar is being scrolled.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">window.addEventListener('scroll', function() {
    console.log('Scrolling!');
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="form-submission">Form Submission</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>submit</code> event fires when a form is submitted.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let form = document.querySelector('form');
form.addEventListener('submit', function(event) {
    event.preventDefault(); // prevent form from submitting normally
    console.log('Form submitted!');
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="key-presses">Key Presses</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>keydown</code>, <code>keypress</code>, and <code>keyup</code> events fire when a user is pressing or releasing a key.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">window.addEventListener('keydown', function(event) {
    console.log('Key pressed: ' + event.key);
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="focus-blur">Focus/Blur</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>focus</code> and <code>blur</code> events fire when an element gets or loses focus.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let input = document.querySelector('input');
input.addEventListener('focus', function() {
    console.log('Input focused!');
});
input.addEventListener('blur', function() {
    console.log('Input blurred!');
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="double-click">Double Click</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <code>dblclick</code> event fires when an element is double-clicked.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let button = document.querySelector('button');
button.addEventListener('dblclick',
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="section-5-asynchronous-java-script-and-the-dom">Section 5: Asynchronous JavaScript and the DOM</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As we near the end of our deep dive into the DOM, let's take a moment to peek into the future. Specifically, let's talk about asynchronous JavaScript and how it interacts with the DOM. This is a vast topic that deserves its own series of articles, but we'll touch on it briefly here to give you a taste of what's to come.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In JavaScript, most operations are synchronous, meaning they block further execution until they're finished. However, certain operations, like fetching data from a server or setting a timer, are asynchronous. They're initiated now, but they finish later, allowing the rest of your code to continue running in the meantime.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://nerdleveltech.com/understand-the-asynchronous-javascript-callbacks-promises-and-async-await/" target="_blank" rel="noreferrer noopener nofollow">Asynchronous JavaScript</a> is crucial for creating smooth, responsive web experiences. It allows your web page to stay interactive even when it's performing time-consuming tasks, like loading data or images.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's a simple example of asynchronous JavaScript in action:</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">console.log('Fetching data...');

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log('Data fetched!');
        // Now you can use the data to update the DOM
    });

console.log('This will run before the data is fetched!');
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>In this example, the <code>fetch</code> function returns a Promise, which is a placeholder for the future result of an operation. The <code>then</code> method is used to schedule callbacks to be run when the Promise is fulfilled, or in other words, when the data is fetched.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is just the tip of the iceberg when it comes to asynchronous JavaScript. There's so much more to learn, including callbacks, Promises, async/await, and more. But don't worry, we'll cover all of that and more in future articles. For now, just know that asynchronous JavaScript is a powerful tool for creating dynamic, interactive web experiences, and it plays a crucial role in DOM manipulation.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Stay tuned for more, and keep practicing what you've learned so far. You're well on your way to becoming a DOM manipulation master!</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="section-6-common-pitfalls-in-dom-manipulation">Section 6: Common Pitfalls in DOM Manipulation</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Alright, we've covered a lot of ground so far. We've learned what the DOM is, how to select elements, and how to use properties and methods to manipulate those elements. Now, it's time to talk about some common pitfalls in DOM manipulation. Even experienced developers can fall into these traps, so let's shine a light on them and learn how to avoid them.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="pitfall-1-not-waiting-for-the-dom-to-load">Pitfall 1: Not Waiting for the DOM to Load</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>One of the most common mistakes is trying to manipulate the DOM before it's fully loaded. If your JavaScript runs before the HTML is parsed, it won't be able to find the elements it's supposed to interact with.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To avoid this, you can use the <code>DOMContentLoaded</code> event, which fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">document.addEventListener('DOMContentLoaded', function() {
    // Your code here
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="pitfall-2-overusing-inner-html">Pitfall 2: Overusing innerHTML</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>While <code>innerHTML</code> is a powerful property that allows you to get or set the HTML content of an element, it can be a source of performance issues and security vulnerabilities.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Every time you use <code>innerHTML</code>, the browser has to parse the new HTML string into a DOM tree, which can be slow for large amounts of HTML. It also exposes you to cross-site scripting (XSS) attacks if you're not careful with user input.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As a best practice, use <code>textContent</code> or <code>innerText</code> when dealing with text, and <code>createElement</code>, <code>appendChild</code>, and other DOM methods when creating new elements.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="pitfall-3-forgetting-that-node-list-is-not-an-array">Pitfall 3: Forgetting That NodeList Is Not an Array</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When you use <code>querySelectorAll</code>, it returns a NodeList, which is an array-like object but not an actual array. This can lead to confusion when you try to use array methods like <code>map</code>, <code>filter</code>, or <code>reduce</code> on a NodeList and get a TypeError.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To avoid this, you can convert a NodeList to an array using <code>Array.from()</code> or the spread operator (<code>...</code>).</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let elements = document.querySelectorAll('div');
let elementsArray = Array.from(elements); // or [...elements]
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="pitfall-4-not-properly-handling-event-propagation">Pitfall 4: Not Properly Handling Event Propagation</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>JavaScript events propagate, meaning they start from the deepest element (the target) and then bubble up to the root of the tree. If you're not careful, an event handler on a parent element might fire when you interact with a child element.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To prevent this, you can use <code>event.stopPropagation()</code> in your event handler. However, use it sparingly, as it can make your code harder to debug and understand.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">element.addEventListener('click', function(event) {
    event.stopPropagation();
    // Your code here
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>Remember, everyone makes mistakes, and that's how we learn. The key is to understand these common pitfalls and learn how to avoid them. Happy coding!</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="section-7-building-a-simple-to-do-list-project">Section 7: Building a Simple To-Do List Project</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Alright, it's time to put all that theory into practice. We're going to build a simple project that demonstrates all the concepts we've covered in this article. We'll create a dynamic, interactive to-do list where users can add tasks, mark them as completed, and remove them. Let's get started!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-1-setting-up-the-html">Step 1: Setting Up the HTML</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First, let's set up the basic structure of our to-do list in HTML. We'll need an input field for adding new tasks, a button for submitting the input, and an unordered list for displaying the tasks.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">&lt;!DOCTYPE html>
&lt;html>
&lt;head>
    &lt;title>To-Do List&lt;/title>
&lt;/head>
&lt;body>
    &lt;input type="text" id="taskInput" placeholder="New task">
    &lt;button id="addTaskButton">Add Task&lt;/button>
    &lt;ul id="taskList">&lt;/ul>
&lt;/body>
&lt;/html>
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-2-adding-tasks">Step 2: Adding Tasks</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Next, let's use JavaScript to add tasks to the list. We'll select the input field and the button, and set up an event listener on the button that adds a new list item to the task list whenever the button is clicked.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">let taskInput = document.querySelector('#taskInput');
let addTaskButton = document.querySelector('#addTaskButton');
let taskList = document.querySelector('#taskList');

addTaskButton.addEventListener('click', function() {
    let task = taskInput.value; // get the input value (the new task)
    let listItem = document.createElement('li'); // create a new list item
    listItem.textContent = task; // set the text content of the list item
    taskList.appendChild(listItem); // append the list item to the task list
    taskInput.value = ''; // clear the input field
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-3-marking-tasks-as-completed">Step 3: Marking Tasks as Completed</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now, let's add the ability to mark tasks as completed by clicking on them. We'll set up an event listener on the task list that checks if the target of a click event is a list item, and if so, toggles the 'completed' class on it.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">taskList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        event.target.classList.toggle('completed');
    }
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-4-removing-tasks">Step 4: Removing Tasks</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Finally, let's allow users to remove tasks from the list. We'll add a 'Remove' button to each task, and set up an event listener on the task list that removes a task when its 'Remove' button is clicked.</p>
<!-- /wp:paragraph -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">addTaskButton.addEventListener('click', function() {
    // ...previous code...

    let removeButton = document.createElement('button');
    removeButton.textContent = 'Remove';
    listItem.appendChild(removeButton);
});

taskList.addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') {
        let task = event.target.parentElement;
        taskList.removeChild(task);
    }
});
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-5-add-some-style">Step 5: Add Some Style</h3>
<!-- /wp:heading -->

<!-- wp:prismatic/blocks {"className":"prism-editor no-trans"} -->
<pre class="wp-block-prismatic-blocks prism-editor no-trans"><code class="language-">body {
    font-family: Arial, sans-serif;
    padding: 20px;
}
#taskInput, #addTaskButton {
    margin: 10px 0;
}
#taskList {
    list-style-type: none;
    padding: 0;
}
#taskList li {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#taskList li.completed {
    text-decoration: line-through;
}
button {
    background-color: #ff6347;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}
button:hover {
    background-color: #ee3120;
}
</code></pre>
<!-- /wp:prismatic/blocks -->

<!-- wp:paragraph -->
<p>And there you have it! You've built a dynamic, interactive to-do list using the DOM manipulation techniques we've covered in this article. This is just a simple example, but the possibilities are endless. Keep practicing, keep experimenting, and most importantly, keep having fun! Happy coding!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>P.S.</strong> If you have problems with your code, remember to check on the following:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li><strong>HTML Structure</strong>: Make sure your HTML structure matches the one used in the code. The IDs of the elements (<code>taskInput</code>, <code>addTaskButton</code>, <code>taskList</code>) should match exactly.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>JavaScript Placement</strong>: If your JavaScript code is in a <code>&lt;script&gt;</code> tag in the head of your HTML document, make sure to either move the <code>&lt;script&gt;</code> tag to the end of the body, or add the <code>defer</code> attribute to it. This ensures that the JavaScript code is executed after the HTML has been fully loaded, so it can access the elements in the DOM.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Browser Console</strong>: Check the console in your browser's developer tools for any error messages. These messages can often provide clues about what's going wrong.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>CSS</strong>: If the 'completed' class is not visibly changing anything when a list item is clicked, make sure you have some CSS that targets <code>.completed</code> and changes the appearance of the element in some way (for example, by crossing out the text).</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="conclusion">Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>And there you have it! We've journeyed through the fascinating world of the Document Object Model (DOM), exploring its nooks and crannies, and uncovering its secrets. We've learned how to select elements, manipulate them using various properties and methods, handle events, and even got a sneak peek into the realm of asynchronous JavaScript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We've discussed common pitfalls in DOM manipulation and how to avoid them, and we've put all our newfound knowledge to the test by building a dynamic, interactive to-do list. Along the way, we've seen how JavaScript breathes life into static HTML, transforming it into a vibrant, interactive experience.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But remember, this is just the beginning. The DOM is a vast and complex beast, and there's always more to learn. So don't stop here. Keep practicing, keep experimenting, and most importantly, keep having fun. Try adding new features to the to-do list, or start a new project from scratch. The more you code, the more comfortable you'll become with these concepts and techniques.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And stay tuned for future articles, where we'll dive deeper into asynchronous JavaScript and other advanced topics. The journey never ends, and every step you take brings you closer to becoming a master of web development.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="additional-resources">Additional Resources</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As we wrap up our journey through the DOM, you might be wondering where to go next. The world of web development is vast and ever-changing, and there's always more to learn. To help you continue your learning journey, here are some online resources that I highly recommend:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li><strong>MDN Web Docs</strong>: The Mozilla Developer Network provides a wealth of information on all things web development, including in-depth guides and reference materials on HTML, CSS, and JavaScript. Their <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction">JavaScript and DOM Manipulation</a> guide is a great place to dive deeper into the topics we've covered.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>JavaScript.info</strong>: This site offers a modern JavaScript tutorial that covers everything from basic to advanced concepts, including a detailed section on <a href="https://javascript.info/dom-nodes">DOM manipulation</a>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>W3Schools</strong>: W3Schools provides simple, straightforward tutorials on a wide range of web development topics. Their <a href="https://www.w3schools.com/js/js_htmldom.asp">JavaScript HTML DOM</a> tutorial is a great resource for beginners.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Eloquent JavaScript</strong>: This book by Marijn Haverbeke provides a deep dive into JavaScript, including a chapter on <a href="https://eloquentjavascript.net/14_dom.html">The Document Object Model</a>. It's available to read online for free.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>freeCodeCamp</strong>: freeCodeCamp offers interactive coding lessons and projects. Their <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/">JavaScript Algorithms and Data Structures</a> certification includes a section on Basic Data Structures that can help you understand how to work with arrays and objects in JavaScript, which is crucial for DOM manipulation.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Codecademy</strong>: Codecademy's <a href="https://www.codecademy.com/learn/introduction-to-javascript">Learn JavaScript</a> course includes interactive lessons and projects that can help you practice the concepts you've learned.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Remember, the key to mastering web development is practice. Don't just read about these concepts—apply them. Build projects, solve problems, and don't be afraid to make mistakes. That's how you learn.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Happy coding!</p>
<!-- /wp:paragraph -->