<<Back to Article

Manipulate HTML Elements With Prototype

/skill level/
/viewed/
0 Times

This code inserts a few elements on the page to select and manipulate certain HTML elements on the page using the Prototype JavaScript framework. This code was written for use in Adam DuVander's Get Started With Prototype tutorial.

Since this code depends on the Prototype JavaScript framework to run, you'll need a copy of the Prototype JavaScript library.

This code is in a wiki. If you have any advances to make to the original tutorial and code, please feel free to contribute.

The Code

<html>
<head>
	<title>Testing Prototype</title>
	<script src="prototype.js"></script>
	<style>
		#container div, #container span
		{
			width: 150px;
			height: 150px;
			display: block;
			float: left;
			border: 1px solid black;
		}
		#container .highlight
		{
			border: 3px solid orange;
		}
		p
		{
			clear: left;
		}
		p input
		{
			display: block;
		}
	</style>
	<script>
	function test_byid()
	{
		$("second").toggleClassName("highlight");
	}
	function test_byclass()
	{
		$$(".test").each(function(elmt) { elmt.toggleClassName("highlight") });
	}
	function test_bytag()
	{
		$$("span").each(function(elmt) { elmt.toggleClassName("highlight") });
	}
	function test_byfirstresult()
	{
		$$("span:first-child").each(function(elmt) { elmt.toggleClassName("highlight") });
	}
	function test_byfunction()
	{
		$$("span:not(#second)").each(function(spanobj) {
		  spanobj.toggleClassName("highlight");
		});
	}
	document.observe('dom:loaded', function() {
		$("myclicker").observe("click", function() { alert('Clicked!'); });
	});
	</script>
</head>
<body>

<div id="container">

<span>SPAN<br />No id</br />No class</span>
<span class="test" id="second">SPAN<br />id="second"</br />class "test"</span>
<div class="test">DIV<br />No id</br />class "test"</div>


</div>

<div id="myclicker">Click me!</div>

<p>
<strong>Toggles:</strong>
<input type="button" onClick="test_byid();" value="id='second'" />
<input type="button" onClick="test_byclass();" value="class='test'" />
<input type="button" onClick="test_bytag();" value="tag is 'span'" />
<input type="button" onClick="test_byfirstresult();" value="the first object where tag is 'span'" />
<input type="button" onClick="test_byfunction();" value="tag is 'span', but id is not 'second'" />
</p>

</body>
</html>

What it Looks Like

Retrieved from "http://www.webmonkey.com/codelibrary/Manipulate_HTML_Elements_With_Prototype"
  • This page was last modified 19:27, 3 October 2008.
Edit this article
Reddit Digg