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
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";
http://jsbin.com
No comments:
Post a Comment