getElementById() JavaScript examples for Grade 7

📚 Quick Study Guide

• 🔍 The `getElementById()` method is a JavaScript function that allows you to select an HTML element by its unique ID. Think of it like finding a specific student in a class using their student ID number.
• 💡 HTML elements are the building blocks of a website (like paragraphs, headings, images, and buttons). Each element can have attributes, including an `id` attribute.
• 📝 The `id` attribute should be unique within an HTML document. This ensures that `getElementById()` always finds the *exact* element you're looking for.
• 💻 Syntax: `document.getElementById("yourID")`, where `yourID` is the value of the `id` attribute of the element you want to select.
• 🎨 Once you have the element, you can change its content, style, or attributes using JavaScript. For instance, you could change the text inside a paragraph or hide an image.
• 🌐 `document` refers to the entire HTML document that's loaded in the browser.

Practice Quiz

1. What is the main purpose of `getElementById()` in JavaScript?
   1. A. To change the website's background color.
   2. B. To select an HTML element using its ID.
   3. C. To create new HTML elements.
   4. D. To add a style sheet to the webpage.
2. Which of the following is the correct way to use `getElementById()`?
   1. A. `getElementByID(myID)`
   2. B. `document.getElementByID("myID")`
   3. C. `document.getElementById("myID")`
   4. D. `getElementById(document, "myID")`
3. What does `document` refer to in `document.getElementById()`?
   1. A. A single HTML element.
   2. B. The entire HTML document.
   3. C. A JavaScript file.
   4. D. A CSS stylesheet.
4. What should be true about the `id` attribute of an HTML element?
   1. A. It should be the same for all elements on the page.
   2. B. It should be unique within the HTML document.
   3. C. It doesn't matter what it is.
   4. D. It should be the same as the element's tag name.
5. If `getElementById()` cannot find an element with the specified ID, what does it return?
   1. A. `0`
   2. B. `undefined`
   3. C. `null`
   4. D. `1`
6. What can you do with an element once you've selected it using `getElementById()`?
   1. A. Change its content.
   2. B. Change its style.
   3. C. Change its attributes.
   4. D. All of the above.
7. Which of the following HTML elements is likely to be targeted using `getElementById()`?
   1. A. `

      This is text.

      `
   2. B. `

      This is text.

      `
   3. C. `This is text.`
   4. D. `

      This is text.

      `