Code 201: 06 - JS Object Literals, The DOM

---

Read: JS Text pp 100-105

Objects group a set of variables and functions of a model

• Properties in an object, a variable becomes a property
• Methods in an object, a function becomes a method
• Example:

var hotel = {

    name: 'Quay',                             //property
    rooms: 40,                                //property
    booked: 25,                               //property
    gym: true,                                //property
    roomTypes: ['twin', 'double', 'suite'],   //property

    checkAvailability: function() {           //Method, this is a function
        return this.room - this.booked;
    }
};

• name: key property
• 'Quay' value property
• this.room keyword “this” indicates that it is using the rooms property of this object

Accessing an object Dot Notation

var hotelName = hotel.name;                         //declares the variable hotelName and assigns the value 'Quay' dot notation
var roomsFree = hotel.checkAvailability();          //declares teh variable roomsFree an assigns the value of the function output dot notation

var hotelName = hotel['name'];                      //same as above using square bracket notation
var roomsFree = hotel['checkAvailability']();       //same as above using square bracket notation

Read: JS Text pp 183-242

DOM Document Object Model

API Application Programming Interface

• DOM tree is a model of a web page
• Accessing the DOM tree involves two steps
  • locating the node that represents the element to update
  • use its text content, child elements, and attributes

DOM Tree Access and Update

• getElementById(); uses the value of an element’s id to select an element’s node
• querySelector(); uses a CSS selector and returns the first matching element
• getElementsByClassName(); selects all elements that have a specific value ofr their class
• getElementsByTagName(); selects all elements that have a specified tag name
• querySelectorAll(); uses a css selector to select all matching elements
• parentNode selects the parent of current element node
• previousSibling / nextSibling selects previous or next sibling from DOM tree
• firstChild / lastChild selects the first or last child of current element
• nodeValue property lets you access or update contents of a text node
• innerHTML property allows access to child elements and text content
• textContent another just the text content
• createElement() / createTextNode() / appendChild() / removeChild () let you create a new notes, add nodes to a tree and remove nodes from a tree, called DOM manipulation
• className / id lets you get or update value of the class or id attributes
• hasAttribute() / getAttribute() / setAttribute() / removeAttribute() first checks if attribute exists, second gets value, third updates value, fourth removes attribute

Caching DOM Queries

• Example: getElementByID('one'); tells interpreter to find element whose id attribute is 'one', then can do work with it, its parent, or child
• Example: var itemOne = getElementByID('one'); variable stores a reference to the object in the DOM tree (storing the location of the node)

Methods that select single elements

• document.getElementById('one');
  • document refers to the document object
  • . member operator, dot notation indicates that the method (on the right) is being applied to the nod on teh left of the period
  • getElementById('one'); method, indicates that you want to find an element based upon the value of its id attribute
  • 'one' *parameter, value of the id attribute to find`

---

Return to reading-notes Deployed Site

Return to reading-notes Mark Down