JavaScript - Document Object Model - Query Selectors - Practice

Consider the following body code:

<body>
<ul>
  <h1 id="firstId">hey there</h1>
  <li ><a href="#">Link 1</a></li>
  <li class = "dimple">full</li>
  <li class = "pimple">ness</li>
  </ul>
</body>

Using query selectors on it:

document.querySelector("a").style.backgroundColor = "red";

.. this will change the background of the first anchor tag to red.

document.querySelector(".pimple").style.backgroundColor = "red";

.. this will change the last list item to red color - since it is having the class = pimple.

Since, .pimple class is the third list item. We can also select it using:

document.querySelectorAll("li")[2].style.backgroundColor = "red";

Now, if I want to highlight the link:
document.querySelector("li").firstElementChild.style.backgroundColor = "red";

If I want to change the text of the link:

document.querySelector("li").firstElementChild.textContent = "Its a Link";

JavaScript - Document Object Model - Selecting Elements

First the mediocre way:

console.log(document.getElementsByTagName("li"));

This will return an complex object with an array containing all the list elements. 

Now, add the following body code with CSS class names:

<body>

<ul>

<h1 id="firstId">hey there</h1>

  <li class = "simple">Mind</li>

  <li class = "dimple">full</li>

  <li class = "pimple">ness</li>

  </ul>

</body>

The following will list all elements by Class Name:

console.log(document.getElementsByClassName("simple"));

You can also get element by Name:

console.log(document.getElementById("simple"));

Query Selectors: 

There is a best way as well. JavaScript also has querySelectors:

console.log(document.querySelector("li"));

querySelectors use the CSS selectors. Now, if you want to select using the class Name:

console.log(document.querySelector(".simple"));

But, this returns only one element. But, if you want to return all the elements as an array:

console.log(document.querySelectorAll(".simple"));

We can also use the hashtag (#) selector to select by ID:

Add the follow

console.log(document.querySelector("#firstId"));

... this selects element by ID.

After selecting, we can change the background color of the selected element:

console.log(document.querySelector("#firstId").style.backgroundColor="red");

query selector makes it easier as you do not have this chain calls. 

JavaScript - Document Object Model - Traversing DOM

Plug in the following body in your html code:

<body>
<ul>
  <li>Mind</li>
  <li>full</li>
  <li>ness</li>
</ul>
</body>


Try the following to practice traversing DOM:

console.log(document.body.firstElementChild);
console.log(document.body.firstElementChild.firstElementChild);
console.log(document.body.firstElementChild.firstElementChild.nextElementSibling);
console.log(document.body.lastElementChild);
console.log(document.body.firstElementChild.parentElement);


Practice at:
http://jsbin.com

JavaScript - Document Object Model - DOM Interaction

After window object and location object. Let us now check out the Document Object. The document object is just another object on the window object.

So, If I run:

console.log(document);

... the screen is filled with lot of information. This is not really helpful. We can access the URL property to get our current URL:

console.log(document.URL);

But, we could use the location object for the same. The document object has the title property. So, when I run the following:

console.log(document.title);

.. I can see the title of the page. The document also has the body. So, if I type this:

console.log(document.body);

.. we get our DOM. That is, our translated HTML code and all the events in it. So, this is a very important part. So, if I want to view the children:

console.log(document.body.children);

I get an array of all the HTML tags represented as objects here. Because, they are translated into objects by the browser with their own attributes and properties and we can work with that and manipulate this.

Now, I will add the following to the body element:

<body>
<h1>hey there!</h1>
</body>

Now, to view the text content in the first child element of the body (h1 tag):

console.log(document.body.children[0].textContent);

We can also change the textContent in the H1 tag:

document.body.children[0].textContent = "Its me!"

This concept is really useful at a lot of places. This is because, you do not need to reload the page. That is, you do not need to get a new page from the server, but, you change the existing page. And, single page applications like angular - do exactly this. They have one single page and change it all the time. And, we can do this on our own as well by accessing the properties of your HTML elements.
You change them or you can get them or you can do whatever you need to do.

Now, how do we find out which property an element has ? We can log

console.log(document.body.children[0]);

These are all the properties you can access.  Now, let us access the style property:
document.body.children[0].style.backgroundColor = "red";

Practice at:
http://jsbin.com

JavaScript - Document Object Model - Location object

The location object in JavaScript refers to the location bar in the browser. Examples:

• console.log(location.pathname)
• console.log(location.reload())
• console.log(location.replace("https://www.google.com"))

Location object is very useful to know where you are and to get to another point where you want to navigate to.

Refer:
https://developer.mozilla.org/en-US/docs/Web/API/Location

Practice at:
http://jsbin.com

JavaScript - Document Object Model - Window object

let a = window.innerWidth;
console.log(a);

Since, we are in the widow is the global object. That is why we can just use it as:
console.log(innerWidth);

If we want to actually, see the width of the window, check the outerWidth variable
console.log(outerWidth);

To check the height of the window:
console.log(innerHeight);
console.log(outerHeight);

To know all the available properties on the window object:
console.log(window);

The window object is a really complex object - giving access to high level features here. The methods: setTimeout and setInterval are also the methods available on the window object.

localStorage: It is a built in storage which will save certain values in the browser - as long as the application is running here. We can use the setItem method on the localStorage:

localStorage.setItem('key1',55);

Now, we can get the value stored against the key using the getItem method.
console.log(localStorage.getItem('key1'));

sessionStorage: We also have sessionStorage, which is similar to localStorage:

sessionStorage.setItem('key1',55);
console.log(sessionStorage.getItem('key1'));

The difference is the localStorage will persist. But the sessionStorage will be deleted or emptied when the user closes the tab or the browser.

location: The window object also has the location you are currently at:
console.log(window.location);

document: The window object also has access to the document or the DOM:
console.log(window.document); // the dom

open: This will open the URL in a separate tab:
window.open("http://www.google.com");

The goal is not to learn all. But, to know how to find and use these objects. The global scope we are referring to the window object. So, the global scope is the window object. Therefore, we do not need to use window.anything... we can use
window.open("http://www.google.com");

as

open("http://www.google.com");

Refer:
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction


Practice at:
http://jsbin.com/?js,console

JavaScript - Built in Feature - Regular Expressions

Regular Expressions are patterns used to match character combination in strings. Below are some examples:

var myString = "a quick brown fox jumped over the lazy dog";
console.log(myString);

var myPattern = /fox/;
console.log(myPattern);

console.log(myPattern.exec(myString));
console.log(myPattern.test(myString));
console.log(myString.match(myPattern));
console.log(myString.search(myPattern));

Console Output:

• "a quick brown fox jumped over the lazy dog"
• [object RegExp] { ... }
• ["fox"]
• true
• ["fox"]
• 14

Regular expressions are a science of their own. There are a lot of special characters you can use to build complex queries.

Consider the following stackoverflow question:
https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript

Without regular expressions, you would have to loop through each character in the string to search for patterns. Using pattern matching with regular expressions makes this problem simple. The pattern does look difficult. But, we can google for help. Also, we we know it, then the difficulty reduces. It is quick as it offers a great performance and it is a one liner. You do not have to write multiple nested loops to acheive the same with slower performance.

The 3 important methods in Regular expressions:

• exec
• test
• match

Refer:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Practice at:

• http://jsbin.com