Open the JavaScript Console in Chrome. Practice using the following JavaScript methods with the elements on this page. Access HTML elements by their class, ID or tag.
document.getElementById( );document.getElementsByClassName( );document.getElementsByTagName( );someImage.getAttribute( );someImage.setAttribute( );At the bottom of this page, you'll find examples showing how you can practice in the JavaScript Console.
View Page Source to see classes and IDs used in the HTML.
Ravana carries Sita away to Lanka, where Sita is kept under the heavy guard of rakshasis. Ravana demands Sita marry him, but Sita, eternally devoted to Rama, refuses. Rama and Lakshmana learn about Sita's abduction, and immediately set out to save her. During their search, they meet the demon Kabandha and the ascetic Shabari, who direct them towards Sugriva, the monkey king, and Hanuman.
Having received Hanuman's report on Sita, held prisoner in Lanka, Rama and Lakshmana proceed with their allies towards the shore of the southern sea. There they are joined by Ravana's renegade brother Vibhishana. The monkeys construct a giant floating bridge across the ocean, and the princes and their army cross over to Lanka. A lengthy battle ensues, in which Rama eventually kills Ravana.
After learning about Sita's abduction, Hanuman assumes a gargantuan form and makes a colossal leap across the sea to Lanka. On the way he meets with many challenges, including a fight with a demon. He spies on Ravana. He locates Sita in Ashoka grove, reassures her, and gives her Rama's signet ring as a token of faith.
Text adapted from Wikipedia entry Ramayana.
Above: An example of .getElementsByTagName( ); — note that the h2 elements obtained are put into an array. We access the items in the array with the usual JavaScript array methods.
Above: An example of .getElementById( ); — note that only one element can have a particular id, so this is not an array. The element with id="Rama" happens to be an image. We are able to get the value of its src attribute.
Above: An example of .getElementsByClassName( ); — note that the elements obtained are put into an array. All of these are img elements, and we are able to get the value of their alt attributes.
Above: Another example of .getElementsByClassName( ); — compare with the previous example. All the elements with class="special" are SPANs enclosing phrases within the paragraphs.