Objects group together a set of variables and functions to create a model of something you would recognize from the real world. In an object, variables and functions take on new names.
If a variable is part of an object, it is calles property. Properties tell us about the object, such as the name of a hotel or the number of rooms it has.
If a function is part of an object, it is called a method. Methods represent tasks that are associated with the object. For example, you can check how many rooms are available by subtracting the number of booked rooms from the total number of rooms. like variables and named functions, properties and methods have a name and a value. In an object that value is called a key; cannot have two keys with the same name; the value of a property can be a string, number, boolean, array or even another object;
note the object is the curly braces and their content; separate each key from its value with a colon; separate each property and method with a comma;
Creating an Object
var hotel = {
name: 'Quay',
rooms: 40,
booked: 25,
gym: true,
roomTypes: ['twin', 'double', 'suite'],
checkAvailability: function() {
return this.rooms - this.booked;
}
};
To access a property or method of an object you use the name of the object, followed by a period, then the name of the property or method. This is known as dot notation.
Also we can access the properties or methods of an object using square bracket syntax.
var hotelName = hotel.name;
var roomsFree = hotel.checkAvailability();
var hotelName = hotel['name'];
var roomsFree = hotel['checkAvailability']();
Square bracket syntax is most commonly used when:
- The name of the property or method contains special characters (such as a dash)
- The name of the property is a number (technically allowed, but should generally be avoided)
- A variable is being used in place of the property name.
The Document Object Model specifies how browsers should create a model of an HTML page and how JavaScript can access and update the contents of a web page while it is in the browser window.
The DOM is neither part of HTML, nor part of JavaScript; it is a separate set of rules. It is implemented by all major browser makers, and covers two primary areas:
When the browser loads a web page, it creates a model of the page in memory.
The DOM specifies the way in which the browser should structure this model using a DOM tree. The DOM is called an object model because the model (the DOM tree) is made of objects.
Each object represents a different part of the page loaded in the browser window.
The DOM also defines methods and properties to access and update each object in this model, which in turn updates what the user sees in the browser.
Body of HTML Page
<html>
<body>
<div id = "page">
<h1 id ='header'>List</h1>
<h2>Buy groceries</h2>
<ul>
<li id = "one" class = "hot"><em>fresh</em> figs</li>
<li id = "two" class = "hot">pine nuts</li>
<li id = "three" class = "hot">honey</li>
<li id = "four">balsamic vinegar</li>
</ul>
<script src = "js/list.js"></script>
</div>
</body>
</html>
As a browser loads a web page, it creates a model of that page. The model is called a DOM tree, and it is stored in the browsers' memory. It consists of four main types of nodes.
Every element, attribute, and piece of text in the HTML is represented by its own DOM node. At the top of the tree a document node is added; it represents the entire page. When you access any element, attribute, or text node, you navigate to it via the document node. It is the starting point for all visits to the DOM tree.
HTML elements describe the structure of an HTML page. The <h1> - <h6>
elements describe what parts are headings; the <p>
tags indicate where paragraphs of text start and finish; and so on.
To access the DOM tree, you start by looking for elements. Once you find the element you want, then you can access its text and attribute nodes if you want to. This is why you start by learning methods that allow you to access element nodes, before learning to access and alter text or attributes.
The opening tags of HTML elements can carry attributes and these are represented by attribute nodes in the DOM tree. Attribute nodes are not children of the element thar carries them; they are part of that element. Once you access an element, there are specific JavaScript methods and properties to read or change that element's attributes. For example, it is common to change the values of cl ass attributes to trigger new CSS rules that affect their presentation.
Once you have accessed an element node, you can then reach the text within that element. This is stored in its own text node. Text nodes cannot have children. If an element contains text and another child element, the child element is not a child of the text node but rather a child of the containing element. (See the element on the first
Accessing and updating the DOM tree involves two steps:
Locate the node that represents the element you want to work with. Use its text content, child elements, and attributes
+ getElementById('id')- uses the value of an element's id attribute (which should be unique within the page)
+ querySelector('css selector') - uses CSS selector, and returns the first matching element
#### Select multiple elements (Nodelists)
+ getElementsByClassName('class')- selects all elements that have a specific value for their class attribute
+ getElementsByTagName('tagName') - selects all elements that have the specified tag name
+ querySelectorAll('css selector')- uses a CSS selector to select all matching elements.
+ parentNode- selects the parent of the current element node (which will return just one element)
+ previousSibling / nextSibling - selects the previous or next sibling from the DOM tree
+ firstChild/ lastChild - select the first or last child of the current element.
- nodeValue- this property lets you access or update contents of a text node
- innerHTML- allows access to child elements and text content
- textContent- allows access just to the text content
- createElement(), createTextNode(), appendChild()/removeChild()- let you create new nodes, add nodes an dremove nodes froma tree.
- hasAttribute()- checks if an attribute
- getAttribute()- gets its value
- setAttribute()- updates the value
- removeAttribute()- removes an attribute
caching DOM querries:
methods that find elements in the DOM tree are called DOM querries. When you work w an element > 1 u should use a var to store the results of this querry so the interpreter doent have to search again. You are storing the location of the elements within the DOM tree in a variable. The properties and methods of that element node work on the variable.
var itemOne = getElementById('one'); doesnt store the element but a reference to where that element node is on the DOM tree; to access the text content of that element, u might use the variable name itemOne.textContent.
select the element and store it in a variable; var el = document.getElementById('one'); - select the element and store it in a variable; el.className = 'cool'; - update the value of the class attribute to ="cool";
returns only the first of matching elements;
comes back in a node list like an array - with index number 0-...; but it is a type of object (type of) --- called a collection; --- you can select a specific item out of that node-list; --- you can loop through the items of the list and change and perform the same statements on each of the element nodes
var elements = document.getElementsByClassName('hot'); // Find hot items
if (elements.length > 2) { // If 3 or more are found
var el = elements[2]; // Select the third one from the Nodelist
el.className = 'cool'; // Change the value of its class attribute
}
var elements = document.getElementsByTagName('li'); // Find <li> elements
if (elements.length > 0) { // If 1 or more are found
var el = elements[0]; // Select the first one using array syntax
el.className = 'cool'; // Change the value of the class attribute
}
use CSS selector syntax to select one or more elements and return all of those that match;
If you want to apply the same code to numerous elements, looping through a Nodelist is a powerful technique.
It involves finding out how many items are in the Nodelist, and then setting a counter to loop through them, one-by-one.
var hotItems = document.querySelectorAll('li.hot'); //Store Nodelist in array
if (hotItems.length > 0) { // If it contains items
for (var i = 0; i < hotItems.length; i++) { //Loop through each item
hotItems[i].className = 'cool'; // Change value of class attribute
}
}
Explanation of an example above: In this example, the Nodelist is generated using querySelectorAll(), and it is looking for any <li>
elements that have a class attribute whose value is hot. The Nodelist is stored in a variable called hotItems, and the number of elements in the list is found using the length property. For each of the elements in the Nodelist, the value of the cl ass attribute is changed to cool .
var itemTwo = document.getElementById('two'); //Get second list item
var elText = itemTwo.firstChild.nodeValue; // Get its content
elText = elText.replace('pine nuts', 'kale'); // Change pine nuts to kale
itemTwo.firstChild.nodeValue = elText; // Update the list item
Create a new element and store it in a variable
var newEl = document.createElement('li');
Create a text node and store it in a variable
var newText = document.createTextNode('quinoa');
Attach the new text node to the new element
newEl.appendChild(newText);
Find the position where the new element should be added
var position = document.getElementsByTagName('ul')[0];
Insert the new element into its position
position.appendChild(newEl);
var removeEl = document.getElementsByTagName('li')[3]; // The element to remove
var containerEl = removeEl.parentNode; // Its containing element
containerEl.removeChild(removeEl); // Removing the element