JavaScript - Document Object Model - Delete Element

Let us first explore the cross browser method of deleting elements. Consider the following body code:

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

Now, if you want to remove the second list item with text = full . Then we do it in the following manner:

var a = document.querySelectorAll('li')[1];
a.parentElement.removeChild(a);

This looks somewhat inconvinient as we are first selecting the parent and then removing the child. But, this is the only method with is supported by the older browsers.

The better way would be to just call the remove method.
var a = document.querySelectorAll('li')[1];
a.remove();

But use this with caution as it does not work with all the browsers.

JavaScript - Document Object Model - Insert Element

Let us work on the following body code:

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


Consider the following example:

var p = document.createElement("P");
p.textContent = "A new Paragraph!";
p.style.fontSize = "16px";
console.log(p);
// let us decide where we want to add it

var a = document.querySelectorAll("li")[0];
a.appendChild(p);

This will insert the paragraph inside the first list item after the anchor tag. Now, if I want to insert it before the anchor tag.

var p = document.createElement("P");

p.textContent = "A new Paragraph!";

p.style.fontSize = "16px";

console.log(p);

// let us decide where we want to add it

var li = document.querySelectorAll("li")[0];

var a = li.firstElementChild;

li.insertBefore(p,a);

So, this is how we can add the elements at different places of our document. 

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