\n| JavaScript Role<\/td>\n | Access and change elements dynamically<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nSelecting elements (getElementById, querySelector, etc.)<\/h2>\nWhy Select Elements?<\/strong><\/p>\nSelecting elements means grabbing HTML elements using JavaScript so you can read, change, or manipulate them.
\nYou can modify text, style, attributes, or even react to user actions like clicks.<\/p>\n Common Methods to Select Elements<\/h3>\n1. GetElementById()<\/strong><\/p>\n\n- Purpose: Selects one element with a specific id.<\/li>\n
- Returns: A single element (or null if not found).<\/li>\n
- Fastest method for selecting.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst element = document.getElementById(“elementId”);<\/em><\/p>\nExample:<\/strong><\/p>\n<h1 id=”main-title”>Welcome!<\/h1><\/em><\/p>\nconst title = document.getElementById(“main-title”);<\/em>
\nconsole.log(title.textContent); \/\/ “Welcome!”<\/em><\/p>\nTip:<\/strong> IDs must be unique on a page.<\/p>\n2. getElementsByClassName()<\/strong><\/p>\n\n- Purpose: Selects all elements with a specific class name.<\/li>\n
- Returns: An HTMLCollection (looks like an array but not exactly).<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst elements = document.getElementsByClassName(“className”);<\/em><\/p>\nExample:<\/strong><\/p>\n<p class=”info”>Info 1<\/p><\/em>
\n<p class=”info”>Info 2<\/p><\/em><\/p>\nconst infoItems = document.getElementsByClassName(“info”);<\/em>
\nconsole.log(infoItems.length); \/\/ 2<\/em><\/p>\nAccess with index infoItems[0], infoItems[1].<\/p>\n 3. getElementsByTagName()<\/strong><\/p>\n\n- Purpose: Selects all elements of a specific tag (like p, div, h1).<\/li>\n
- Returns: An HTMLCollection.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst paragraphs = document.getElementsByTagName(“p”);<\/em><\/p>\nExample:<\/strong><\/p>\n<p>Paragraph 1<\/p><\/em>
\n<p>Paragraph 2<\/p><\/em><\/p>\nconst allParagraphs = document.getElementsByTagName(“p”);<\/em>
\nconsole.log(allParagraphs.length); \/\/ 2<\/em><\/p>\n4. querySelector()<\/strong><\/p>\n\n- Purpose: Selects the first element that matches a CSS selector.<\/li>\n
- Returns: A single element (or null if none found).<\/li>\n
- Very powerful and flexible.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst element = document.querySelector(“selector”);<\/em><\/p>\nExample:<\/strong><\/p>\n<div class=”box”>Box 1<\/div><\/em>
\n<div class=”box”>Box 2<\/div><\/em><\/p>\nconst firstBox = document.querySelector(“.box”);<\/em>
\nconsole.log(firstBox.textContent); \/\/ “Box 1”<\/em><\/p>\nCSS Selectors:<\/strong> IDs (#id), classes (.class), tags (div), attributes ([type=”text”]).<\/p>\n5. querySelectorAll()<\/strong><\/p>\n\n- Purpose: Selects all elements that match a CSS selector.<\/li>\n
- Returns: A NodeList (can use forEach).<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst elements = document.querySelectorAll(“selector”);<\/em><\/p>\nExample:<\/strong><\/p>\n<p class=”highlight”>First<\/p><\/em>
\n<p class=”highlight”>Second<\/p><\/em><\/p>\nconst highlights = document.querySelectorAll(“.highlight”);<\/em>
\nhighlights.forEach(item => console.log(item.textContent));<\/em><\/p>\nHTMLCollection vs. NodeList<\/strong><\/p>\n\n\n\n| Feature<\/th>\n | HTMLCollection<\/th>\n | NodeList<\/th>\n<\/tr>\n<\/thead>\n | \n\n| Returned by<\/td>\n | getElementsByClassName, getElementsByTagName<\/td>\n | querySelectorAll<\/td>\n<\/tr>\n | \n| Live Update<\/td>\n | Yes (updates if DOM changes)<\/td>\n | No (static snapshot)<\/td>\n<\/tr>\n | \n| forEach() Method<\/td>\n | (needs conversion)<\/td>\n | (direct use)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Choosing the Right Method<\/strong><\/p>\n\n\n\n| Situation<\/th>\n | Best Method<\/th>\n<\/tr>\n<\/thead>\n | \n\n| Need single element by ID<\/td>\n | getElementById()<\/code><\/td>\n<\/tr>\n\n| Need elements by class name or tag<\/td>\n | getElementsByClassName()<\/code>,
\ngetElementsByTagName()<\/code><\/td>\n<\/tr>\n\n| Need first match by CSS selector<\/td>\n | querySelector()<\/code><\/td>\n<\/tr>\n\n| Need all matches by CSS selector<\/td>\n | querySelectorAll()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nReal Example – Full Flow<\/strong><\/p>\nHTML:<\/strong><\/p>\n<h1 id=”site-title”>Hello<\/h1><\/em>
\n<p class=”description”>First paragraph.<\/p><\/em>
\n<p class=”description”>Second paragraph.<\/p><\/em><\/p>\nNew to HTML? See our Introduction to HTML<\/a> course for fundamentals.<\/p>\nJavaScript:<\/strong><\/p>\nconst title = document.getElementById(“site-title”);<\/em>
\nconst descriptions = document.getElementsByClassName(“description”);<\/em>
\nconst firstParagraph = document.querySelector(“.description”);<\/em>
\nconst allParagraphs = document.querySelectorAll(“.description”);<\/em><\/p>\nconsole.log(title.textContent); \/\/ Hello<\/em>
\nconsole.log(descriptions.length); \/\/ 2<\/em>
\nconsole.log(firstParagraph.textContent); \/\/ First paragraph.<\/em>
\nallParagraphs.forEach(p => console.log(p.textContent));<\/em><\/p>\nQuick Summary:<\/strong><\/p>\nIn JavaScript, you can select elements using methods like getElementById, querySelector, getElementsByClassName, and querySelectorAll to manipulate or interact with the page easily.<\/p>\n Changing content and styles<\/h2>\nWhy Change Content and Styles?<\/strong><\/p>\nUsing JavaScript, you can dynamically update:<\/p>\n \n- Text<\/li>\n
- HTML structure<\/li>\n
- CSS styles<\/li>\n<\/ul>\n
This makes websites interactive, dynamic, and user-friendly \u2014 no page reload needed!<\/p>\n Changing Content<\/h3>\nThere are several ways to change the content of HTML elements:<\/strong><\/p>\n1. Text Content<\/strong><\/p>\n\n- Sets or gets the text inside an element.<\/li>\n
- Ignores HTML tags, treats everything as plain text.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nelement.textContent = “New Text Here”;<\/em><\/p>\nHTML:<\/strong><\/p>\n<p id=”greet”>Hello!<\/p><\/em><\/p>\nJavaScript:<\/strong><\/p>\nconst greet = document.getElementById(“greet”);<\/em>
\ngreet.textContent = “Welcome to the site!”;<\/em><\/p>\nResult:<\/strong> Only text is inserted.<\/p>\n2. Inner HTML<\/strong><\/p>\n\n- Sets or gets the HTML content inside an element.<\/li>\n
- Allows HTML tags inside.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nelement.innerHTML = “<strong>Bold Text<\/strong>”;<\/em><\/p>\nExample:<\/strong><\/p>\n<div id=”content”><\/div><\/em><\/p>\nJavaScript:<\/strong><\/p>\nconst content = document.getElementById(“content”);<\/em>
\ncontent.innerHTML = “<h2>New Heading<\/h2><p>New paragraph!<\/p>”;<\/em><\/p>\n\n- Result:<\/strong> HTML structure is rendered inside the div.<\/li>\n
- Warning:<\/strong> Using innerHTML can open security risks (like XSS attacks) if you insert untrusted content.<\/li>\n<\/ul>\n
Handling events (click, input, submit)<\/h2>\nHandling Events in JavaScript<\/strong><\/p>\nJavaScript allows you to handle user interactions (events) like clicks, inputs, and form submissions to make web pages dynamic. Events are triggered by user actions, such as clicking a button or typing in a text box, and JavaScript listens for these events to execute a function.<\/p>\n For a deeper dive into event handling patterns, see our Advanced JavaScript Concepts<\/a> course.<\/p>\nThere are many types of Handling Events in JavaScript.<\/h3>\n1. Event Types<\/strong><\/p>\n | | | | | |