- `:
156 | ```html
157 |
- First Item 159 |
- Second Item 160 |
- Third Item 161 |
- element. 166 | const second = document.querySelectorAll('li')[1]; // the same with querySelectorAll-function 167 | ``` 168 | 169 | 3. Iterate all `
- ` elements using the forEach function and make the text bold. ([forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) is a modern alternative to for...of)
170 | ```javascript
171 | const bullets = document.querySelectorAll('li');
172 |
173 | for (let bullet of bullets) {
174 | bullet.innerHTML = `${bullet.innerHTML}`;
175 | }
176 |
177 |
178 | // alternative syntax using array.forEach()
179 | /*
180 | bullets.forEach(function (bullet) {
181 | bullet.innerHTML = `${bullet.innerHTML}`;
182 | })
183 | */
184 | ```
185 |
186 | 4. List of all p-elements that have "bulletin" class:
187 | ```javascript
188 | const x = document.querySelectorAll('p.bulletin');
189 | ```
190 | 5. Change the content of an element:
191 | ```html
192 |
Monday
193 | 194 | 197 | ``` 198 | 6. Change the value of an attribute: 199 | ```html 200 |
201 |
202 |
206 | ```
207 | 7. Adding HTML to a document:
208 | 1. using the innerHTML feature:
209 | ```html
210 |
211 |
212 |
221 | ```
222 | 1. Same with DOM functions
223 | ```html
224 |
225 |
226 |
242 | ```
243 | ### CSS handling
244 | JavaScript can also be used to customize the appearance of elements. The alternatives in this case are to either change the values of the style attribute or the class attributes, as is normally the case in HTML documents.
245 |
246 | Editing the Style attribute i.e. inline method:
247 |
248 | ```html
249 | Some text
250 | 251 | 254 | ``` 255 | Edit the Class attribute: 256 | ```css 257 | /* extenal css-file */ 258 | .red { 259 | color: #f00; 260 | } 261 | 262 | .blue { 263 | color: #00f; 264 | } 265 | ``` 266 | 267 | ```html 268 |Some text
269 | 270 | 276 | ``` 277 | For more methods for handling class attributes, see [classList documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). 278 | 279 | # Event handling 280 | Because JavaScript is used to add interactivity to a website, there is a need for some way to respond to actions and events performed by the user or on the system.This method is called [event handling.](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events) 281 | 282 | For example, if a user clicks a button, we can respond by displaying an information box: 283 | ```html 284 | 285 | 291 | ``` 292 | In the code above, the first parameter 'click' of the addEventListener method is an event, and the second parameter is the function to be called when a 'click' occurs. 293 | The second parameter can also be a reference to a function: 294 | ```html 295 | 296 | 305 | ``` 306 | Note that the popup function in addEventListener is missing parentheses This is because the popup function is used as an event handler and is not called immediately, but only when a 'click' occurs. If it had parentheses, the function would be started immediately. 307 | 308 | The event handler is also called a [callback function](https://github.com/ilkkamtk/JavaScript-english/blob/main/extras.md#callback-functions-and-callback-hell). 309 | 310 | The event handler receives an [event object](https://developer.mozilla.org/en-US/docs/Web/API/Event) (evt) that contains information about the event, such as the type of event and its target. For example, `evt.currentTarget` returns the element that is the target of the event. 311 | In the example code above, this item is the `
-
158 |