- Storing HTML Elements
- DOM Manipulation
- Updating Images
- DOM (Document Object Model): It's a blueprint or tree structure of a webpage.
- Relation between HTML & JavaScript: HTML documents are transformed into the DOM. With JavaScript, we can manipulate this DOM.
- Use the
documentobject, representing the webpage. - Access specific elements using selectors.
let paragraph = document.querySelector("p");- By tag name:
document.querySelector("div") - By class:
document.querySelector(".my-div") - By ID:
document.querySelector("#myDiv")
- Property: A characteristic or attribute in JavaScript that can be assigned a value.
innerHTMLis a common property used to get or set content of an element.
let button = document.querySelector("button");
let header = document.querySelector("h1");
button.addEventListener("click", function() {
header.innerHTML = "This is important!";
});Common event types for .addEventListener:
- "click"
- "mouseover"
- "mouseout"
- "keydown"
- "keypress"
<img>tags have asrcattribute, which can be updated with JavaScript using thesrcproperty.
selector.src = "url";Use this README as a quick reference. Practice makes perfect, so continue to work on projects and exercises to get comfortable with DOM Manipulation!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent