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)
DE
Source
This article was originally published by DEV Community and written by avery.
Read original article on DEV Community