Finished DOM Notes

05 The DOM.md

@@ -5,13 +5,55 @@ In all the previous labs you have been writing JavaScript code to run on the ser
 
 ## 1 The DOM
 
+xxx
+
+### 1.1 Getting a Refrerence to a DOM Element
+
+One of the first tasks you will face when working with the DOM is getting a reference to the correct DOM object. There are two approaches.
+
+#### 1.1.1 Direct Reference
+
+The simplest way is to use a _CSS Selector_ to get a reference to the element or elements you want to manipulate.
+
+1. The `document.querySelector()` function takes a string parameter which is the _CSS Selector_ that can identify the DOM objects you want to reference. For example `document.querySelector('h1')` returns a reference to the top-level heading on the page. If there are more than one element matching the CSS selector it returns the first match.
+2. If you want to get a reference to multiple elements such as all the list items you should use the `document.querySelectorAll()` function which returns an array of all the matching DOM objects. For example `document.querySelectorAll('li')` returns an array of all the items in all lists on the page.
+
+#### 1.1.2 The Event Object
+
+When an event handler is _fired_, the function called is passed a single parameter , often labelled as `e` which is an object representing the _event_. This contains a property called `target` which stores the DOM of the element that triggered the event itself. So, for example, if you clicked on an item in a list to trigger the event, the `target` would contain a reference to the `li` element. This is useful when you want to use the same event handler to handle events triggered by multiple elements such as items in a list.
+
+For example both lines of code below get a reference to the first table cell on the first row.
+
+```javascript
+document.querySelectorAll('tr')[0].childNodes[0].innerHTML
+document.querySelector('table').rows[0].childNodes[0].innerHTML
+```
+
+### 1.2 Traversing the DOM
+
+When you are working with the DOM you will frequently need to access the parent DOM element or perhaps the child one. This is called _traversing the DOM_ and there are a number of important properties and functions you will need to use:
+
+1. To access the _parent_ node (such as the `ol` node when you select a `li` node) you use the `parentElement` property.
+2. To access a _child_ node (for example the `li` node if you are referencing the `ol` node) you will need to make use of the `childNodes` array. For example to access the third item in the list you would use the expression `.childNodes[2]`. If there is only a single child node you can use the `firstChild` property instead.
+3. Once you have a reference to the desired DOM node you will often want to access the text inside it. This can be accessed using the `innerHTML` property.
+
+By chaining these together you can navigate both up and down the DOM tree to locate the DOM object you want, for example the following returns the contents of the first cell of the table row regardless of which cell in the row was clicked.
+
+```javascript
+e.target.parentElement.firstChild.innerHTML
+```
+
 ### 1.1 Test Your Understanding
 
-1. When the user tries to delete an item, use the `alert()` function to ask if they are sure.
-2. When a row is deleted, bring the focus back to the input box.
+1. When the user tries to delete an item, use the `confirm()` function to ask if they are sure. This returns true if the user agrees.
+    1. Display the name of the item being deleted in the confirmation dialog using one of the three ways to access the table DOM.
+2. When the confirm dialog closes, bring the focus back to the input box.
+    1. If the user clicks on any of the cells the focus shound return to the input box.
 3. Use the `e.target.innerHTML` property to prevent the row being deleted unless the user clicks on the `delete` link.
 4. Add a second textbox called `qty`, this will hold the number of items being added.
-5. Add a second column to the table to display the quantity of each item.
+    1. When the item name is added and the enter key pressed focus should move to the qty field.
+    2. When a quantity is entered and the enter key pressed the data should be added to the table.
+5. Add a column between the item name and the delete link (making a total of 3 columns) to the table to display the quantity of each item.
 6. Prevent items being added if they are already in the list.
 7. When a duplicate item is added increase the qty of the item already in the list.