DOM:Document Object Model(文档对象模型)

DOM:Document Object Model(文档对象模型)
用来将标记性文档封装成对象，并将标记性文档中的所有内容（标签、文本、属性等）都封装成对象、
封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容
因为对象的出现就可以有属性和行为被调用

文档对象模型
文档：标记型文档
对象：封装了属性和行为的实例，可以直接被调用
模型：所有标记性文档都具备一些共性特征的一个体现
标记型文档（标签、属性、标签中封装的数据）
只要是标记型文档，DOM这种技术都可以对其进行操作
常见的标记型文档：html xml

DOM这种技术是如何对标记型文档操作的呢？
要操作标记型文档操作必须对其进行解析。

DOM技术的解析方式：将标记型文档文档解析成一颗DOM树，并将树种的内容都封装成节点对象
注意：这个DOM解析方式的好处就是可以对树中的节点进行任意操作，比如：增删改查
弊端：这种解析需要将整个文档加载进内存，意味着如果标记型文档操作的体积很大，较为浪费内存空间
简介另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是
w3c的标准。
SAX解析方式：基于事件驱动的解析，获取数据的速度很快，但是不能对标记进行增删改查

DOM模型有三种：
DOM1：将html文档封装成对象
DOM2：在DOM1基础上加入了新功能，比如解析名称空间
DOM3:将xml文档封装成了对象

DHTML：动态的HTML,不是一门语言，是多项技术综合体的简称
其中包含了HTML、CSS、DOM、Javascript

这四个技术在动态html页面效果定义时，都处于什么样的角色呢？负责什么样的职责呢？
HTML:负责提供标签，对数据进行封装，目的是便于对改标签中的数据进行操作
简单说：用标签封装数据

CSS:负责提供样式属性，对标签中的数据进行样式的定义
简单说：对数据进行样式定义

DOM:负责将标签型文档及文档中的内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作
简单说：将文档和标签以及其他内容变成对象

JS:负责提供程序设计语言，对页面中的对象进行逻辑操作
简单说：负责页面的行为定义，就是页面的动态效果
所以javascript是动态效果的主力编程言
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

1、获取节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
function getNodeDemo(){
/*
需求：获取页面的节点
思路：通过document对象完成，因为div节点有id属性，所以可以通过id属性来完成获取

*/
var divNode=document.getElementById("divid");
//节点都有三个必备的属性：节点名称、节点类型、节点值
alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
/*
常见节点有三种：
1、标签型节点：类型1
2、属性节点：类型2
3、文本节点：类型3
标签型节点是没有值的，属性和文本节点是可以有值的
*/
//获取div节点中的文本
var text=divNode.innerHTML;
alert(text);
//改变div中的文本
divNode.innerHTML="哈哈，文本被窝改了"
}
//获取文本框节点演示getElementByname
function getNodeDemo2(){
var node=document.getElementsByName("user");
//alert(node.length);
alert(node[0].value);
/*上面的可以写成下面的样子
var userNode=document.getElementsByName("user");
alert(userNode.value);
*/
}
//获取超链接节点对象，演示getElementsByTagName方法
function getNodeDemo3(){
//直接用标签名获取
var nodes=document.getElementsByTagName("a");
alert(nodes[0].innerHTML);
}
/*
对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开
当然是要获取其中被操作的超链接对象
可是通过document获取超链接，拿到的是页面中所有的超链接节点
只想获取一部分该如何办呢？
只要获取到被操作的超链接所属的节点即可
再通过这个即诶点获取到它里面所有的超链接节点
*/
function getNodeDemo4(){
//获取超链接所属的div节点
var divNode=document.getElementById("newslink");
//通过div对象方法的查找发现它也具备getElementsByTagName方法
//记住：所有容器型标签都具备这个方法，在改标签范围内获取指定名称的标签
var aNodes=divNode.getElementsByTagName("a");
for(var x=0;x<aNodes.length;x++){
alert(aNodes[x].innerHTML);
aNodes[x].target="_blank";
}
}
</script>
<input type="button" value="演示document对象获取节点" onclick="getNodeDemo4()"/>
<div id="divid">这是一个div区域</div>
<input type="text" name="user"/>
<a href="http://www.sina.com.cn">新浪网站1</a>
<a href="http://www.sina.com.cn">新浪网站2</a>
<div id="newslink">
<a href="http://www.163.com.cn">新闻链接1</a>
<a href="http://www.163.com.cn">新闻链接2</a>
<a href="http://www.163.com.cn">新闻链接3</a>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
function getNodeByLevel(){
//获取页面中的表格节点
var tabNode=document.getElementById("tabid");
//获取父节点 parentNode
// var node=tabNode.parentNode;
// alert(node.nodeName);//body
//获取子节点 childNodes
var node=tabNode.childNodes;
alert(node.nodeName);//tbody
/*获取tr标签
var node=tabNode.childNodes;
alert(node[0].childNodes[0].nodeName);//tr
*/

}
</script>
<input type="button" value="通过节点层次关系获取节点" onclick="getNodeByLevel()"/>
<div>div 区域</div>
<table id="tabid">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<dl>
<dt>上层项目</dt>
<dt>下层项目</dt>
</dl>
<a href=''>一个超链接</a>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2、操作节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border:#00ccff 1px solid;
width:200px;
paddding:30px;
margin:10px
}
#div_1{
background-color:#00ccff;
}
#div_2{
background-color:#ffccff;
}
#div_3{
background-color:#cc00ff;
}
#div_4{
background-color:#00ff00;
}
</style>
</head>
<body>
<script type="text/javascript">
//创建并添加节点
//需求：在div_1节点中添加一个文本节点
function crtAndAdd(){
/*
1、创建一个文本节点
2、获取div_1节点
3、将文本节点添加到div_1节点中
*/
//1、创建节点，使用document中的createTextNode方法
var oTextNode=document.createTextNode("这是一个新的文本");
//2、获取div_1节点
var oDivNode=document.getElementById("div_1");
//3、将文本节点添加到div_1节点中
oDivNode.appendChild(oTextNode);
}
//需求：在div_1中创建并添加一个按钮节点
function crtAndAdd2(){
//1、创建一个按钮节点
var oButNode=document.createElement("input");
oButNode.type="button";
oButNode.value="一个新按钮";
//2、获取div_1节点
var oDivNode=document.getElementById("div_1");
//3、将按钮节点添加到div_1节点中
oDivNode.appendChild(oButNode);
}
//通过另一种方式完成添加节点
function crtAndAdd3(){
/*
其实是使用了容器型标签中的一个属性，innerHTML
这个属性可以设置html文本
*/
//1、获取div_1节点
var oDivNode=document.getElementById("div_1");
//oDivNode.innerHTML="hahaha";
oDivNode.innerHTML="<input type='button' value='有个按钮'/>";
}
// ==========================
//需求：将div_2节点删除
function delNode(){
//1、获取div_2节点
var oDivNode=document.getElementById("div_2");
//2、使用div节点的removeNode方法删除
// oDivNode.removeNode(true);//较少用
//一般使用removeChild方法，删除子节点
//获取div_2的父节点，然后再用父节点的removeChild将div_2删除
oDivNode.parentNode.removeChild(oDivNode);
}
//需求：用div_3节点替换div_1节点
function updateNode(){
/*
获取div_3和div_1
使用replaceNode进行替换
*/
var oDivNode_1=document.getElementById("div_1");
var oDivNode_3=document.getElementById("div_3");
//oDivNode_1.replaceNode(oDivNode_3);
//建议使用replaceChild方法
oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
}
//需求：希望用div_3替换div_1,并保留div_3节点，其实就是对div_3进行克隆
function cloneDemo(){
var oDivNode_1=document.getElementById("div_1");
var oDivNode_3=document.getElementById("div_3");
var oCopyDiv_3=oDivNode_3.cloneNode(true);
oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);

}

</script>
<input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
<input type="button" value="删除节点" onclick="delNode()"/>
<input type="button" value="修改节点" onclick="updateNode()"/>
<input type="button" value="克隆节点" onclick="cloneDemo()"/>
<div id="div_1">

</div>

<div id="div_3">
div区域演示文字
</div>

<div id="div_4">
节点的增删改查
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
3、事件处理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="out.js"></script>


<script type="text/javascript">
//定义一个函数
function windowObjectDemo(){
//想要知道这个浏览器的信息，就需要使用window对象中navigator
var name=window.navigator.appName;
var version=window.navigator.appVersion;
println(name+":"+version)
}
//演示location
function windowObjectDemo2(){
// var pro=location.protocol;

// var text=location.href;
// alert(text);
// 给location的href属性设置一个值，改变了地址栏的值，并对其值进行了解析，如果是http还进行连接访问
location.href="http://www.sina.com.cn"
}
</script>

<input type="button" value="演示window中的对象" onclick="windowObjectDemo2()">

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/*
οnunlοad=function(){
alert("onunload run");
}
οnlοad=function(){
alert("onload run");
}
οnbefοreunlοad=function(){
alert("onbeforeunload run");
}
*/
οnlοad=function(){
window.status="啊！加载完毕了";
}//状态信息
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
ad.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>特价大优惠！</h1>
<h2>什么东西便宜呢!</h2>
<h1>你猜！</h1>
<script type="text/javascript">
setTimeout("close()",3000);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript" src="out.js"></script>
<script type="text/javascript">
var timeid;
function widowMethodDemo(){
// var b=confirm("你真的确定要点击吗？");
// alert("b="+b);
setTimeout("alert('time out run')",4000);
timeid=setInterval("alert('interval run')",3000);
}
function stopTime(){
clearInterval(timeid);
}
/* function windowMove(){
for(var x=0;x<700;x++)
moveBy(20,0);
moveBy(0,20);
moveBy(-20,0);
moveBy(0,-20);
} */
//广告
function windowOpen(){
open("ad.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");
}
</script>
<input type="button" value="演示window对象的方法" onclick="windowOpen()"/>
<input type="button" value="停止" onclick="stopTime()"/>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
4、新闻字体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻字体</title>
<style type="text/css">
/*超链接访问前，访问后样式一致*/
a:link,a:visited{
color:#0044ff;
}
a:hover{
color:#ffff00;
}
#newstext{
width:500px;
border:#00ff00 1px solid;
padding:10px;
}
/*预定义一些样式封装到选择器，一般使用类选择器 */
.norm{
color:#000000;
font-size:16px;
background-color:#cdd8d0;
}
.max{
color:#808080;
font-size:28px;
background-color:#9ce9b4;
}
.min{
color:#ff0000;
font-size:12px;
background-color:#f1b96d;
}
</style>
</head>
<body>
<!--
需求：新闻字体的大中小样式改变
思路：
1、现有新闻数据，并用标签封装
2、定义一些页面样式
3、确定事件源和时间，以及处理方式中被处理的节点
事件源：a标签，事件：onclick
被处理的节点 div-newstext

既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果
可以使用给href设置：javascript:void(0)来完成

-->
<script type="text/javascript">
function changeFont(size){
/*
既然要对div newstext中的文本字体进行操作
必须要先获取div节点对象
*/
var oNewsText=document.getElementById("newstext");
//获取oNewsText节点的style样式属性对象
oNewsText.style.fontSize=size+"px";
oNewsText.style.color=clr;
}
/*
如果根据用户点击所需要的效果不唯一
仅通过传递多个参数虽然可以实现效果，但是
1、传参过多，阅读性差
2、js代码和css代码耦合性高
3、不利于扩展
解决：
将多个所需的样式进行封装
封装到选择器中，只要给指定的标签加载不同的选择器就可以了
*/
function changeFont(selectorName){
var oNewsText=document.getElementById("newstext");
oNewsText.className=selectorName;
}

</script>
<h1>这是一个新闻标题</h1>
<hr/>
<a href="javascript:void(0)" onclick="changeFont('max')">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('norm')">中字体</a>
<a href="javascript:void(0)" onclick="changeFont('min')">小字体</a>
<div id="newstext" class="norm">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
5、展开闭合列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展开闭合列表</title>
<style type="text/css">
dl dd{
margin:0px;
}
dl{
height:18px;
overflow:hidden;
}
/*
预定义一些样式，类选择器，便于给标签进行样式的动态加载
*/
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
</style>
</head>
<body>

<script type="text/javascript">
var flag=true;
//列表展开闭合效果
function list2(){
/*
思路：
1、无非就是将dl属性的overflow的值改成visible即可
2、要先获取dl节点
3、改变该节点的style.overflow属性
*/
//1、获取dl节点
var oDlNode=document.getElementsByTagName("dl")[0];
//oDlNode.style.overflow="visible";
if(flag){
oDlNode.style.overflow="visible";
flag=false;
}else{
oDlNode.style.overflow="hidden";
flag=true;
}

}
//重新定义list,降低js和css的耦合性
function list(node){
/*
//1、获取dl节点
var oDlNode=document.getElementsByTagName("dl")[0];
//2、设置dl的className属性值
//oDlNode.className="open";
if(oDlNode.className=="close"){
oDlNode.className="open";
}else{
oDlNode.className="close";
}
*/
var oDlNode=node.parentNode;
if(oDlNode.className=="close"){
oDlNode.className="open";
}else{
oDlNode.className="close";
}

}
/*
在多个列表下，一次只需要展开一个列表其他列表都关闭
怎么保证开一个，而关闭其他呢？
思路：
1、获取所有的dl节点
2、遍历这些节点，只对当前的dl进行展开或者关闭操作，其他节点都进行闭合操作
*/
function list(node){
//获取对当前的dl节点
var oDlNode=node.parentNode;
//获取所有的dl节点
var collDlNodes=document.getElementsByTagName("dl");
//遍历所有的dl
for(var x=0;x<collDlNodes.length;x++){
if(collDlNodes[x]==oDlNode){
if(oDlNode.className=="close"){
oDlNode.className="open";
}else{
oDlNode.className="close";
}
}else{
collDlNodes[x].className="close";
}
}
}
</script>
<dl class="close">
<dt onclick="list(this)">显示条目一</dt>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">显示条目一</dt>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">显示条目一</dt>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
</dl>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>好友菜单</title>
<style type="text/css">
/*对表格中的ul进行样式定义
1、去除无序列表的样式
2、将列表的外边距取消

*/
table ul{
list-style:none;
margin:0px;
}
/*
对表格框线进行定义以及单元格的框线进行定义
*/
table{
border:#8080ff 1px solid;
width:125px;
}
table td{
border:#8080ff 1px solid;
}
</style>
</head>
<body>

<table>
<tr>
<td>
<a href="">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
6、radio

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#contenid{
display:none;/*隐藏*/
}
#no1ul{
list-style:none;
margin:0px;
}
.close{
display:none;
}
.open{
display:block;
}
</style>
<script type="text/javascript">
function showResult(){
//1、判断是否有答案被选中
//获取所有no1的radio,并遍历判断checked状态
var oNo1Nodes=document.getElementsByName("no1");
var flag=false;
var val;
for(var x=0;x<oNo1Nodes.length;x++){
if(oNo1Nodes[x].checked){
flag=true;
val=oNo1Nodes[x].value;
break;
}
}
if(!flag){
document.getElementById("errinfo").innerHTML="没有任何答案被选中".fontcolor("red");
return;
}
if(val>=1&&val<=3){
document.getElementById("res_1").className="open";
document.getElementById("res_2").className="close";
}
else{
document.getElementById("res_1").className="close";
document.getElementById("res_2").className="open";
}
}
</script>
</head>
<body>


<h2>欢迎您参与性格测试：</h2>
<div>
<h3>第一题：</h3>
<span>您喜欢的水果是什么？</span>
<ul id="no1ul">
<li><input type="radio" name="no1" value="1"/>葡萄</li>
<li><input type="radio" name="no1" value="2"/>西瓜</li>
<li><input type="radio" name="no1" value="3"/>苹果</li>
<li><input type="radio" name="no1" value="4"/>芒果</li>
<li><input type="radio" name="no1" value="5"/>樱桃</li>
</ul>
</div>

<div>
<input type="button" value="查看测试结果：" onclick="showResult()"/>
<span id="errinfo"></span>
<div id="res_1" class="close">1-3分:你的性格内向并扭曲，建议...</div>
<div id="res_2" class="close">4分以上：你的性格外向并分裂，建议...</div>
</div>

<hr/>
<script type="text/javascript">
function showContent(node){
var oDivNode=document.getElementById("contentid");
with(oDivNode.style){
if(node.value=="yes"){
display="block";
}else{
display="none";
}
}
}
</script>

<div>
您要参与问卷调查吗：
<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)"/>是
<input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)"/>否
</div>
<div id=contentid>
问卷调查内容：<br>
您的姓名:<input type="text"/><br>
您的邮箱:<input type="text"/>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
7、Select

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style tyle="text/css">
.clrclass{
height:50px;
width:50px;
float:left;
margin-right:30px;
}
#text{
clear:left;
margin-top:20px;
}
</style>
</head>

<body>

<script type="text/javascript">
function changeColor(node){
var colorVal=node.style.backgroundColor;
document.getElementById("text").style.color=colorVal
}
</script>
<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
</div>
<hr/>

}
</script>
<select name="selectColor" onchange="changeColor2()">
<option value="black">---选择颜色---</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>

<select name="selectColor2" onchange="changeColor3()">
<option style="background-color:black" value="black">---选择颜色---</option>
<option style="background-color:red" value="red">红色</option>
<option style="background-color:green" value="green">绿色</option>
<option style="background-color:blue" value="blue">蓝色</option>
</select>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
关联选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
<script type="text/javascript">
function selectCity(){
var collCities=[['选择城市'],['海淀区','朝阳区','东城区','西城区']
,['济南','青岛','烟台','威海']
,['沈阳','大连','鞍山','抚顺']
,['石家庄','保定','邯郸','廊坊']];
// var arr={"beijing":['海淀区','朝阳区','东城区','西城区']};
//获取两个下拉菜单对象
var oSelNode=document.getElementById("selid");
var oSubSelNode=document.getElementById("subselid");
//获取到底选择哪个省
var index=oSelNode.selectedIndex;
//通过角标到容器去获取对应的城市数组
var arrCities=collCities[index];
//将子菜单中的内容清空一下
/* for(var x=0;x<oSubSelNode.options.length;){
oSubSelNode.removeChild(oSubSelNode.options[x]);
} */
//清除动作
oSubSelNode.length=0;
//遍历这个数组，并将这个数组的元素封装成option对象，添加到子菜单中
for(var x=0;x<arrCities.length;x++){
var oOptNode=document.createElement("option");
oOptNode.innerHTML=arrCities[x];

oSubSelNode.appendChild(oOptNode);
}
}
</script>
<select id="selid" onchange="selectCity()">
<option>选择省市</option>
<option value="beijing">北京</option>
<option>山东</option>
<option>辽宁</option>
<option>河北</option>
</select>
<select id="subselid">
<option>选择城市</option>
</select>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
8、表单校验

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
</head>
<body>

<script type="text/javascript">
/*
//校验用户名
function checkUser(){
var flag;
var oUserNode=document.getElementsByName("user")[0];
var name=oUserNode.value;
//定义正则表达式
var reg=new RegExp("^[a-z]{4}$","i");//限制头和尾是连续的四个字母，i是忽略大小写的标记
//reg=/^[0-9]{4}$/;//必须是连续的四个数字

/*
发现很多框的校验除了几个内容不同外，校验的过程是一样的
所以进行代码的提取
*/
function check(name,reg,spanId,okinfo,errinfo){
var flag;
var val=document.getElementsByName(name)[0].value;

//获取确认密码的span区域
var oSpanNode=document.getElementById("repswspan");

if(pass==repass){
oSpanNode.innerHTML="两次密码一致".fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML="两次密码不一致".fontcolor("red");
flag=false;
}
return flag;
}

//校验邮件
function checkMail(){
var reg=/^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
}

//提交事件处理
function checkForm(){
alert(checkUser()+"--"+checkPsw()+"--"+checkRepsw()+"--"+checkMail())
if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail())
return true
else
return false;
}

function mysubmit(){
var oFormNode=document.getElementById("userinfo");
oFormNode.submit();
}
</script>
<form onsubmit="return checkForm()" id="userinfo">

用户名称：<input type="text" name="user" onblur="checkUser()"/>
<span id="userspan"></span>
<br/>

输入密码：<input type="text" name="psw" onblur="checkPsw()"/>
<span id="pswspan"></span>
<br/>

确认密码：<input type="text" name="repsw" onblur="checkRepsw()"/>
<span id="repswspan"></span>
<br/>

邮件地址：<input type="text" name="mail" onblur="checkMail()"/>
<span id="mailspan"></span>
<br/>

<input type="button" value="我的提交" onclick="mysubmit()"/>
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
9、单选、全选
table.css

@charset "UTF-8";
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:5px;
}
table th{
border:#249bdb 1px solid;
padding:5px;
background-color:rgb(200,200,200);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
.one{
background-color:#9bf7d5;
}
.two{
background-color:#f3e99a;
}
.over{
background-color:#f3e89a;
}
</style>
<script type="text/javascript">
//行颜色间隔显示功能
function trColor(){
var name;
//1、获取表格对象
var oTabNode=document.getElementById("mailtable");
//2、获取行对象
var collTrNodes=oTabNode.rows;
//3、对所有需要设置背景的行对象进行遍历
for(var x=1;x<collTrNodes.length-1;x++){
if(x%2==1){
collTrNodes[x].className="one";
}else{
collTrNodes[x].className="two";
}
collTrNodes[x].οnmοuseοver=function(){
name=this.className;
this.className="over";
}
collTrNodes[x].οnmοuseοut=function(){
this.className=name;
}
}
}
οnlοad=function(){
trColor();
}
//复选框的全选动作
function checkAll(node){
//获取所有的 mail复选框
var collMailNodes=document.getElementsByName("mail");
for(var x=0;x<collMailNodes.length;x++){
collMailNodes[x].checked=node.checked;
}
}
/* //删除所选邮件
function deleteMail(){
if(!confirm("你真的要删除所选的邮件吗？")){
return;
}
//获取所有的mail节点
var collMailNodes=document.getElementsByName("mail");
for(var x=0;x<collMailNodes.length;x++){
if(collMailNodes[x].checked){
var oTrNode=collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
x--;
} */
}
}
</script>
</head>
<body>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)" />全选
</th>
<th>
发件人
</th>
<th>
邮件名称
</th>
<th>
邮件附属信息
</th>
</tr>

<tr>
<td>
<input type="checkbox" name="mail" />
</td>
<td>
张三
</td>
<td>
我是邮件1
</td>
<td>
我是附属信息1
</td>
</tr>
</table>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除附件</title>
<style type="text/css">
table a:link,table a:visited{
color:#179ed9;
text-decoration:none;
}
table a:hover{
color:#f36021;
}
</style>
<script type="text/javascript">
function addFile(){
/*
因为文件选取框定义在行对象中
所以只要给表格创建新的行和单元格即可
*/
var oTabNode=document.getElementById("fileid");

var oTrNode=oTabNode.insertRow();

var oTdNode_file=oTrNode.insertCell();
var oTdNode_del=oTrNode.insertCell();

oTdNode_file.innerHTML="<input type='file'/>"
oTdNode_del.innerHTML="<a href='javascript:void(o)' οnclick='deleteFile(this)'>删除附件</a>"
}
function deleteFile(node){
var oTrNode=node.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
</script>
</head>
<body>
<table id="fileid">

<tr>
<td><a href="javascript:void(0)" onclick="addFile()">添加附件</a><td>
</tr>

</table>

</body>
</html>
————————————————
版权声明：本文为CSDN博主「Jorocco」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Jorocco/article/details/79451129

posted on 2019-08-27 10:33 guanxi0808 阅读(212) 评论(0) 收藏举报

刷新页面返回顶部

guanxi0808

DOM:Document Object Model(文档对象模型)

导航

公告