---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------
DOM就是通过它操纵界面上的东西，使用JavaScript编程，开发DHTML。实现常见动态网页的效果。DOM就是HTML页面的的模型，将每一个标签都作为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中文本框、层等元素进行编程控制。
DOM就像WinForm一样通过事件、属性、方法进行编程。
CSS+JavaScript+DOM=DHTML
事件onmousedown鼠标点击时的执行的程序，如果相应代码过多，可单独下一个函数。如下程序1和程序2程序的执行效果相同
程序1
<head>
<title></title>
<script type=”text/javascript”>
</script>
</head>
<body οnmοusedοwn=”alert(‘别点我！’);alert(‘哈哈…’);”>
</body>
程序2
<head>
<title></title>
<script type=”text/javascript”>
function bodyonmousedown(){
alert(“别点我！”)；
alert(“哈哈…”);
}
</script>
</head>
<body οnmοusedοwn=”bodyonmousedowm()”>
</body>
可在事件中动态的添加事件响应函数
<head>
<title></title>
<script type=”text/javascript”>
function f1(){
alert(“我是f1”)；
}
function f2(){
alert(“我是f2”)；
}
</script>
</head>
<body>
<input type=”button” οnclick=”document.οndblclick=f1” value=”关联事件1”/>
<input type=”button” οnclick=”document.οndblclick=f2” value=”关联事件2”/>
</body>
在网页中双击会弹出消息对话框。
document是window对象的一个属性，因此可以省掉window，直接写document。
document方法：
1> write writeln(带回车)动在页面中写入内容，原内容不受影响
<head>
<title></title>
<script type=”text/javascript”>
document.write(“<a herf=’http://www.itcast.cn’>传智播客</a>”);
document.write(“<a herf=’http://www.rupeng.com’>如鹏网</a>”);
</script>
</head>
<body>
<script type=”text/javascript”> //<script>也可出现在<body>中
Document.write(“<font color=red>你好！</font>”)
</script>
<input type=”button” value=”点我呀!” οnclick=”document.write(‘hello’)”/>
哈哈哈哈哈哈哈
</body>
程序的执行结果：
1.开始运行时，页面显示“传智播客”、“如鹏网”的超级链接，显示红色字体的“你好！”，显示名称为“点我呀”的按钮，以及“哈哈哈哈哈哈哈”字样。
2.点击超级链接的字样，可实现超级链接，转到响应的网页。
3.点击按钮“点我呀”，只出现显示“hello”的页面。这是因为onclick事件的出发会冲掉也米那种的内容，只有在页面加载过程中write才会与原有内容融合在一起。
2>getElementById 页面中Id是唯一的，可直接通过Id来引用元素。
<head>
<title></title>
<script type=”text/javascript”>
function btnclick1(){
var txt=document.getElementById(“textbox1”);
alert(txt.value);
}
function btnclick2(){
var txt=document.getElementById(“textbox2”);
alert(txt.value);
}
</script>
</head>
<body>
<input type=”text” id=”textbox1”/>
<input type=”button” value=”点我！” οnclick=”btnclick1()”/>
<form action=”ok.apsx”> //<form>表单 action表单要提交的地址
<input type=”text” id=”textbox2”/>
<input type=”button” value=”点我” οnclick=”btnclick2()”/>
</form>
</body>
3>getElementsByName 页面中name不是唯一的，返回值为对象数组
<head>
<title></title>
<script type=”text/javascript”>
function radios(){
var r=document.getElementsByName(“gender”); //r中为一组数值
for(var i=0;i<r.length;i++){
var rad=r[i];
alert(rad.value);
}
}
</script>
</head>
<body>
<input type=”radio” name=”gender” value=”男”/>男
<input type=”radio “ name=”gender” value=”女”/>女
<input type=”radio” name=”gender” value=”保密”/>保密
<input type=”button” value=”点我！” οnclick=”radios()”/>
</body>
4>getElementsByTagName 通过标签取值
<head>
<title></title>
<script type=”text/javascript”>
function radios(){
var r=document.getElementsByTagName (“input”); //r中为一组数值
for(var i=0;i<r.length;i++){
var rad=r[i];
input.value=”hello”;
}
}
</script>
</head>
<body>
<input type=”text” />
<input type=”radio “ />
<input type=”button” value=”点我!” οnclick=”radios()”/>
</body>
程序的运行结果是所有input标签里对象的value都变为hello
使用getElementsByTagName()动态设事件
<head>
<title></title>
<script type=”text/javascript”>
function ini(){
var r1=document.getElementsByTagName(“input”);
for(var i=0;i<r1.length;i++){
var j=r1[i];
iuput.οnclick=ini2();
}
}
function ini2(){
var r1=document.getElementsByTagName(“input”);
for(var i=0;i<r1.length;i++){
var j=r1[i];
if(j==window.event.srcElement){
// window.event.srcElement取得引发事件的控件
input.value=”你好啊！”
}
else{
input.value=”点我啊!”;
}
}
}
</script>
</head>
<body οnlοad=”ini()”>
<input type=”button” value=”点我啊！”/>
<input type=”button” value=”点我啊！”/>
<input type=”button” value=”点我啊！”/>
<input type=”button” value=”点我啊！”/>
</body>
程序运行结果：点击的那个button的vulue值变为“你好“，其余为”点我啊“
练习1 十秒钟之后注册按钮才能使用
<head>
<title>注册</title>
<script type=”text/javascript”>
var LS=10; //初始值为10秒
var intervalid;
function count(){
var btnreg=document.getElementById(“btnreg”);
if(btnreg){ //判断按钮是否加载完成
if(LS<=0){
btnreg.value=”同意”;
btnreg.disabled=”false”;//这里可以为空，效果相同
clearInterval(intervalid);//停止计数器计数
}
else{
btnreg.value=”请仔细阅读协议，还剩+LS+秒”;
LS--;
}
}
}
intervalid=setInterval(“count()”,1000);//一秒钟执行一次count（）
</script>
</head>
<body>
<textarea></textarea>
<input id=btnreg type=”button” value=”同意”disabled=”disabled” />
</body>
练习2 加法计算器
<head>
<title></title>
<script type=”text/javascript”>
function click(){
var t1=document.getElementById(“txt1”).value;
var t2=document.getElementById(“txt2”).value;
t1=parseInt(t1,10); //parseInt将字符串转换为数，后面的10表示十进制
t2=parseInt(t2,10); //变量t1、t2为弱类型，不用重新声明
document.getElementById(“txtresult”).value=t1+t2;
}
</script>
</head>
<body>
<input type=”text” id=”txt1”/>+<input type=”text” id=”txt2”/>
<iput type=”button” οnclick=”click()” value=”=”/><input type=”text” id=”txt3” id=”txtresult” readonly/>
</body>
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
