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>