Download
1 / 7
100 likes | 300 Views
HTML. Markup language - controls appearance & content of a document. <html> </html>. Javascripts. <head> </head>. <script> </script>. trigger function execution. <body> </body>. <img /> <form> </form>. events. HTML tags. JS Functions Defined. <html>
E N D
HTML Markup language - controls appearance & content of a document <html> </html> Javascripts <head> </head> <script> </script> trigger function execution <body> </body> <img /> <form> </form> events HTML tags
JS Functions Defined <html> </html> function F1(p) { } <head> </head> <script> </script> <body> </body> JS Functions Execution Triggered by Events
How to access HTML Elements for processing id attribute - uniquely identifies an HTML element used in place of name attribute getElementById ( id ) "DOM' method - lets youretrieve an HTML element - document.getElementById (id) .value
How to use id & getElementById ... in tandem To dynamically alter html elements On the client side
function F1(p) { } Access cell by id <head><script> </script></head> style.background='tan' Change attribute Cell Event In Table document. getElementById(p). document. getElementById(p). firstChild.data="Goodbye" id attribute <body> </body> <table><tr> </tr></table> 1st sub-element of <td> <td > </td> id = 11 onclick="F1(id)" Hello data
DOM Hierarchy document head title cell by id firstChild Html element could have been an img tag data src height with its attributes text
function F1(p) { } <head><script> </script></head> Cell Event In Table document. getElementById(p). firstChild.src="eagle.gif" <body> </body> <table><tr> </tr></table> 1st sub-element of <td> <td > </td> id = 11 onclick="F1(id)" <img src='us.gif' >
