3.
操作
DOM.
Prototype
提供了一些简便的方法来操作
DOM
。
document.getElementsByClassName(“myclass”)
根据
class
的名称来取得元素。不管
class
的名称是不是唯一的它都是返回一个数组。
<html>
<head>
<title>
操作
DOM
的例子
</title>
<script src="/script/prototype.js"></script>
<script type=”text/javascript”>
function show() {
var mydiv = document.getElementsByClassName(myclass) ;
alert(mydiv.length);
alert(mydiv[0].innerHTML);
}
</script>
</head>
<body>
<div class="myclass">Test</div>
<input type="submit" value="click" onclick=" show ()">
</body>
</html>
$(element,…)
根据元素的
id
返回元素对象。
<html>
<head>
<title>
操作
DOM
的例子
</title>
<script src="/script/prototype.js"></script>
<script type=”text/javascript”>
function show() {
var mydiv = $(“mydiv”);
alert(mydiv);
}
</script>
</head>
<body>
<div id=”mydiv”>Test</div>
<input type="submit" value="click" onclick=" show ()">
</body>
</html>
如果传入的参数是多个元素的
id
，那将返回一个包含元素对象的数组，例如：
<html>
<head>
<title></title>
<%=javascript_include_tag(
:defaults
)%>
<script
type
="text/javascript">
function show(){
var mydiv = $("mydiv1","mydiv2");
alert(mydiv.length);
//---------2
}
</script>
</head>
<body>
<div
id
="mydiv1"></div>
<div
id
="mydiv2"></div>
<input
type
="button" value="show" onclick="show();"/>
</body>
</html>
$F("")
根据元素的
id
取得元素的值。
<html>
<head>
<title></title>
<%=javascript_include_tag(
:defaults
)%>
<script
type
="text/javascript">
function show(){
var myValue = $F("myText");
alert(myValue); //-----myvalue
}
</script>
</head>
<body>
<input
type
="text" value="myvalue" id="myText"/>
<input
type
="button" value="show" onclick="show();"/>
</body>
</html>