|
| 1 | +# JavaScript DOM Cheatsheet |
| 2 | + |
| 3 | +### What is DOM? |
| 4 | + |
| 5 | +The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page so that programs can change the document structure, style, and content. |
| 6 | + |
| 7 | +## DOM Methods to find HTML elements: |
| 8 | + |
| 9 | +### Get Element by Id |
| 10 | + |
| 11 | +Returns the element that has the ID attribute with the specified value. |
| 12 | + |
| 13 | +```jsx |
| 14 | +let element = document.getElementById("myElement"); |
| 15 | +``` |
| 16 | + |
| 17 | +### Get Elements By Class Name |
| 18 | + |
| 19 | +Returns a collection of all elements in the document with the specified class name. |
| 20 | + |
| 21 | +```jsx |
| 22 | +let elements = document.getElementsByClassName("myClass"); |
| 23 | +``` |
| 24 | + |
| 25 | +### Get Elements By Tag Name |
| 26 | + |
| 27 | +Returns a collection of all elements in the document with the specified tag name. |
| 28 | + |
| 29 | +```jsx |
| 30 | +let elements = document.getElementsByTagName("p"); |
| 31 | +``` |
| 32 | + |
| 33 | +### Query Selector All |
| 34 | + |
| 35 | +Returns all elements that matches a specified CSS selector(s) in the document |
| 36 | + |
| 37 | +```jsx |
| 38 | +let elements = document.querySelectorAll(".myClass"); |
| 39 | +``` |
| 40 | + |
| 41 | +### InnerHTML |
| 42 | + |
| 43 | +Gets or sets the HTML content within an element. |
| 44 | + |
| 45 | +```jsx |
| 46 | +element.innerHTML = "<p>New HTML content</p>"; |
| 47 | +``` |
| 48 | + |
| 49 | +### InnerText |
| 50 | + |
| 51 | +Gets or sets the text content within an element. |
| 52 | + |
| 53 | +```jsx |
| 54 | +element.innerText = "New text content"; |
| 55 | +``` |
| 56 | + |
| 57 | +### Add Class |
| 58 | + |
| 59 | +Adds one or more class names to an element. |
| 60 | + |
| 61 | +```jsx |
| 62 | +element.classList.add("newClass"); |
| 63 | +``` |
| 64 | + |
| 65 | +### Remove Class |
| 66 | + |
| 67 | +Removes one or more class names from an element. |
| 68 | + |
| 69 | +```jsx |
| 70 | +element.classList.remove("oldClass"); |
| 71 | +``` |
| 72 | + |
| 73 | +### Add Event Listener |
| 74 | + |
| 75 | +Attaches an event handler to the specified element. |
| 76 | + |
| 77 | +```jsx |
| 78 | +const myButton = document.getElementById("myButton"); |
| 79 | + |
| 80 | +myButton.addEventListener("click", function() { |
| 81 | + console.log("Button clicked!"); |
| 82 | +}); |
| 83 | +``` |
| 84 | + |
| 85 | +# Learn More about JavaScript DOM from here: |
| 86 | + |
| 87 | +https://youtu.be/85jzHRTVdsc |
0 commit comments