Javascript——DOM编程
Javascript——DOM编程
基本概述
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。具体定义可以参考——百度百科
DOM的必要性
1、DOM编程重要的作用是可以让用户对网页元素进行交互操作。
2、DOM编程可以用来做网页游戏。
3、DOM编程是ajax的重要基础。
PS:前端三大件是(HTML、CSS、JavaScript),其中JavaScript中最重要的就是DOM编程。
案例:
JS17_1.html
<!DOCTYPE html>
<html><head><script type="text/javascript">function checkUser(){if($("username").value == "zs" && $("password").value == "123456"){// window.alert("ok");return true;} else {// window.alert("no");return false;}}function $(id){return document.getElementById(id);}</script></head><body><form action="JS17_2.html">用户名:<input type="text" id="username" /><br/>密 码:<input type="text" id="password" /><br/><input type="submit" οnclick="return checkUser();" value="登录" /></form></body>
</html>
JS17_2.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">setTimeout("javascript:window.open('JS17_3.html')", 5000);</script></head><body>登录成功5秒后自动跳转到管理页面</body>
</html>
JS17_3.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head><body>OK</body>
</html>
DOM对象
JS把浏览器、网页文档和网页中的HTML元素都用相应的内置对象来表示,这些对象与对象间的层次关系就构成了DOM,针对网页(html,js,php,asp,.net)的DOM就是HTML DOM,针对XML的就是XML DOM。而现在所使用的就是HTML DOM。XML DOM要学到XML的时候才能总结。
HTML DOM树
在进行HTML DOM编程的时候,会把HTML文件看做是一颗DOM树,该DOM树在内存中有着明显的层级关系,通过操作DOM树,可以动态的改变HTML页面的显示效果。
HTML文件
<html><head><title>文档标题</title></head><body><a href=”#”>我的链接</a><h1>我的标题</h1></body>
</html>
HTML DOM树
PS:从HTML DOM的角度看,任何一个HTML文件的元素都会被当做一个Node结点对象来看待。既然看做是结点对象,那么就可以使用相应对象的方法。
BOM
BOM(Browser Object Model)浏览器对象模型,它规定所有的浏览器在设计时,要考虑支持BOM提出的规范,这样才能正常浏览网页。BOM和DOM关系密切,可以将BOM看做是一个指导纲领,DOM就是依照纲领实现的具体设计。BOM包括浏览器的所有对象,DOM是其中的组成部分,DOM主要是BOM中document对象的扩展。
DOM的层级关系
PS:DOM编程时,每个HTML元素被看成一个Node结点(对象),可以通过该文档查看具体信息:http://www.w3school.com.cn/xmldom/dom_node.asp
window对象
1、confirm()
该函数会弹出一个带有确定和取消按钮的弹窗
案例:
<html><head><!--js代码是放在head标签间,但实际上也可以放在别的位置--> <script language="javascript">function test(){var res=window.confirm("你要删除");if(res){window.alert("删除成功");}else{window.alert("删除失败");}}</script></head><body><input type="button" value="delete" οnclick="test()"></body>
</html>
2、setInterval()
该函数可以根据指定的时间,循环的执行某个函数或者表达式
案例1:
function sayHello(){window.alert("hello,world");
}
setInterval("sayHello()",1000);
案例2:
在网页上显示时间
<html><head><script>function showTime(){//在元素间的文本就是通过 对象.innerText document.getElementById("mytime").innerText=new Date();}setInterval("showTime()",1000);</script></head><body><span id="mytime"></span></body>
</html>
3、clearInterval()
该函数可以清除指定Interval
案例:
10秒时,时钟停止
<html><head><script>var count=0;function showTime(){count++;if(count==10){clearInterval(time);}//在元素间的文本就是通过 对象.innerTextdocument.getElementById("mytime").innerText=new Date();}var time=setInterval("showTime()",1000);</script></head><body><span id="mytime"></span></body>
</html>
4、setTimeout()
该函数可以在指定的毫秒数后调用函数或计算表达式(但是只调用一次)
案例:
在打开页面后,5秒钟后弹出hello,world
function sayHello(){window.alert("hello,world");
}
setTimeout("sayHello()",5000);
5、clearTimeout()
该函数可以清除指定Timeout
案例:
function sayHello(){window.alert("hello,world");
}
var time=setTimeout("sayHello()",5000);
clearTimeout(time);//取消Timeout,不再显示hello,world
6、moveTo() moveBy()
moveTo()可以移动到指定坐标,moveBy()可以移动相对当前位置的距离
PS:可以将By看做是加减操作,To是赋值操作
案例:
window.moveTo(100,100); //这个是相对于屏幕左上角0,0坐标
window.moveBy(100,100);//这个是相对当前窗口的左上角0,0坐标
7、resizeBy() resizeTo()
moveBy()是调整相对于当前的窗口大小,moveTo()是调整至某一大小
PS:可以将By看做是加减操作,To是赋值操作
案例:
window.resizeTo(100,100); //把窗口的大小调整到指定的宽度100和高度100。
window.resizeBy(100,100);//把窗口再增加100,100
8、open()
该函数可以打开一个新窗口
案例:
window.open("event1.html","_blank");
9、opener
该函数可以实现父窗口和子窗口通信
案例:
父窗口:
<html><head><title></title><script language="javascript" type="text/javascript"><!--var newWindow;function test2(){//newWindow其实就是指向新窗口的引用newWindow=open("newWindow.html","_blank");}function test3(){newWindow.$("myspan2").innerText=$("info2").value; }function $(id){return document.getElementById(id);}//--></script></head><body>我是父窗口<input type="button" value="打开新窗口" οnclick="test2()"/><input type="text" value="" id="info2"/><input type="button" value="发送给子窗口" οnclick="test3()"/><br/><br/><span>接收的信息是:</span><span id="myspan">信息</span></body>
</html>
子窗口:
<html><head><title></title><script language="javascript" type="text/javascript"><!-- function test2(){opener.$("myspan").innerText=$("info").value;}function $(id){return document.getElementById(id);}//--></script></head><body>我是新窗口<input type="text" value="" id="info"/><input type="button" value="发送给父窗口" οnclick="test2()"/><br/><br/><span>接收的信息是:</span><span id="myspan2">信息</span></body>
</html>
PS:具体可以参考:http://www.w3school.com.cn/jsref/dom_obj_window.asp
10、alert() 显示带有一段消息和一个确认按钮的警告框。 在做测试的时候使用比较多!
11、prompt() 显示可提示用户输入的对话框。
history对象
其作用是记录用户访问的url,有三个函数,分别是go,back和forward
back() 表示返回上页
go(number) 加载 history 列表中的某个具体页面。 里面有参数,如果是正整数表示下N个历史记录,如果是负整数表示上N个历史记录
forward()表示进入下页,当然需要访问过下页之后,返回之前的页面才能用这个函数
length属性,表示历史列表的url数量
案例:
<html>
<head>
<script type="text/javascript">function myback(){//window.alert('ok');//window.history.back();window.alert(history.length);window.history.go(-1);}
</script>
</head>
<body>
<h1>b.html</h1>
<input type="button" οnclick="myback()" value="返回上一页面"/>
</body>
</html>
location对象
该对象包含当前url的信息
reload()方法: 重新加载当前文档,相当于刷新
案例:
function myfresh(){window.location.reload(); // ajax局部刷新
}
//每隔十秒刷新页面
window.setInterval("myfresh()",10000);
href属性:通过该属性可以指定 载入新的页面
案例:
<html>
<body><script type="text/javascript">document.write(location.href); // 写入当前url</script>
</body>
</html>
PS:还有一些属性方法,可以参考http://www.w3school.com.cn/jsref/dom_obj_location.asp
navigator对象
该对象包括浏览器的信息
appName 属性可返回浏览器的名称。
platform 声明了运行浏览器的操作系统和(或)硬件平台。
案例:
document.write(navigator.appName+" "+navigator.platform);
// 输出:Microsoft Internet Explorer Win32
PS:具体可参考:http://www.w3school.com.cn/jsref/dom_obj_navigator.asp
screen对象
这个对象包括用户显示屏幕的信息
案例:
window.alert(screen.width+" "+screen.height);
if(screen.width!=1024||screen.height!=768){window.alert("不是这像素");
}
PS:具体可参考:http://www.w3school.com.cn/jsref/dom_obj_screen.asp
event对象
该对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用。
注意:任何DOM对象都存在event事件。
绑定事件监听的三种方法
1、直接在某个HTML控件上指定
案例:
<input type="button" value="刷新页面" οnclick="test()"/>
2、getElementById()之类的函数获取控件后,再绑定
案例:
<html><head><script language="javascript">function test(){document.write("hello,world");}</script></head><body><input type="button" value="点击" id="but1"><script language="javascript">document.getElementById("but1").οnclick=test;//这里绑定监听</script></body>
</html>
3、通过addEventListener()或者是attachEvent()绑定
PS:通过attachEvent()绑定的事件可以通过detachEvent()取消绑定
案例:
每个人只能投一次票的投票系统
<html><head><script language="javascript">function test(){window.alert("你投票一次");//解除事件绑定document.getElementById("but1").detachEvent("onclick",test);}</script></head><body><input type="button" value="投票" id="but1"><script language="javascript">document.getElementById("but1").attachEvent("onclick",test);</script></body>
</html>
PS:event可以参考:http://www.w3school.com.cn/jsref/dom_obj_event.asp
document对象
该对象代表整个HTML文档,可以来访问页面中的所有元素,是最复杂的一个DOM对象,可以说这是DOM编程的关键所在。document对象是window对象的一个成员属性,可以通过window.document来访问,也可以直接使用document访问。
document对象常用的几个方法
1、write()
这个是向文档输出文本或js代码
2、writeln()
这个是向文档输出文本或js代码,与write不一样的地方是,writeln是换行输出
案例:
document.writeln("hello");
document.writeln("ok")
PS:write()和writeln()对浏览器的输出效果并没有什么区别,因为浏览器是用<br/>来表示输出的,而writeln()是在最后加一个\n。
3、getElementById()
该方法获取对应id的元素。一般规定html中的id号要唯一,如果不唯一,则只取第一元素
4、getElementsByName()
通过元素的名字来获取对象集合
案例:
<html><head><script language="javascript">function test(){//id不能唯一,但是name可以重复var hobbies=document.getElementsByName("hobby");window.alert(hobbies.length);for(var i=0;i<hobbies.length;i++){//如何判断是否选择if(hobbies[i].checked){window.alert("选择的爱好是"+hobbies[i].value);}}}</script></head><body>请选择你的爱好:<input type="checkbox" name="hobby" value="足球">足球<input type="checkbox" name="hobby" value="旅游" >旅游<input type="checkbox" name="hobby" value="音乐">音乐<input type="button" value="testing" οnclick="test()"/></body>
</html>
5、getElementsByTagName()
通过标签名来获取对象集合
案例:
<html><head><script language="javascript">//通过标签名来获取元素function test3(){var inputs=document.getElementsByTagName("input");for(var i=0;i<inputs.length;i++){window.alert(inputs[i].value);}}</script></head><body>请选择你的爱好:<input type="checkbox" name="hobby" value="足球">足球<input type="checkbox" name="hobby" value="旅游" >旅游<input type="checkbox" name="hobby" value="音乐">音乐<input type="button" value="testing" οnclick="test2()"/><input type="button" value="获取所有input" οnclick="test3()"/></body>
</html>
参考文档:http://www.w3school.com.cn/jsref/dom_obj_document.asp
动态创建、添加和删除html元素(结点)
createElement() 方法创建新的元素节点。
appendChild() 方法向已存在的节点添加子节点。
removeChild() 方法删除指定的节点。
parentNode 属性可返回某节点的父节点。
案例1:动态创建、添加html元素(结点)
<html><head><script language="javascript">function test(){//创建元素//写希望创建的元素的标签名字var myElement=document.createElement("a");var myElement2=document.createElement("input");//给新的元素添加必要的信息myElement.href="http://www.baidu.com";myElement.innerText="连接到百度";myElement.id="id1";myElement2.type="button";myElement2.value="我是按钮";//可以指定位置/*myElement.style.left="200px";myElement.style.top="300px";myElement.style.position="absolute";//将元素添加到document.body上去document.body.appendChild(myElement);*///将元素添加到div上去document.getElementById("div").appendChild(myElement);document.getElementById("div").appendChild(myElement2);}</script></head><body><input type="button" οnclick="test()" value="动态的创建元素"><div id="div" style="width:100px;height:300px;border=1px solid red"></div></body>
</html>
案例2:动态删除html元素(结点)
<html><head><script>function test2(){//删除一个元素(删除一个元素的是有前提的:必须获得父元素)//这是第一种方法(不灵活)//document.getElementById("div").removeChild(document.getElementById("id1"));//第二种方法比较灵活(推荐)这种方法不知道父元素id也能获得父元素var node = document.getElementById("id1")node.parentNode.removeChild(document.getElementById("id1")); }</script></head><body><input type="button" value="删除一个元素id为id1的" οnclick="test2()"/><div id="div" style="width:200px;height:400px; border:1px solid red;"><input type="button" value="button1" id=”id1”/></div></body>
</html>
DOM加强
在dom编程中,一个html文档会被当做 dom 树对待,dom会把所有的html元素(包括注释),映射成Node节点。于是就可以使用Node节点的属性和方法。
PS:html dom 和 xml dom 都遵循相同dom 规范的,所以有很多相同的方法和属性,因此可以去查看xml dom 的Node节点提供的方法和属性。
参考文档:http://www.w3school.com.cn/xmldom/dom_node.asp
案例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">function test1(){//获得div1var div1 = $("div1");// 节点名,节点类型,节点值,子节点长度window.alert(div1.nodeName + " " + div1.nodeType + " " + div1.nodeValue + " " + div1.childNodes.length);// 同一级下一个节点,同一级上一个节点,父节点window.alert(div1.nextSibling.nodeName + " " + div1.previousSibling.nodeName + " " + div1.parentNode.nodeName);}function $(id){return document.getElementById(id);}</script>
</head>
<body> <input type="button" value="button1" οnclick="test1()" /><div id="div1"><div id="div2"></div></div><div id="div3"></div>
</body>
</html>
body对象
body对象是document对象的一个成员属性,通过document.body来访问。使用body对象,要求文档的主体创建后才能使用,也就是说不能在文档的body体还没有创建就去访问body。
body常用属性:
appendChild() 添加元素
removeChild() 删除元素
getElementsByTagName() 通过html元素名称,得到对象数组.
bgColor 文档背景色
backgorund 文档背景图
innerText 某个元素间的文本
innerHtml 某个元素间的html代码
onload事件 文档加载时触发
onunload事件 文档关闭时触发
onbeforeunload事件 文档关闭前触发
案例1:
<html><head><script language="javascript">window.alert(document.body); //此时body访问不到,输出null</script></head><body><script language="javascript">window.alert(document.body); //等body创建后才能访问,此时就能输出object</script></body>
</html>
案例2:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">// 加入普通文本function test(){$("myspan").innerText = "<a href='#'>#</a>";} // 加入HTML元素function test1(){$("myspan").innerHTML = "<a href='#'>#</a>";}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body><span id="myspan">span</span><input type="button" οnclick="test()" value="button1" /><input type="button" οnclick="test1()" value="button2" /></body>
</html>
PS:innerText 和innerHTML的区别在于,innerText 浏览器会作为纯文本来解析。innerHTML 浏览器会作为html来解析。
案例3:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">// 定义全局变量directX = 2; // x轴坐标的方向directY = 2; // y轴坐标的方向ballX = 5; // x轴球的坐标ballY = 5; // y轴球的坐标// 球移动function ballMove(){ballX += directX;ballY += directY;// 修改div的left topballdiv.style.top = ballY + "px";balldiv.style.left = ballX + "px";// 获取边框宽度var w = $("borderdiv").style.width;w = w.substring(0, w.length - 2);w = parseInt(w);// 获取边框高度var h = $("borderdiv").style.height;h = h.substring(0, h.length - 2);h = parseInt(h);// 测试// window.alert(w + " " + h);// 获取小球宽度var bw = $("ball").style.width;bw = bw.substring(0, bw.length - 2);bw = parseInt(bw);// 获取小球高度 var bh = $("ball").style.height;bh = bh.substring(0, bh.length - 2);bh = parseInt(bh);// 测试// window.alert(bw + " " + bh);// 判断什么时候,转变方向// x方向,(offsetWidth可以返回,当前这个对象事件的宽度)if(ballX + bw >= w || ballX <= 0){directX = -directX;}// y方向,if(ballY + bh >= h || ballY <= 0){directY = -directY;}}// 获取IDfunction $(id){return document.getElementById(id);}// 设置自动调用间隔时间setInterval("ballMove()", 10);</script></head><body><div id="borderdiv" style="border: 1px solid red; width: 500px; height: 400px;"><div id="balldiv" style="position: relative;"><img id="ball" src="ball.png" style="width: 50px; height: 50px;" /></div></div></body>
</html>
案例4:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">// 是否可移动var moveable = false;// 开始拖拽function startDrag(){// 设置为可移动moveable = true;}// 拖拽function drag(event){// 如果可移动if(moveable){// 获取鼠标坐标var cx = event.clientX;var cy = event.clientY;// 获取title宽度var w = $("title").style.width;w = w.substring(0, w.length - 2);w = parseInt(w);// 获取title高度var h = $("title").style.height;h = h.substring(0, h.length - 2);h = parseInt(h);// 设置窗口坐标$("div1").style.top = cy - h/2 + "px";$("div1").style.left = cx - w/2 + "px";}}// 拖拽结束function stopDrag(){// 设置为不可移动moveable = false;}// 获取IDfunction $(id){return document.getElementById(id);}</script></head><body οnmοusemοve="drag(event)"><div id="div1" style="position: absolute; width: 200px; height: 200px; background-color: #99CCFF; z-index: 200; top: 100px; left: 154px;"><div id="title" οnmοusedοwn="startDrag()" οnmοuseup="stopDrag()" style="width: 195px; height: 20px; background-color: #330033; top: 0px; left: 0px; z-index: 200; position: absolute; font-size: 9pt; color: #FFFFFF; pading-top: 5px; padding-left: 5px; cursor: hand">浮动窗口</div></div></body>
</html>
style对象
style对象不是针对某一个html元素,而是对所有的html元素而言的,也就是说,我们可以通过document.getElementById(“id”).style.property=“值”,来控制网页文档的任何一个元素(对象)的样式。
参考文档:http://www.w3school.com.cn/jsref/dom_obj_style.asp
案例:
JS23.html
<!DOCTYPE html>
<html><head><title>HTML15.html</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="JS23.css" /><script type="text/javascript" src="JS23.js"></script></head><body><!-- 首部 --><div class="head"><div class="login">登录表单</div><div class="setpage">设为首页</div><div class="seta">设置超链接</div></div><!-- 导航部分 --><div class="nav"><img alt="logo" src="logo.png" /><div>导航条</div></div><!-- 广告部分--><div class="ad"><!-- 这里是仿搜狐首页修改部分 --><!-- 做一个动态切换的标签 --><div class="ad1"><div class="ad1_navi"><ul><li οnmοuseοver="change('zs', this)" οnmοuseοut="change2(this)">招生</li><li οnmοuseοver="change('rz', this)" οnmοuseοut="change2(this)">热招</li><li οnmοuseοver="change('cg', this)" οnmοuseοut="change2(this)">出国</li></ul></div><div id="zs" class="zs" ><ul><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li><li><a href="#">招生招生招生招生</a></li></ul></div><div id="rz" class="rz"><ul><li><a href="#">热招热招热招热招</a></li><li><a href="#">热招热招热招热招</a></li><li><a href="#">热招热招热招热招</a></li><li><a href="#">热招热招热招热招</a></li><li><a href="#">热招热招热招热招</a></li><li><a href="#">热招热招热招热招</a></li><li><a href="#">热招热招热招热招</a></li><li><a href="#">热招热招热招热招</a></li></ul></div><div id="cg" class="cg"><ul><li><a href="#">出国出国出国出国</a></li><li><a href="#">出国出国出国出国</a></li><li><a href="#">出国出国出国出国</a></li><li><a href="#">出国出国出国出国</a></li><li><a href="#">出国出国出国出国</a></li><li><a href="#">出国出国出国出国</a></li><li><a href="#">出国出国出国出国</a></li><li><a href="#">出国出国出国出国</a></li></ul></div></div><div class="ad2">广告</div><div class="ad3">房地产广告</div><div class="ad4"><img alt="ad" src="ad2.png" /></div></div></body>
</html>
JS23.css
@CHARSET "UTF-8";body {margin: 0px auto;padding: 0px;width: 1000px;border: 1px solid red;
}/* 首部 */
.head{margin: 0px;padding: 0px;border: 1px solid blue;width: 1000px;height: 25px;margin-bottom: 5px;
}.login {width: 500px;margin-right: 5px;margin-left: 5px;
}.setpage {width: 200px;margin-right: 5px;
}.seta {width: 280px;
}.login,.setpage,.seta {float: left;height: 25px;background-color: silver;
}/* 导航条部分 */
.nav {border: 1px solid red;width: 1000px;height: 67px;margin-bottom: 10px;
}.nav img {width: 140px;margin-right: 5px;
}.nav div {background-color: aqua;width: 855px;
}.nav img,.nav div {float: left;height: 67px;
}/* 广告部分 */
.ad {margin-bottom: 10px;border: 1px solid red;width: 1000px;height: 186px;
}.ad1 {/*background-color: orange;*/width: 140px;
}/* 广告导航条 */
.ad1_navi{width: 20px;height: 186px;/*background-color: green;*/float: left;font-size: 12px;
}.ad1_navi ul{padding: 0px;margin: 0px;float: left;
}.ad1_navi ul li{float: left;list-style-type: none;width: 20px;height: 53px;margin-top: 5px;text-align: center;background-color: silver;padding-top: 2px;
}.zs,.rz,.cg{width: 110px;height: 186px;/*background-color: pink;*/float: left;font-size: 12px;margin-left: 5px;
}.zs ul,.rz ul,.cg ul{padding: 0px;margin: 0px;float: left;margin-left: 5px;
}.zs ul li,.rz ul li,.cg ul li{list-style-type: none;float: left;line-height: 23px;
}.rz,.cg{display: none;
}.ad2 {background-color: aqua;width: 500px;
}.ad3 {background-color: aqua;width: 175px;}.ad4 {
}.ad1,.ad2,.ad3,.ad4 {float: left;height: 186px;margin-right: 5px;
}
JS23.js
function change(val, obj){// window.alert("ok");obj.style.backgroundColor = "#FFC12D";if(val == "zs") {zs.style.display = "block";rz.style.display = "none";cg.style.display = "none";} else if(val == "rz") {rz.style.display = "block";zs.style.display = "none";cg.style.display = "none";} else if(val == "cg") {cg.style.display = "block";zs.style.display = "none";rz.style.display = "none";}
}function change2(obj){// window.alert("ok");obj.style.backgroundColor = "silver";
}
PS:display 和 visiability 的区别
两个属性都可以用于设置某个区域或者控件,显示不显示, display 设置 none; 它不显示同时让出自己占用的空间,visiability 这个属性设置成hidden 就不显示, 但是它还是占据这个空间.
forms对象集合和form对象
forms 集合可返回对文档中所有 Form 对象的引用,form对象代表一个HTML表单。
forms对象集合常用的函数和属性
length : 返回大小
item(index) : 指定取出forms对象集合的第几个form对象
说明:当访问某个表单的某个元素的时候,可以
document . forms[第几个表单] . 元素的名字
document . forms.item(第几个表单). 元素的名字
案例:
//如何取得所有表单
var forms = document.forms;
//window.alert(forms.length);
//可以通过forms访问指定表单
//window.alert(forms[0].username.value); 两者等价
window.alert(forms.item(0).username.value);
参考文档:http://www.w3school.com.cn/jsref/coll_doc_forms.asp
案例:表单验证综合案例
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">// 检查用户的信息是否合法function checkInfo(){// 判断账号是否合法if(document.forms[0].username.value.length < 4 || document.forms[0].username.value.length > 16){window.alert("用户名应在4-16位之间");return false;} // 判断密码是否合法if(document.forms[0].password1.value.length < 6 || document.forms[0].username.value.length > 16){window.alert("密码应该大于6位");return false;}if(document.forms[0].password1.value != document.forms[0].password2.value){window.alert("两次密码输入不一致");return false;}}</script></head><body><h1 align="center">用户注册</h1><form action="" method="get"><table border="1px" style="text-align: center;" align="center"><tr><td>用户名:</td><td><input type="text" name="username"/></td></tr><tr><td>密码:</td><td><input type="password" name="password1"/></td></tr><tr><td>确认密码:</td><td><input type="password" name="password2"/></td></tr><tr><td>年龄:</td><td><input type="text" name="age"/></td></tr><tr><td>电子邮件:</td><td><input type="text" name="email"/></td></tr><tr><td>电话号码:</td><td><input type="text" name="phone" /></td></tr><tr><td><input type="submit" value="注册新用户" οnclick="return checkInfo();"/></td><td><input type="reset" value=" 重新填写 " /></td></tr></table></form></body>
</html>
image对象
image对象代表嵌入的图像。
image 对象的事件句柄
onerror图片加载失败触发此事件
onload图片加载成功触发此事件
参考文档:http://www.w3school.com.cn/jsref/dom_obj_image.asp
案例:
<html><script>function test(){span.innerText="加载失败";}function test1(){span.innerText="加载成功";}</script></head><body><img alt="dog" src="2.jpg" οnerrοr="return test()" οnlοad="return test1()"><span id="span"></span></body>
</html>
all对象
all集合返回对文档中所有HTML元素的引用。
基本语法:
document.all[i];
document.all[name];
document.all.tags[tagname];
参考文档:http://www.w3school.com.cn/jsref/coll_doc_all.asp
案例:
function test2(){
var myalls=document.all;
//可以将所有的html元素都取出来
for(var i=0;i<myalls.length;i++){
window.alert(myalls[i].nodeType+" "+myalls[i].nodeName);
}
}
table对象
table对象代表一个HTML表格。
cells 集合返回表格中所有单元格的一个数组。
rows 集合返回表格中所有行(TableRow 对象)的一个数组。
参考文档:http://www.w3school.com.cn/jsref/dom_obj_table.asp
案例:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">function test1(){// 取出所有行var rows = mytab.rows;window.alert(rows.length);window.alert(rows[1].cells[0].innerText);for(var i = 0; i < mytab.rows.length; i++){// 取出一行var row = mytab.rows[i];// 对该行遍历for(var j = 0; j < row.cells.length; j++){// 取出项数据var cell = row.cells[j];window.alert(cell.innerText);}}}// 删除一行function test2(){mytab.deleteRow(1);} // 插入一行function test3(){// 插入行var tableRow = mytab.insertRow(4);// 插入项tableRow.insertCell(0).innerText = "赵六";tableRow.insertCell(1).innerText = "23";}</script></head><body><table border="1px" id="mytab"><tr><td>姓名</td><td>年龄</td></tr><tr><td>张三</td><td>20</td></tr><tr><td>李四</td><td>22</td></tr><tr><td>王五</td><td>21</td></tr></table><input type="button" value="button" οnclick="test1()"/><input type="button" value="delete" οnclick="test2()"/><input type="button" value="insert" οnclick="test3()"/></body>
</html>
综合案例:下拉列表左右选择
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>下拉列表左右选择</title></head><body><table border="1" width="600" align="center"><tr><td>分类名称</td><td><input type="text" name="cname" value="手机数码" /></td></tr><tr><td>分类描述</td><td><textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea></td></tr><tr><td>分类商品</td><td><span style="float: left;"><font color="green" face="宋体">已有商品</font><br/><select multiple="multiple" style="width: 100px;height: 200px;" id="leftgoods"><option>魅族MX5</option><option>IPhone7</option><option>小米5</option><option>华为P8</option><option>小米Note</option><option>小米MAX</option></select><p><a href="#" style="padding-left: 20px;" οnclick="selectGoods(false,'ltr')">>></a></p><p><a href="#" style="padding-left: 20px;" οnclick="selectGoods(true,'ltr')">>>></a></p></span><span style="float: right;"><font color="red" face="宋体">未有商品</font><br/><select multiple="multiple" style="width: 100px;height: 200px;" id="rightgoods"><option>三星Note3</option><option>魅族Pro 6</option></select><p><a href="#" οnclick="selectGoods(false,'rtl')"><<</a></p><p><a href="#" οnclick="selectGoods(true,'rtl')"><<<</a></p></span></td></tr><tr><td colspan="2"><input type='submit' value="修改" /></td></tr></table><script type="text/javascript">function $(id) {return document.getElementById(id);}var leftGoodsEle = $("leftgoods");var rightGoodsEle = $("rightgoods");// 移动商品function selectGoods(isAll,direct) {if (direct == 'ltr' && isAll) {moveAllGoods(leftGoodsEle, rightGoodsEle);} else if (direct == 'ltr' && !isAll) {moveSelectGoods(leftGoodsEle, rightGoodsEle);} else if (direct == 'rtl' && isAll) {moveAllGoods(rightGoodsEle, leftGoodsEle);} else if (direct == 'rtl' && !isAll) {moveSelectGoods(rightGoodsEle, leftGoodsEle);}}// 将选中的移到另一边function moveSelectGoods(from, to) {var childNode = from.childNodes;for (var i = 0; i < childNode.length;) {// 移动过去后数组长度会-1,所以不需要i++// 如果该节点没被选中,则i++,选择下一个结点if (childNode[i].selected) {to.appendChild(childNode[i]);} else {i++;}}}// 移动所有的商品到另一边function moveAllGoods(from, to) {var childNode = from.childNodes;for (var i = 0; i < childNode.length;) {to.appendChild(childNode[i]);}}</script></body>
</html>
----------参考《韩顺平.轻松搞定网页设计(html+css+js)》
Javascript——DOM编程相关推荐
- JavaScript Dom编程艺术
当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...
- 高性能JavaScript DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和 JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间 ...
- 初读JavaScript DOM编程艺术(一)
JavaScript DOM编程艺术--前三章概念总结 一. 概述 1.什么是JavaScript 2.什么是DOM 二. JavaScript 语法 1. 语句和注释 2. 变量和数组 三. DOM ...
- JavaScript DOM编程艺术学习笔记(一)
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术第一章:JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- 重读《JavaScript DOM编程艺术》(第一版)
今天来了雅兴去图书馆看书.把<JavaScript DOM编程艺术>温习了一遍,平时写js的机会不是特别多,很多知识都有些模糊了. 伴随着身边键盘卡啦卡啦的声音,一位手速不是一般的快的程序 ...
- JavaScript DOM编程-佟刚-专题视频课程
JavaScript DOM编程-12198人已学习 课程介绍 本Java视频教程涵盖 JavaScript DOM 编程的全部核心技术.JavaScript DOM 编程是编写 Aj ...
- 《JavaScript DOM 编程艺术》读书笔记
<JavaScript DOM 编程艺术>读书笔记--其一 第二章 1.Javascript代码编写方式: (1)将JavaScript代码放在文档<head>标签中的< ...
- JavaScript DOM编程艺术(第二版)
JavaScript DOM编程艺术简要介绍 第二章: JavaScript语法 语法 语句 注释 变量 数据类型 数组 对象 操作 条件语句 比较操作符 逻辑操作符 循环语句 while循环 for ...
最新文章
- python学习总目录
- Kubernetes + CRI + Kata + Firecracker
- spring动态代理实现计算器
- linux暂停线程和恢复,是否有可能在Linux [暂停]中检测到线程已进行上下文切换?...
- sendEmail实现邮件报警
- The 'Microsoft.Jet.OLEDB.4.0' provider is not registered on the local machine.
- php 手写签批 手机办公_手写签批 打造无纸化办公的完美替代
- 华硕java安装教程win10_华硕笔记本安装win10系统教程
- 单件模式的两个简单实例
- why elmlang:最简最安全的full ola stack的终身webappdev语言选型
- Javescript REVIEW
- mysql 5.6 配置ssl_MySQL 5.6使用 SSL 连接
- 分享淘宝的IP地址库查询接口
- JS防抖(Debouncing)和节流(Throttling)
- bedgraph文件转bigwig文件
- UVA 12235 Help Bubu
- Kindle 推送教程:教你用电子邮箱推送电子书(Kindle伴侣)
- 云课堂计算机测试答案,2020智慧职教云课堂计算机应用答案完整满分课后作业答案...
- 可汗学院计算机课程都有哪些,要录制可汗学院教学视频你需要哪些硬件和软件?...
- 【图像分割】Segment Anything(Meta AI)论文解读
热门文章
- Mybatis理解与入门步骤
- [极客大挑战 2019]Havefun
- C#LeetCode刷题之#645-错误的集合(Set Mismatch)
- python ctypes
- 使用keras进行深度学习_如何在Keras中通过深度学习对蝴蝶进行分类
- Mac上command not found: vituralenv
- Could NOT find OpenSSL, try to set the path to OpenSSL root folder in the system variable OPENSSL_
- Python爬虫开发:反爬虫措施以及爬虫编写注意事项
- 点击率预测的贝叶斯平滑
- 尝试改写新浪网分类资讯爬虫2