Exploring the Basics of DOM in Web Development
Unlocking the Power of DOM: A Web Developer's Guide
Today, I embarked on my MERN stack journey, diving headfirst into the Document Object Model (DOM). Having already covered the fundamentals of HTML, CSS, and basic JavaScript, I found it fitting to start with DOM, a crucial aspect of web development.
Getting Started
To begin, it's important to understand that JavaScript can be implemented in three ways: inline, internal, and external. Similarly, CSS follows suit. Inline scripting involves embedding JavaScript directly within an HTML tag as an attribute. Internal JavaScript is executed within the HTML file using <script> tags, and external JavaScript is stored in a separate file linked to the HTML document using <script src="filelocation/script.js"></script>.
Unraveling the DOM
My journey commenced by creating an HTML page featuring input tags, <h1> elements, <ul> and <li> lists. I installed the Chrome extension, "HTML Tree Generator," which revealed that HTML structures itself like a tree. This discovery led me to explore the properties and methods available for navigating this tree.
Within the DOM, objects possess properties (e.g., innerHTML, style, firstChild) and methods (e.g., click(), appendChild(), setAttribute()). If you're eager to delve deeper into these properties and methods, feel free to comment, and we'll explore them further together.
Selecting HTML Elements
Understanding how to select HTML elements via the DOM is crucial. There are four primary methods:
document.getElementsByTagName("tagname")document.getElementsByClassName("classname")document.getElementById("idname")document.querySelector("selector")
Applying CSS with DOM
I also learned how to apply CSS properties using the DOM. To add CSS properties, select the desired HTML tag, employ dot notation, and specify the style property name. For comprehensive property reference, visit resources like W3Schools, MDN Web Docs, and DevDocs.
Working with Classes and Attributes
Discovering which classes are applied to an HTML tag is crucial. To uncover this information, select the tag, use dot notation followed by classList, and explore the class names. To add or remove classes, use classList.add("className") and classList.remove("className"). I also explored the classList.toggle() method, which can be discussed further upon request.
Manipulating HTML Content and Attributes
DOM provides two methods for manipulating content: innerHTML and textContent. innerHTML selects both text and HTML tags within an element, while textContent modifies only the text content.
Manipulating attributes involves three key functions:
select.attributes: To view all attributes within an HTML tag.getAttribute("attribute name"): To retrieve the attribute's value.setAttribute("attribute name", "new value"): To update attribute values.
This marks the highlights of my journey into DOM today. If you have any questions or need further clarification, please leave a comment or reach out via my contact page. Don't forget to subscribe to my newsletter for timely updates on my blogs.
Thank you for joining me on this exploration.