├── LICENSE
└── readme.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Anish Kumar
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # Accessing DOM Elements
  2 | 
  3 | ### DOM node overview
  4 | 
  5 | ![DOM Element Traversal](https://i.ibb.co/H4Bx8KJ/dom.png)
  6 | 
  7 | 
  8 | ```javascript
  9 | // Returns a reference to the element by its ID.
 10 | document.getElementById("someid");
 11 | 
 12 | // Returns an array-like object of all child elements which have all of the given class names.
 13 | document.getElementsByClassName("someclass");
 14 | 
 15 | // Returns an HTMLCollection of elements with the given tag name.
 16 | document.getElementsByTagName("LI");
 17 | 
 18 | // Returns the first element within the document that matches the specified group of selectors.
 19 | document.querySelector(".someclass");
 20 | 
 21 | // Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes)
 22 | // that match the specified group of selectors.
 23 | document.querySelectorAll("div.note, div.alert");
 24 | ```
 25 | 
 26 | #### Grab Children/Parent Node(s)
 27 | 
 28 | ```javascript
 29 | // Get child nodes
 30 | var stored = document.getElementById("someid");
 31 | var children = stored.childNodes;
 32 | 
 33 | // Get parent node
 34 | var parental = children.parentNode;
 35 | ```
 36 | 
 37 | # Create New DOM Elements
 38 | 
 39 | ```javascript
 40 | // create new elments
 41 | var newHeading = document.createElement("h1");
 42 | var newParagraph = document.createElement("p");
 43 | 
 44 | // create text nodes for new elements
 45 | var h1Text = document.createTextNode("This is a nice header text!");
 46 | var pText = document.createTextNode("This is a nice paragraph text!");
 47 | 
 48 | // attach new text nodes to new elements
 49 | newHeading.appendChild(h1Text);
 50 | newParagraph.appendChild(pText);
 51 | 
 52 | // elements are now created and ready to be added to the DOM.
 53 | ```
 54 | 
 55 | # Add Elements to the DOM
 56 | 
 57 | ```javascript
 58 | // grab element on page you want to add stuff to
 59 | var firstHeading = document.getElementById("firstHeading");
 60 | 
 61 | // add both new elements to the page as children to the element we stored in firstHeading.
 62 | firstHeading.appendChild(newHeading);
 63 | firstHeading.appendChild(newParagraph);
 64 | 
 65 | // can also insert before like so
 66 | 
 67 | // get parent node of firstHeading
 68 | var parent = firstHeading.parentNode;
 69 | 
 70 | // insert newHeading before FirstHeading
 71 | parent.insertBefore(newHeading, firstHeading);
 72 | ```
 73 | 
 74 | ---
 75 | 
 76 | Suppose you have the following HTML:
 77 | 
 78 | ```html
 79 | <div id="box1"><p>Some example text</p></div>
 80 | <div id="box2"><p>Some example text</p></div>
 81 | ```
 82 | 
 83 | You can insert another snippet of HTML between #box1 and #box2:
 84 | 
 85 | ```javascript
 86 | var box2 = document.getElementById("box2");
 87 | box2.insertAdjacentHTML("beforebegin", "<div><p>This gets inserted.</p></div>");
 88 | 
 89 | // beforebegin - The HTML would be placed immediately before the element, as a sibling.
 90 | // afterbegin - The HTML would be placed inside the element, before its first child.
 91 | // beforeend - The HTML would be placed inside the element, after its last child.
 92 | // afterend - The HTML would be placed immediately after the element, as a sibling.
 93 | ```
 94 | 
 95 | # Add/Remove/Toggle/Check Classes
 96 | 
 97 | ```javascript
 98 | // grab element on page you want to use
 99 | var firstHeading = document.getElementById("firstHeading");
100 | 
101 | // will remove foo if it is a class of firstHeading
102 | firstHeading.classList.remove("foo");
103 | 
104 | // will add the class 'anotherClass' if one does not already exist
105 | firstHeading.classList.add("anotherclass");
106 | 
107 | // add or remove multiple classes
108 | firstHeading.classList.add("foo", "bar");
109 | firstHeading.classList.remove("foo", "bar");
110 | 
111 | // if visible class is set remove it, otherwise add it
112 | firstHeading.classList.toggle("visible");
113 | 
114 | // will return true if it has class of 'foo' or false if it does not
115 | firstHeading.classList.contains("foo");
116 | ```
117 | 
118 | # Using template literals
119 | 
120 | ```html
121 | <body></body>
122 | ```
123 | 
124 | ```javascript
125 | function render(props) {
126 |   return `
127 |             <div class="container"> 
128 |                 <h1> ${props.name} </h1>
129 |             </div>
130 |         `;
131 | }
132 | 
133 | document.body.innerHTML = render("John");
134 | ```
135 | 
136 | # Other node methods
137 | 
138 | ```javascript
139 | // Creates newNode as a copy (clone) of node. If bool is true, the clone includes clones of all the child nodes of the original.
140 | 
141 | newNode = node.cloneNode(bool);
142 | 
143 | // Removes the child oldNode from node.
144 | node.removeChild(oldNode):
145 | 
146 | // Replaces the child node oldNode of node with newNode.
147 | node.replaceChild(newNode, oldNode)
148 | 
149 | // Retrieves the value of the attribute with the name attribute
150 | node.getAttribute('attribute')
151 | 
152 | // Sets the value of the attribute with the name attribute to value
153 | node.setAttribute('attribute', 'value')
154 | 
155 | // Reads the type of the node (1 = element, 3 = text node)
156 | node.nodeType
157 | 
158 | // Reads the name of the node (either element name or #textNode)
159 | node.nodeName
160 | 
161 | // Reads or sets the value of the node (the text content in the case of text nodes)
162 | node.nodeValue
163 | ```
164 | 
165 | # Events
166 | 
167 | ## Inline event handling
168 | 
169 | ```html
170 | <a href="site.com" onclick="dosomething();">A link</a>
171 | ```
172 | 
173 | ## DOM on-event handling
174 | 
175 | ```javascript
176 | window.onload = () => {
177 |   //window loaded
178 | };
179 | 
180 | const xhr = new XMLHttpRequest();
181 | xhr.onreadystatechange = () => {
182 |   //.. do something
183 | };
184 | ```
185 | 
186 | ## Using addEventListener()
187 | 
188 | ```javascript
189 | window.addEventListener("load", onLoad);
190 | window.removeEventListener("load", onLoad);
191 | ```
192 | 
193 | ## Custom events
194 | 
195 | ```javascript
196 | //A CustomEventInit dictionary, having the following fields: "detail", optional and defaulting to null, of type any, that is an event-dependent value associated with the event.
197 | event = new CustomEvent(typeArg, customEventInit);
198 | ```
199 | 
200 | ### Dispatching
201 | 
202 | ```javascript
203 | var event = new Event("build");
204 | // Listen for the event.
205 | elem.addEventListener(
206 |   "build",
207 |   function(e) {
208 |     /* ... */
209 |   },
210 |   false
211 | );
212 | // Dispatch the event.
213 | elem.dispatchEvent(event);
214 | ```
215 | 
216 | # Date and time
217 | 
218 | ```javascript
219 | //Sun Nov 18 2018 23:18:58 GMT+0530 (India Standard Time)
220 | var d = new Date();
221 | //1542563338408 miliseconds passed since 1970
222 | Number(d);
223 | Date("2017-06-23"); // date declaration
224 | Date("2017"); // is set to Jan 01
225 | Date("2017-06-23T12:00:00-09:45"); // date - time YYYY-MM-DDTHH:MM:SSZ
226 | Date("June 23 2017"); // long date format
227 | Date("Jun 23 2017 07:45:00 GMT+0100 (Tokyo Time)"); // time zone
228 | 
229 | var d = new Date();
230 | a = d.getDay(); // getting the weekday
231 | 
232 | getDate(); // day as a number (1-31)
233 | getDay(); // weekday as a number (0-6)
234 | getFullYear(); // four digit year (yyyy)
235 | getHours(); // hour (0-23)
236 | getMilliseconds(); // milliseconds (0-999)
237 | getMinutes(); // minutes (0-59)
238 | getMonth(); // month (0-11)
239 | getSeconds(); // seconds (0-59)
240 | getTime(); // milliseconds since 1970
241 | 
242 | var d = new Date();
243 | d.setDate(d.getDate() + 7); // adds a week to a date
244 | 
245 | setDate(); // day as a number (1-31)
246 | setFullYear(); // year (optionally month and day)
247 | setHours(); // hour (0-23)
248 | setMilliseconds(); // milliseconds (0-999)
249 | setMinutes(); // minutes (0-59)
250 | setMonth(); // month (0-11)
251 | setSeconds(); // seconds (0-59)
252 | setTime(); // milliseconds since 1970)
253 | ```
254 | 


--------------------------------------------------------------------------------