Accessing an element in document
Every HTML document is actually present in layers. According to the hierarchy, we can reach any of them as per our use. Beginning with some concepts, we will eventually move to a simple example to illustrate those points.
It helps us to access any particular ID present on the page directly , without any reference to its parents or any other relatives. However, in many situations if we wanna to access a div which is annonymous or through some automated code, we need to use other hierarchy relationships.
One of the most powerfull and broad way of collecting all the tags present on the page is :-
Tag refers to everything on the page that starts with a "<>" and ends with a ">" . Ex - html, body, a , img etc.
So, this method returns with an array of all the tags present on the page together. Often using a filter is advisable depending upon the use.
Suppose, we wanna impose some condition on the links on our website. For this we need to collect all the elements on our page with a(link) tag.
document.getElementByTagName('<a>') As a result we have a list of all the links on our document . Now, we can impose any condition on them as per as our wish.
Lets begin HTML DOM traversing with a simple example
<body> <ol id='ol1'> <li id='li1'> <span id='span1'> This is Text 1 </span> </li> <li id='li2'> <span id='span2'> This is Text 2 </span> </li> <li id='li3'> <span id='span3'> This is Text 3 </span> </li> </ol> </body>
Suppose we wanna refer to the id ol1 in the above example, it can be done in a number of ways :-
document.getElementById("ol1") document.getElementsById("li1").parentNode document.getElementsByTagName("ol").item(0) document.getElementsByTagName("li").item(0).parentNode document.getElementsByTagName("li").item(1).parentNode document.getElementsByTagName("l1").item(2).parentNode document.getElementsByTagName("span").item(2).parentNode.parentNode document.getElementsByTagName("body").item(0).childNodes.item(0) document.body.childNodes.item(0)
Basically DOM traversing can be very useful both for the user and admin of a website. User can use this to access data from some other site by looking into the source code of the website, while, the admin of the website can use it to update or place contents to any particular page of the website. Infact, Ajax uses this to place the updated contents at correct place.
For an example, suppose we wanna read the contents of span3 in above example . It can be done by :-
We will discuss about node properties and methods in next chapter.
For some more methods of DOM , lets move forward :-