added dom chapter

Author: sumn2u

en/SUMMARY.md

@@ -152,6 +152,10 @@
   - [Execution Context](behind-scenes/execution-context.md)
   - [Memory Heap](behind-scenes/memory-heap.md)
   - [Runtime Environment](behind-scenes/runtime-environment.md)
+- [Document Object Model (DOM)](document-object-model/README.md)
+  - [DOM API](document-object-model/dom-api.md)
+  - [DOM Manipulation](document-object-model/dom-manipulation.md)
+  - [Listening for Events](document-object-model/listening-of-events.md)
 - [References](References.md)
 - [Resources](resources.md)
 - [Credits](Credits.md)

en/document-object-model/README.md

@@ -7,7 +7,9 @@ description: The Document Object Model (DOM) is a programming interface that rep
 
 # Document Object Model (DOM) {#dom}
 
-The primary purpose of using JavaScript in a web page is to make that page **interactive**: the JavaScript language is used to program logical decisions that will effect what is shown on the page. It does this primarily by _changing the HTML rendered by the browser_. For example, JavaScript can be used to change the text inside a `<p>`, add addition `<li>` elements to a list, or to give a `<div>` a new CSS `class` attribute. The programmatic representation of the HTML elements currently being shown by the browser is known as the **Document Object Model (DOM)**. In web programming JavaScript code is used to modify the DOM (HTML elements currently being shown by the browser) in response to user input, thereby making the page interactive. This chapter introduces the Document Object Model and how to use JavaScript to manipulate it through user-driven interaction.
+The primary purpose of using JavaScript in a web page is to make that page **interactive**: the JavaScript language is used to program logical decisions that will effect what is shown on the page. It does this primarily by _changing the HTML rendered by the browser_. For example, JavaScript can be used to change the text inside a `<p>`, add addition `<li>` elements to a list, or to give a `<div>` a new CSS `class` attribute. 
+
+The programmatic representation of the HTML elements currently being shown by the browser is known as the **Document Object Model (DOM)**. In web programming JavaScript code is used to modify the DOM (HTML elements currently being shown by the browser) in response to user input, thereby making the page interactive. This chapter introduces the Document Object Model and how to use JavaScript to manipulate it through user-driven interaction.
 
 In this chapter, we will explore following topics:
 * [DOM API](./dom-api.md)

en/document-object-model/dom-api.md

@@ -15,7 +15,7 @@ Considering a web page's content to be a tree of HTML elements is one way to _mo
 
 Moreover, the DOM also provides an **Application Programming Interface (API)** which allows computer _applications_ to _programmatically_ (e.g., through JavaScript code) _interact_ with it: accessing and manipulating the tree of elements. An API is often a set of _functions_ and _variables_ that can be used give instructions to a program. The DOM API is no different: it is a group of functions you can call and variables (usually Object properties) you can adjust to change the rendered web content. You write code to call these functions in order to make a page interactive.
 
-### Global Variables {-}
+### Global Variables
 
 You can programmatically access the API in JavaScript by utilizing a set of global variables. **Global variables** are variables that are "globally" scoped: they are available anywhere in the program (not just within a particular function).
 
@@ -46,4 +46,4 @@ window.setTimeout(callback, 1000); //execute callback after an delay
 window.setInterval(callback, 1000); //execute callback repeatedly after interval
 ```
 
-<p class="alert alert-warning">While these examples are included for completeness, most `window` functions are rarely used and should be avoided. Popups with the `window.alert()` function are inelegant, interrupt the user's actions, and produce a bad user experience&mdash;you should instead use in-window alerting options instead (such as showing a `<p class="alert">`). Browser control functions such as `scrollTo()` are non-standard and can vary drastically across systems and platforms. Proceed with caution when using `window` functions!</p>
+<p class="alert alert-warning">While these examples are included for completeness, most `window` functions are rarely used and should be avoided. Popups with the `window.alert()` function are inelegant, interrupt the user's actions, and produce a bad user experience&mdash;you should instead use in-window alerting options instead (such as showing a  `class="alert-class" `). Browser control functions such as `scrollTo()` are non-standard and can vary drastically across systems and platforms. Proceed with caution when using `window` functions!</p>

en/document-object-model/dom-manipulation.md

@@ -7,7 +7,7 @@ description: Understanding DOM Manipulation in JavaScript.
 
 While `window` represents the Browser, the **DOM** itself is represented by the [**`document`**](https://developer.mozilla.org/en-US/docs/Web/API/Document) global object—`document` _is_ the DOM (the _current_ HTML rendered in the browser). You access properties and call methods of this object in order to manipulate the content displayed in the browser!
 
-### Referencing HTML Elements {-}
+### Referencing HTML Elements
 
 In order to manipulate the DOM elements in a page, you first need to get a _reference_ to the element you want to change—that is, you need a variable that refers to that element. You can get these variable references by using one of the `document` "selector" functions:
 
@@ -35,13 +35,13 @@ let elems = document.querySelectorAll(cssSelector);
 
 - Note that the methods that return multiple nodes (e.g., `querySelectorAll`) return a [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) object. While this is like an array (you can access elements via index through bracket notation and it has a `.length` property), it is **not** an array: meaning it doesn't support methods like `forEach()` and `map()` across all browsers. If you need to iterate through a `NodeList`, you should use a regular `for` loop. But in practice, you're much more likely to only work with single elements at a time.
 
-### Modifying HTML Elements {-}
+### Modifying HTML Elements
 
 Once you have a reference to an element, you access properties and call methods on that object in order to modify its state in the DOM—which will in turn modify how it _currently_ is displayed on the page. Thus by modifying these objects, you are dynamically changing the web page's content!
 
 <p class="alert alert-warning">**Important**: setting these properties do not change the `.html` source code file! Instead, they just change the _rendered DOM elements_ (think: the content stored in the computer's memory rather than in a file). If you refresh the page, the content will go back to how the `.html` source code file specifies it should appear&mdash;unless that also loads the script that modifies the DOM. What is shown on the page is the HTML with the JavaScript modifications added in.</p>
 
-#### Changing Content {-}
+#### Changing Content
 
 You can use JavaScript to access and modify the **content** of a DOM element (e.g., the stuff between the start and close tags):
 
@@ -69,7 +69,7 @@ The `textContent` property of the element refers to _all_ of the content, but co
   alertElem.textContent = ""; //no more alert!
   ```
 
-#### Changing Attributes {-}
+#### Changing Attributes
 
 You can also change the **attributes** of individual elements. Each attribute defined in the HTML specification is typically exposed as a _property_ of the element object:
 
@@ -100,7 +100,7 @@ let isThick = document.querySelector("svg rect").hasAttribute("stroke-width"); /
 
 These methods will let you interact with attributes that are _not_ defined by the HTML spec, such as `data-` attribute. However, they _don't_ work with certain element attributes (such as the `value` attribute of an `<input>` element). Other elements may have their own special DOM properties: see the [DOM Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) for a list of [HTML interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model#HTML_interfaces).
 
-#### Changing Element CSS {-}
+#### Changing Element CSS
 
 It is possible to modify the **CSS classes** (and even inline styling) of an element. But rather than using the `class` property like with other attributes, you instead access the **`classList`** property. On modern browsers (IE 10 or later), this property supports methods `.add()` and `.remove()` for adding and removing classes from the list:
 
@@ -140,7 +140,7 @@ h1.style.backgroundColor = "black"; //not `.background-color`
 
 <p class="alert alert-info">In general, you should modify element CSS by changing the class of the element, rather than specific style properties.</p>
 
-### Modifying the DOM Tree {-}
+### Modifying the DOM Tree
 
 In addition to modifying the individual DOM elements, it is also possible to access and modify the _DOM tree itself!_ That is, you can create new elements and add them to the tree (read: webpage), remove elements from the tree, or pluck them out of the tree and insert them somewhere else!
 
@@ -205,7 +205,7 @@ main.removeChild(main.querySelector("p"));
 
 The `appendChild()` method is considered a cleaner approach than just modifying the `innerHTML` property, as it allows you to adjust the DOM tree without erasing what was previously there. A common practice is to use `document.createElement()` to create a _block_ element, then set the `innerHTML` of that element to its content (which can include _inline_ elements), and then use `appendChild` to add the new block element to the tree at the desired location.
 
-### Accessibility {-}
+### Accessibility
 
 Whenever you learn a new technology, you should ask: **how does this affect accessibility?** With the JavaScript code modifying the rendered DOM, it is possible that the content of a page will change _after_ it has been read by a screen reader. And while a sighted user will likely be able to see the change visually, a screen reader has no way of knowing that something on the page is different unless you tell it.
 

en/document-object-model/listening-of-events.md

@@ -66,7 +66,7 @@ submitBtn.addEventListener("click", function (event) {
 });
 ```
 
-### Types of Events {-}
+### Types of Events
 
 There are [numerous different events](https://developer.mozilla.org/en-US/docs/Web/Events) that you can listen for, including:
 
@@ -109,7 +109,7 @@ There are [numerous different events](https://developer.mozilla.org/en-US/docs/W
 
 <p class="alert alert-warning">**Style guideline**: always register event listeners in the JavaScript&mdash;do _not_ utilize the HTML attributes such as `onclick`. This is to help keep concerns separated: the HTML should not need to know anything about the JavaScript that is utilized (since the browser may not even support JavaScript!), but it's okay for the JavaScript to rely on and modify the HTML.</p>
 
-### Event-Driven Programming {-}
+### Event-Driven Programming
 
 In a typical web program event callback functions can occur repeatedly, over and over again (e.g., every time the user clicks a button). This makes them potentially act a bit like the body of a `while` loop. However, because these callbacks are _functions_, any variables defined within them are **scoped** to that function, and will not be available on subsequent executions. Thus if you want to keep track of some additional information (e.g., how many times the button was clicked), you will need to use a variable declared _outside_ of the function (e.g., a **global** ). Such variables can be used to represent the **state** (situation) of the program, which can then be used to determine what behavior to perform when an event occurs, following the below pattern:
 

en/resources.md

@@ -6,23 +6,23 @@ chapter:
 ## Articles for learning JavaScript 
 
 
-1. Introduction to JavaScript by Hostinger [Link](https://www.hostinger.com/tutorials/what-is-javascript)
+1. Document Object Model reference [Link](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
 
-2. Introduction to JavaScript by Microverse [Link](https://www.microverse.org/blog/introduction-to-javascript-a-guide-for-beginners)
+2. Introduction to Events [Link](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)
 
-3. 	JavaScript Basics by Mozilla Developer [Link](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+3. Introduction to JavaScript by Hostinger [Link](https://www.hostinger.com/tutorials/what-is-javascript)
 
-4. JavaScript Tutorial by Geeks for Geeks [Link](https://www.geeksforgeeks.org/javascript/)
+4. Introduction to JavaScript by Microverse [Link](https://www.microverse.org/blog/introduction-to-javascript-a-guide-for-beginners)
 
-5. JavaScript Tutorial by Stackify [Link]( https://stackify.com/learn-javascript-tutorials/)
+5. 	JavaScript Basics by Mozilla Developer [Link](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
 
-6. What is the DOM? (CSS-Tricks) [Link](https://css-tricks.com/dom/)
+6. JavaScript Tutorial by Geeks for Geeks [Link](https://www.geeksforgeeks.org/javascript/)
 
-7. Document Object Model reference [Link](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
+7. JavaScript Tutorial by Stackify [Link]( https://stackify.com/learn-javascript-tutorials/)
 
 8. JavaScript HTML DOM reference [Link](https://www.w3schools.com/js/js_htmldom.asp)
 
-9. Introduction to Events [Link](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)
+9. What is the DOM? (CSS-Tricks) [Link](https://css-tricks.com/dom/)
 
 ## Books for learning JavaScript