This content originally appeared on DEV Community and was authored by avery
BootCamp by Dr.Angela
1. Adding JavaScript to Websites
<script src="index.js" charset="utf-8"></script>- Place the
<script>tag at the end of the<body> - Ensures JavaScript runs after the HTML elements are loaded
- Can only manipulate elements that already exist in the DOM
2. Introduction to the DOM
- Properties : ex) innerHTML, style, firstChild
- Methods : ex) click(), appendChild(), setAttribute()
- Tool : HTML Tree Generator (https://chromewebstore.google.com/detail/html-tree-generator/dlbbmhhaadfnbbdnjalilhdakfmiffeg)
3. Selecting HTML Elements
- querySelector() : Returns the first matching element, Supports #id, .class, and tag selectors
- querySelectorAll() : Returns all matching elements (NodeList)
- getElementsByTagName() : Returns elements by tag name (HTMLCollection)
- getElementsByClassName() : Returns elements by class name
- getElementById() : Returns a single element
4. Manipulating Styles
- Use the DOM Style Object : https://www.w3schools.com/jsref/dom_obj_style.asp
- Ex)
document.querySelector("h1").style.color = "red";
5. Separation of Concerns (Structure vs Style vs Behaviour)
- Add class : ex)
document.querySelector("name").classList.add("className"); - Remove class : ex)
document.querySelector("name").classList.remove("className"); - Toggle class : ex)
document.querySelector("name").classList.toggle("className");
6. Text Manipulation
- innerHTML(can include HTML) vs textContent(text only)
document.querySelector("h1").innerHTML = "<em>Hello</em>";document.querySelector("h1").textContent = "Hello";
7. Manipulating Attributes
- attributes : shows all attributes
- getAttribute() : gets attribute value
- setAttribute() : sets or updates attribute value
- ex)
document.querySelector("a").setAttribute("href", "https://www.bing.com");
- ex)
This content originally appeared on DEV Community and was authored by avery
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
avery | Sciencx (2026-04-14T21:16:13+00:00) 15. The Document Object Model (DOM). Retrieved from https://www.scien.cx/2026/04/14/15-the-document-object-model-dom/
" » 15. The Document Object Model (DOM)." avery | Sciencx - Tuesday April 14, 2026, https://www.scien.cx/2026/04/14/15-the-document-object-model-dom/
HARVARDavery | Sciencx Tuesday April 14, 2026 » 15. The Document Object Model (DOM)., viewed ,<https://www.scien.cx/2026/04/14/15-the-document-object-model-dom/>
VANCOUVERavery | Sciencx - » 15. The Document Object Model (DOM). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2026/04/14/15-the-document-object-model-dom/
CHICAGO" » 15. The Document Object Model (DOM)." avery | Sciencx - Accessed . https://www.scien.cx/2026/04/14/15-the-document-object-model-dom/
IEEE" » 15. The Document Object Model (DOM)." avery | Sciencx [Online]. Available: https://www.scien.cx/2026/04/14/15-the-document-object-model-dom/. [Accessed: ]
rf:citation » 15. The Document Object Model (DOM) | avery | Sciencx | https://www.scien.cx/2026/04/14/15-the-document-object-model-dom/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.