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

[html] view plain copy

<!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" onclick="return checkUser();" value="登录" />
</form>
</body>
</html>

JS17_2.html

[html] view plain copy

<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] view plain copy

<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] view plain copy

<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] view plain copy

<html>
<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" onclick="test()">
</body>
</html>

2、setInterval()

该函数可以根据指定的时间，循环的执行某个函数或者表达式

案例1：

[javascript] view plain copy

function sayHello(){
window.alert("hello,world");
}
setInterval("sayHello()",1000);

案例2：

在网页上显示时间

[html] view plain copy

<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] view plain copy

<html>
<head>
<script>
var count=0;
function showTime(){
count++;
if(count==10){
clearInterval(time);
}
//在元素间的文本就是通过对象.innerText
document.getElementById("mytime").innerText=new Date();
}
var time=setInterval("showTime()",1000);
</script>
</head>
<body>
<span id="mytime"></span>
</body>
</html>

4、setTimeout()

该函数可以在指定的毫秒数后调用函数或计算表达式（但是只调用一次）

案例：

在打开页面后，5秒钟后弹出hello，world

[javascript] view plain copy

function sayHello(){
window.alert("hello,world");
}
setTimeout("sayHello()",5000);

5、clearTimeout()

该函数可以清除指定Timeout

案例：

[javascript] view plain copy

function sayHello(){
window.alert("hello,world");
}
var time=setTimeout("sayHello()",5000);
clearTimeout(time);//取消Timeout，不再显示hello,world

6、moveTo() moveBy()

moveTo()可以移动到指定坐标，moveBy()可以移动相对当前位置的距离

PS：可以将By看做是加减操作，To是赋值操作

案例：

[javascript] view plain copy

window.moveTo(100,100); //这个是相对于屏幕左上角0，0坐标
window.moveBy(100,100);//这个是相对当前窗口的左上角0，0坐标

7、resizeBy() resizeTo()

moveBy()是调整相对于当前的窗口大小，moveTo()是调整至某一大小

PS：可以将By看做是加减操作，To是赋值操作

案例：

[javascript] view plain copy

window.resizeTo(100,100); //把窗口的大小调整到指定的宽度100和高度100。
window.resizeBy(100,100);//把窗口再增加100，100

8、open()

该函数可以打开一个新窗口

案例：

[javascript] view plain copy

window.open("event1.html","_blank");

9、opener

该函数可以实现父窗口和子窗口通信

案例：

父窗口：

[html] view plain copy

<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="打开新窗口" onclick="test2()"/>
<input type="text" value="" id="info2"/>
<input type="button" value="发送给子窗口" onclick="test3()"/><br/><br/>
<span>接收的信息是：</span>
<span id="myspan">信息</span>
</body>
</html>

子窗口：

[html] view plain copy

<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="发送给父窗口" onclick="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] view plain copy

<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" onclick="myback()" value="返回上一页面"/>
</body>
</html>

location对象

该对象包含当前url的信息

reload()方法：重新加载当前文档，相当于刷新

案例：

[javascript] view plain copy

function myfresh(){
window.location.reload(); // ajax局部刷新
}
//每隔十秒刷新页面
window.setInterval("myfresh()",10000);

href属性：通过该属性可以指定载入新的页面

案例：

[html] view plain copy

<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 声明了运行浏览器的操作系统和（或）硬件平台。

案例：

[javascript] view plain copy

document.write(navigator.appName+" "+navigator.platform);
// 输出：Microsoft Internet Explorer Win32

PS：具体可参考：http://www.w3school.com.cn/jsref/dom_obj_navigator.asp

screen对象

这个对象包括用户显示屏幕的信息

案例：

[javascript] view plain copy

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控件上指定

案例：

2、getElementById()之类的函数获取控件后，再绑定

案例：

[html] view plain copy

<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").onclick=test;//这里绑定监听
</script>
</body>
</html>

3、通过addEventListener()或者是attachEvent()绑定

PS：通过attachEvent()绑定的事件可以通过detachEvent()取消绑定

案例：

每个人只能投一次票的投票系统

[html] view plain copy

<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] view plain copy

<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" onclick="test()"/>
</body>
</html>

5、getElementsByTagName()

通过标签名来获取对象集合

案例：

[html] view plain copy

<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" onclick="test2()"/>
<input type="button" value="获取所有input" onclick="test3()"/>
</body>
</html>

参考文档：http://www.w3school.com.cn/jsref/dom_obj_document.asp

动态创建、添加和删除html元素(结点)

createElement() 方法创建新的元素节点。

appendChild() 方法向已存在的节点添加子节点。

removeChild() 方法删除指定的节点。

parentNode 属性可返回某节点的父节点。

案例1：动态创建、添加html元素(结点)

[html] view plain copy

<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" onclick="test()" value="动态的创建元素">
<div id="div" style="width:100px;height:300px;border=1px solid red"></div>
</body>
</html>

案例2：动态删除html元素(结点)

[html] view plain copy

<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的" onclick="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] view plain copy

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function test1(){
//获得div1
var 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" onclick="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] view plain copy

<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] view plain copy

<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>";
}
// 获取ID
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<span id="myspan">span</span>
<input type="button" onclick="test()" value="button1" />
<input type="button" onclick="test1()" value="button2" />
</body>
</html>

PS：innerText 和innerHTML的区别在于，innerText 浏览器会作为纯文本来解析。innerHTML 浏览器会作为html来解析。

案例3：

[html] view plain copy

<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 top
balldiv.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;
}
}
// 获取ID
function $(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] view plain copy

<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;
}
// 获取ID
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body onmousemove="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" onmousedown="startDrag()" onmouseup="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

[html] view plain copy

<!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 onmouseover="change('zs', this)" onmouseout="change2(this)">招生</li>
<li onmouseover="change('rz', this)" onmouseout="change2(this)">热招</li>
<li onmouseover="change('cg', this)" onmouseout="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

[css] view plain copy

@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

[html] view plain copy

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] view plain copy

<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="注册新用户" onclick="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] view plain copy

<html>
<script>
function test(){
span.innerText="加载失败";
}
function test1(){
span.innerText="加载成功";
}
</script>
</head>
<body>
<img alt="dog" src="2.jpg" onerror="return test()" onload="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] view plain copy

<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" onclick="test1()"/>
<input type="button" value="delete" onclick="test2()"/>
<input type="button" value="insert" onclick="test3()"/>
</body>
</html>

综合案例：下拉列表左右选择

[html] view plain copy

<!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;" onclick="selectGoods(false,'ltr')">>></a></p>
<p><a href="#" style="padding-left: 20px;" onclick="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="#" onclick="selectGoods(false,'rtl')"><<</a></p>
<p><a href="#" onclick="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)》

posted @ 2017-01-12 19:59 天涯海角路阅读(159) 评论(0) 收藏举报

刷新页面返回顶部

天涯海角路

Javascript——DOM编程

Javascript——DOM编程

基本概述

DOM的必要性

DOM对象

HTML DOM树

BOM

DOM的层级关系

window对象

1、confirm()

2、setInterval()

3、clearInterval()

4、setTimeout()

5、clearTimeout()

6、moveTo() moveBy()

7、resizeBy() resizeTo()

8、open()

9、opener

10、alert() 显示带有一段消息和一个确认按钮的警告框。 在做测试的时候使用比较多！

11、prompt() 显示可提示用户输入的对话框。

history对象

location对象

navigator对象

screen对象

event对象

绑定事件监听的三种方法

1、直接在某个HTML控件上指定

2、getElementById()之类的函数获取控件后，再绑定

3、通过addEventListener()或者是attachEvent()绑定

document对象

document对象常用的几个方法

1、write()

2、writeln()

3、getElementById()

4、getElementsByName()

5、getElementsByTagName()

动态创建、添加和删除html元素(结点)

DOM加强

body对象

style对象

forms对象集合和form对象

image对象

all对象

table对象

综合案例：下拉列表左右选择

公告

10、alert() 显示带有一段消息和一个确认按钮的警告框。在做测试的时候使用比较多！