1.为什么要学习dom编程
(1)通过dom编程,我们可以写出各种网页游戏。
(2)dom编程也是ajax的重要基础。
2.dom介绍
DOM=Document Object Model(文档对象模型),根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。
js把浏览器,网页文档和网页文档中的html元素都用相应的内置对象来表示,这些对象与对象间的层次关系称为dom,针对网页(html,jsp,php,aspx.net)的dom就是html dom。
重要概念:
(1)上面说的内置对象就是dom对象,准确的说是html dom对象。
(2)dom编程时,会把html文档看做是一棵dom树。
dom树:
(3)dom编程的核心就是各个dom对象。
3.DOM细节
(1)BOM(The Browser Object Mode)浏览器对象模型
通过使用bom,可移动窗口、更改状态栏文本。bom是w3c组织提出的,它建议所有的浏览器都应当遵循这样的设计规范,可以说bom和dom关系密切,相互影响,bom为纲,dom为目,我们可以简单的理解dom就是bom的具体实现。
(2)常用的dom对象层次一览图
(3)window对象
alert():显示消息和一个确认按钮的警告框
confirm():显示消息以及确认按钮和取消按钮的对话框
案例:
function test(){
var res=window.confirm("你要删除");
if(res){
window.alert("删除");
}else{
window.alert("放弃删除");
}
}
<input type="button" value="删除记录" onclick="test()"/>
setInterval() :按照指定的周期(毫秒计)来循环调用函数或计算表达式
clearInterval():停止计时器
案例:每隔一秒弹出hello以及简易时钟
function sayHello(){
window.alert('hello');
}
setInterval("sayHello()",1000); //每隔一秒
function showTime(){
//document.writeln(new Date());
//在元素间的文本就是通过对象.innerText
document.getElementById("mytime").innerText=new Date().toLocaleString();
}
setInterval("showTime()",1000); //每隔一秒
setTimeout():在指定的毫秒数后调用函数或计算表达式(但是只调用一次)
案例:在打开页面后,5秒后弹出hello
function sayHello(){
window.alert('hello');
}
//5秒后调用sayhello
setTimeout("sayHello()",5000);
clearTimeout():
案例:
function test(){
window.alert("abc");
}
var mytimer=setTimeout("test()",3000);
//取消mytimer
clearTimeout(mytimer);
moveTo():把窗口的左上角移动到一个指定的坐标
moveBy():可相对窗口的当前坐标把它移动指定的像素
案例:
window.moveTo(100,100);
window.moveBy(100,100);
resizeBy():按照指定的像素调整窗口的大小
resizeTo():把窗口的大小调整到指定的宽度和高度
案例:
window.resizeTo(100,100);//把窗口调整到100,100
window.resizeBy(100,100);//把窗口再增加100,100
open():打开一个新的浏览器窗口或查找一个已命名的窗口
window.open("newWindow.html","_blank","width=200,height=100,location=no");
close():关闭窗口
closed:返回窗口是否已被关闭
status:设置窗口状态栏的文本
opener:返回对创建此窗口的窗口的引用
案例:父窗口和子窗口通信
父窗口:
function test2(){
var newWindow=window.open("newWindow.html","_blank");
}
function test3(){
newWindow.document.getElementById("info").value=document.getElementById("info2").value;
}
<input type="button" onclick="test2()" value="打开新窗口"/>
<span id="myspan"></span>
<input type="text" id="info2"/><input type="button" value="通知给子窗口" onclick="test3()">
子窗口:
<script language="javascript" type="text/javascript">
function notify(){
var x=document.getElementById("info").value;
window.alert(x);
window.opener.document.getElementById("myspan").innerText=x;
}
</script>
我是新窗口
<input type="text" value="" id="info"/>
<input type="button" value="通知给父窗口" onclick="notify();"/>
onload:页面装载
onunload:关闭页面
案例:登录页面跳转到管理页面
登录页面:
function checkuser(){
if(get('uname').value=="apple"&&get('pwd').value=="123"){
return true;
}else{
get('uname').value=="";
get('pwd').value=="";
return false;
}
}
function get(id){
return document.getElementById(id);
}
<form action="ok1.html">
u:<input type="text" id="uname"/><br/>
p:<input type="password" id="pwd"/><br/>
<input type="submit" onclick="return checkuser();" value="登录"/><br/>
跳转页面:
<script language="javascript">
function tiao(){
window.open("manage.html","_self");
}
setTimeout("tiao()",5000);
</script>
登陆成功5秒后自动跳转管理页面
(4)history对象
作用:该对象包含客户端访问过的URL信息。
history.back():加载history列表中的前一个URL.
history.go():加载history列表中的某一个具体页面.
history.forward():加载history列表中的下一个URL.
(5)location对象
作用:该对象包含客户端当前的URL信息。
location.reload():重新加载当前文档
location.assign():加载新的文档
lacation.replace():用新的文档替换当前文档
(6)navigator对象
作用:该对象包含有关浏览器的各信息
navigator.appName:返回浏览器名称
navigator.platform:返回运行浏览器的操作系统平台
navigator.systemLanguage:返回 OS 使用的默认语言
(7)screen对象
作用:该对象包含有关客户机显示屏幕的信息
screen.colorDepth:返回目标设备或缓冲器上的调色板的比特深度
screen.width:返回显示屏幕的宽
screen.height:返回显示屏幕的高
screen.availHeight:返回显示屏幕的高度 (除 Windows 任务栏之外)
screen.availWidth:返回显示屏幕的宽度 (除 Windows 任务栏之外)
(8)event对象
作用:代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,事件通常与函数结合使用。