In previous lesson we discuss about that browser's is made up away Higher key of objects and top place of in list maintain window object but we looking for in this lesson is Document Object. In other words we can say we looking for DOM : Document Object Model. We use several time DOM method while using Java script. Dom is use for manipulate and change dynamically content in web pages, interact with web pages by some ways.
So in this lesson we start looking at the DOM and by seeing how can we access elements within the page several ways to do so. In previous lesson's we learn how a HTML page load (top to bottom) and why we write Java code into bottom of HTML page because if we put Java code top of the page than our browser run Java script before download web page. There are one more reason to put code in bottom than because our code only can access all id and class after downloading all content of body element, if we put in top than we can't access them properly.
It's sets of objects that we use order to access individual elements into the page. manipulate them by changing the content or style. We can also use the DOM to dynamically add elements to the page who we can remove them whenever we no need of them too. So in this lesson we learn how can we access web page elements because there are several ways to do so.
In above image we mention some paragraph or p tags if we want to access them by Java script so we can use document.getElementsByTagName("p");. When we access ByTagName than we returns values looks like an Array But they are not arrays they are spacial type of object called node list. Node list objects give to us by DOM API, Now what special about Java node list items ? They are live. They are live representation of element within the document. Whenever we call document.getElementsByTagName and target p than they access all of p elements.
In above code we create a var pElement for store values of all paragraph elements which selected by document object method and than we display pElements on console screen. We can also use alert method for display but we use here console.log because all selected item return their values like arrays list so console.log method is ability to display node list and we can also use or read this information easily.
In case of using alert method if we only want to display counting of p elements on pop up screen than we can use alert(pElements.length);method. It returns only total value of paragraph items.
In case of find of particular pElement we can also find this by using some mathematical calculation it's very easy no need to be afraid, suppose we want to retrieve last item of paragraph item so we can use this easy way.
But this is looking weired right because it's display the last paragraph item value or inner property is undefined. So how can we solve this let's see.We can solve this problem with an easy way there is one more good method which can we use by given an id to particular paragraph item and than we can retrieve that p element by using document.getElementById. In other words we can say we are selecting p element by their id.
In last code we implied an id to last or paragraph 2 than we use document.getElementById("foo") method for retrieve by id foo than we display p Element code on console screen we can also use here alert method.
These both methods ByID and ByTagName are very old we can also use new method is Css Query Method for selection an id.
1. document.querySelector :
var pElement = document.querySelector("p"); || If we prefer p than it find first p element in document. So lets do alert this.
alert(pElement.parentNode.tagName); || display Body It means which p element we selected is a part of Body.
2. document.querySelectorAll :
var pElement = document.querySelectorAll("p"); ||Select all p Elements and this is return to a node list property so we have to change something into alert method.
alert(pElement.length); || display total no of pElements
