DOM基础
本文内容是根据毕晓东老师的****总结而得。DOM相关基础知识。
1.DOM概述
Document Object Model(文档对象模型)，主要用来将标记型文档封装成对象，并将标记型文档中所有的内容（标签、文本、属性等）都封装成对象。
封装成对象的目的：为了更方便的操作这些文档以及文档中的所有内容。因为对象的出现就可以有属性和行为被调用。
标记型文档特征：除了标签就是标签封装的内容或者标签的属性。
文档：标记型文档；
对象：封装了属性和行为的实例，可以被直接调用；
模型：所有标记型文档都具备一些共性特征的一个体现。
标记型文档：标签、标签中的属性、标签中封装的数据。
只要是标记型文档，DOM这种技术都可以对其进行操作。
常见的标记型文档：HTML、xml
DOM如何对标记型文档进行操作？
要操作标记型文档必须对其进行解析。
DOM技术的解析方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM演示</title>
</head>
<body>
<div>div区域</div>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
</dl>
<table>
<tr>
<th>表头</th>
<td>单元格</td>
</tr>
</table>
<form>
<input type="text"/>
</form>
</body>
</html>
一读取到这个HTML文档时，就将这个文档封装成了Document对象，然后对各标签层次进行更细致的划分。标签、属性、标签里的数据。
图解：DOM解析将按照标签的层次关系体现出标签的所属。形成一个树状结构。书中的标签以及文本设置属性称为节点，也成为对象，标签通常也成为页面中的元素。可以动态添加或删除页面的各个节点。
2.DOM解析的特点
DOM解析方式：将标记型文档解析成一颗DOM树，并将书中的内容都封装成节点对象。
注意：DOM解析方式的好处：可以对树中的节点进行任意操作，如增删改查。
弊端：这种解析需要将整个标记型文档加载进内存，意味着如果标记型文档体积很大，较为浪费内存空间。
另一种解析方式：SAX。是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准。
SAX解析方式：基于时间驱动的解析。
读这个文档，读到标签的开始时即触发一个事件，然后去读取里面的内容，当读取到结束标签时，事件触发结束。
用SAX解析获取数据的速度很快，但是不能对标记进行增删改动作，可以查。
3.DOM三级模型
DOM level 1：将HTML文档封装成对象；
DOM level 2：在level1基础上加入了一些新功能，如解析名称空间（一个页面都使用多个同名标签，但是含义不一样，就需要给标签定义新的名称空间，即不同的包来存放，也可使用唯一标识即域名）。如xmlns=”my”或xmlns=http://www.sina.com.cn
DOM level 3：将xml文档封装成了对象。
4.DHTML概述
DHTML：动态的HTML。不是一门语言，是多项技术综合体的简称。HTML+CSS是静态页面。
多项技术包括：HTML、CSS、DOM、JavaScript。
这四种技术在动态HTML页面效果定义时，都处于什么角色？负责什么职责？
HTML：负责提供标签对数据进行封装，目的是便于对该标签中的数据进行操作。简单说，用标签封装数据。
CSS：提供样式属性，对标签中的数据进行样式的定义。简单说，对数据进行样式定义。
DOM：负责将标记型文档（标签型文档）以及文档中的所有内容进行解析，并封装成对象。在对象中定义了更多的属性和行为，便于对对象进行操作。简单说，将文档和标签以及其他内容变成对象。
JS：负责提供程序设计语言对页面中的对象进行逻辑操作。简单说，负责页面行为定义。即页面的动态效果。所以JS是动态效果的主力编程语言。
DHMTL+XMLhttpRequest = Ajax
5.BOM&Navigator对象&History对象
浏览器本身也可以让它进行动态效果的产生。
BOM：Browser Object Model(浏览器对象模型)，这个模型方便与操作浏览器。
浏览器对应的对象就是window对象，这个可以通过查阅DHTML API获得。
Navigator对象的所有方法：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM中的window对象</title>
<script src="../js/out.js" type="text/javascript"></script>
</head>
<body>
<!-- 为了演示方便，定义一个事件源，通过对事件源的触发，获取想要的结果。
比如用户通过点击按钮就可以知道浏览器的一些信息 -->
<!-- 定义时间源，注册时间关联的动作 。事件：onclick 事件处理方式是一个函数，功能定义必须使用JS。
如果页面功能只为了除了某几个内容，可以放在标签附近，如果要处理很多内容，要放在head标签里-->
<!-- 定义按钮onclick事件的处理方式 -->
<script type="text/javascript">
function windowObjDemo(){
//想要知道浏览器的信息，就需要使用window对象中的Navigator对象，一打开浏览器Navigator对象就在window中存在了
var name = window.navigator.appName;
var version = window.navigator.appVersion;
println(name);
println(version);
}
</script>
<input type="button" value="演示DOM中window中的对象" onclick="windowObjDemo()"/>
</body>
</html>
结果：
window对象本身是存在的，所以使用时可以不写window.直接使用navigator.
History对象:浏览器的前进后退
6.Location对象
代表地址栏。可以通过地址栏和服务端进行交互
和java中的URL对象相似
Location对象里的属性既可以获取也可以设置。
Location对象中的方法：
//演示location
function windowObjDemo2(){
var protocol = location.protocol;
var href = location.href;
println("protocol:"+protocol);
println("href:"+href);
//给Location对象的href属性设置一个值。改变地址栏，并对其值进行解析，如果http，还进行连接访问
location.href = "http://www.sina.com.cn";
}
结果：
7.window常见方法1
结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window 对象中的方法</title>
<script src="../js/out.js" type="text/javascript"></script>
<script type="text/javascript">
function windowMethod(){
var b = confirm("你真的确认点击吗？");
alert(b);
}
</script>
</head>
<body>
<input type="button" value="演示DOM中window中的对象" onclick="windowMethod()"/>
</body>
</html>
结果：
Integer setTimeout(表达式,millSeconds)：设置定时执行
//设置4秒后，执行某表达式
setTimeout("alert('timeout set')",4000);
setInterval(表达式，毫秒值)：每隔多少毫秒都会执行
clearTimeout()
clearInterval()清除对应形式，参数是setInterval的返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window 对象中的方法</title>
<script src="../js/out.js" type="text/javascript"></script>
<script type="text/javascript">
var timeid;
function windowMethod(){
//设置4秒后，执行某表达式
timeid = setInterval("alert('timeout set')",4000);
}
function clearwindowMethod(){
clearInterval(timeid);
}
</script>
</head>
<body>
<input type="button" value="演示DOM中window中的对象" onclick="windowMethod()"/>
<input type="button" value="清除DOM中window中的对象" onclick="clearwindowMethod()"/>
</body>
</html>
moveBy(横坐标,纵坐标)方法：坐标移动窗口(指定偏移量)
moveTo(x,y)直接移动到指定的坐标点
resizeBy()调整窗口大小
resizeTo()
8.window常见方法2
scrollBy:调节滚动条
scrollTo
close():能被close的必须是新开的窗口，当前窗口没有效果
open():以指定方式打开一个窗体，并指定窗体的样式
function openWindow(){
open("ss.html","_blank","height=200,width=400,status=yes,toolbar=yes,menubar=yes,location=yes");
}
<input type="button" value="openWindow" onclick="openWindow()"/>
新开的页面：可以设置定时关闭。注意当前窗口使用定时关没有效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
setTimeout("close()",3000);
</script>
</head>
<body>
<h1>年底大酬宾</h1>
快来够买吧
</body>
</html>
9.window常见事件
onfocus():获取焦点
onload()：页面里所有图片文字等数据加载完后（再次刷新时也会触发），立即触发
onunload()：关闭浏览器、页面刷新时，窗口还在就会调用
onbeforeunload():当数据不要（关闭窗口、刷新页面）的时候触发
注意不同浏览器各个效果会不一样
//当事件触发时，触发一个函数
onunload = function(){
alert("onunload run");
}
onload = function(){
alert("onload run");
}
onbeforeunload = function(){
alert("onbeforeunload run");
}
onload事件中一旦加载完毕，再设置窗体样式
onunload = function(){
window.status = "加载完毕";
}
10.练习——广告弹窗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告弹窗练习</title>
<script src="../js/out.js" type="text/javascript"></script>
<script type="text/javascript">
//演示广告弹窗效果，页面一加载完就执行，在当前页面定义脚本，可以再onload事件中完成广告的弹窗
onload = function(){
open("ss.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//setTimeout("close()",3000);
onunload = function(){
open("ss.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");
}
//每秒获取一次焦点，不能关闭也不能最小化
setTimeout("focus()",1000);
</script>
</head>
<body>
<h1>年底大酬宾</h1>
快来够买吧
</body>
</html>
结果：弹窗窗口后关闭不了也缩小不了，且每秒获取一次焦点（每秒弹出来一次）
11.document获取节点byID
该对象将标记型文档进行封装，该对象的作用，是对标记型文档进行操作，最常见的操作就是，想要实现动态效果，需要对节点操作，那么就要获取到这个节点，要想获取节点，就需要先获取到节点所属的文档对象document。
获取节点的方法：
getElementById()：通过标签的id获取该标签节点，返回该标签节点对象
getElementsByName()：通过标签的name获取该标签节点，因为name属性可相同，所以返回的是一个数组（容器）。
getElementsByTagName()：通过标签的标签名TagName获取该标签节点，因为Tag有重复，所以返回的是数组。
节点都有三个必备的属性：节点名称、节点类型、节点值
常见节点有三种：
标签型节点：类型1
属性节点：类型2
文本节点：类型3
值：标签型节点没有值，属性和文本节点是可以有值的。
获取到节点后，再获取节点的文本：
innerText():只支持IE
innerHtml()：IE和FireFox都支持
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取节点byId</title>
<script src="../js/out.js" type="text/javascript"></script>
<script type="text/javascript">
function getNodeId(){
var divNode = document.getElementById("divId");
alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
//获取到节点后，再获取节点的文本
var text1 = divNode.innerHTML;
alert(text1);
//修改div的文本区域
var text = divNode.innerHTML = "哈哈，文本被修改了";
alert(text);
}
</script>
</head>
<body>
<input type="button" value="获取节点" onclick="getNodeId()"/>
<div id="divId" name="divname" value="asdf">这是一个div区域</div>
</body>
</html>
结果：
12.document获取节点byName
getElementsByName()：通过标签的name获取该标签节点，因为name属性可相同，所以返回的是一个数组（容器）。
function getNodeName(){
var nodes = document.getElementsByName("user");
alert(nodes+":"+nodes[0].type);
}
<input type="button" value="获取节点" onclick="getNodeName()"/>
<input type="text" name="user"/>
结果：
获取表单的值：
alert(nodes+":"+nodes[0].value);
或者
var userNode = document.getElementsByName("user")[0];
alert(userNode.value);
13.document获取节点byTagName
既没有ID也没有name时，可通过标签名获取节点
getElementsByTagName()：通过标签的标签名TagName获取该标签节点，因为Tag有重复，所以返回的是数组。
function getNodeByTagName(){
var nodes = document.getElementsByTagName("a");
alert(nodes[0].innerHTML);
}
<input type="button" value="获取节点" onclick="getNodeByTagName()"/>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn">新浪</a>
结果：
可以拿到所有的Tag标签后，再设置所有tag设置属性。如：
nodes[0].target = "_blank";
14.document获取节点byTagName2
只想获取一部分超链接怎么做？
通过对div对象方法的查找发现它也具备getElementsByTagName方法，所以所有容器型标签都具备该方法，在该标签范围内获取指定名称的标签。
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn">新浪</a>
<div id="links">
<a href="http://www.baidu.com">百度1</a>
<a href="http://www.sina.com.cn">新浪1</a>
<a href="http://www.baidu.com">百度2</a>
<a href="http://www.sina.com.cn">新浪3</a>
</div>
//获取超链接所属的div
var nodes = document.getElementById("links");
//通过div下的getElementsByTagName获取所有超链接
var aNodes = nodes.getElementsByTagName("a");
alert(aNodes[0].innerHTML);
15.通过节点层次关系获取节点
关系：
父节点：只代表一个节点对象，用属性就可以完成。parentNode
子节点：一个节点有多个子节点。childNodes对应一组节点集合
兄弟节点：上一个兄弟节点previousSibling;下一个兄弟节点nextSibling
没有浏览器DOM解析方式不一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过节点关系的层次关系获取节点对象</title>
<script src="../js/out.js" type="text/javascript"></script>
<script type="text/javascript">
function getNodes(){
//获取页面中的表格
var tabNode = document.getElementById("tabId");
//获取父节点parentNodes
/* var parentNodes = tabNode.parentNode;
alert("parentNodes:"+parentNodes); */
//获取子节点childNodes
/* var nodes = tabNode.childNodes;
alert(nodes[0]); */
//获取兄弟节点
var node = tabNode.previousSibling;
alert("node:"+node.nodeName);
var node1 = tabNode.nextSibling;
alert("node1:"+node1.nodeName);
}
</script>
</head>
<body>
<input type="button" value="通过节点关系的层次关系获取节点对象" onclick="getNodes()"/>
<div>div区域</div>
<table id="tabId">
<tr>
<th>表头</th>
<td>单元格</td>
</tr>
</table>
</body>
</html>
由于内核不一样， Chrome觉得div节点是一个文本，所以是一个文本节点。如果是IE会直接显示DIV。所以在使用节点时尽量少用兄弟节点，因为解析时会出现浏览器不同解析不一致情况。
16.节点操作——创建并添加1
思路：1，创建一个文本节点createTextNode
2，获取div_1节点
3，将文本节点添加到div节点中appendChild
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建并添加节点</title>
<script src="../js/out.js" type="text/javascript"></script>
<script type="text/javascript">
//创建并添加节点。需求：在div_1中添加一个文本节点
//思路：1，创建一个文本节点createTextNode 2，获取div_1节点 3，将文本节点添加到div节点中appendChild
function creatAndAddNode(){
//1，创建一个文本节点 document 中createTextNode
var div1TextNode = document.createTextNode("div_1创建一个文本节点");
//2，获取div_1节点
var divNode = document.getElementById("div_1");
//3，将文本节点添加到div节点中 appendChild
divNode.appendChild(div1TextNode);
}
function delNode(){
}
function updateNode(){
}
</script>
<style type="text/css">
div{
border:#00ccff 1px solid;
width:200px;
padding: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>
<input type="button" value="创建并添加节点" onclick="creatAndAddNode()"/>
<input type="button" value="删除节点" onclick="delNode()"/>
<input type="button" value="修改节点" onclick="updateNode()"/>
<div id="div_1"></div>
<div id="div_2">div_2</div>
<div id="div_3">div_3</div>
<div id="div_4">div_4</div>
</body>
</html>
效果：
创建添加前：
创建添加后：
17.节点操作——创建并添加2
需求：在div_1中创建并添加一个按钮节点
createTextNode是创建一个文本节点，如果要添加一个按钮或标签，就需要使用createElement
//需求：创建并添加一个按钮节点
function creatAndAddBtnNode(){
//1，创建一个按钮节点 document 中createElement
var div1BtnNode = document.createElement("input");
div1BtnNode.type = "button";
div1BtnNode.value = "创建并添加按钮节点";
//2，获取div_1节点
var divNode = document.getElementById("div_1");
//3，将文本节点添加到div节点中 appendChild
divNode.appendChild(div1BtnNode);
}
<input type="button" value="创建并添加按钮节点" onclick="creatAndAddBtnNode()"/>
另一种方式完成添加节点：
其实是使用容器型标签中的属性，innerHTML，这个属性可以设置HTML文本
//需求：创建并添加一个按钮节点2，使用innnerHTML方法
function creatAndAddBtnNode2(){
//1，获取div_1节点
var divNode = document.getElementById("div_1");
//2，设置文本或标签皆可
//divNode.innerHTML = "创建并添加一个按钮节点2， 使用innnerHTML方法";
divNode.innerHTML = "<input type='text'/>";
}
18.节点操作——删除节点
removeNode(Boolean childrenNode):此方法不建议使用，但是可以用
removeChild()：建议使用，删除子节点。获取div_2的父节点，然后通过父节点的removeChild()方法删除该节点
//需求：将div_2节点删除
function delNode(){
//获取div_2节点
var div2Node = document.getElementById("div_2");
//参数表示是否要删除该div的子节点
div2Node.removeNode(true);
}
<input type="button" value="删除节点" onclick="delNode()"/>
<input type="button" value="修改节点" onclick="updateNode()"/>
<div id="div_1"></div>
<div id="div_2">div_2</div>
<div id="div_3">div_3</div>
<div id="div_4">div_4</div>
结果：false
true:
removeChild()：建议使用，删除子节点。获取div_2的父节点，然后通过父节点的removeChild()方法删除该节点
//需求：将div_2节点删除
function delNode(){
//获取div_2节点
var div2Node = document.getElementById("div_2");
//参数表示是否要删除该div的子节点
//div2Node.removeNode(true);
//removeChild()：建议使用，删除子节点。获取div_2的父节点，然后通过父节点的removeChild()方法删除该节点
div2Node.parentNode.removeChild(div2Node);
}
19.节点操作——替换&克隆节点
修改节点，即替换掉节点。
replaceNode(newNode):不建议使用
//需求:使用div_3替换掉div_1节点
function updateNode(){
//获取div_1节点
var div1Node = document.getElementById("div_1");
//获取div_3节点
var div3Node = document.getElementById("div_3");
//使用replaceNode()方法将div_3替换掉div_1节点
div1Node.replaceNode(div3Node);
}
结果：
replaceChild():利用该节点的父节点，新节点替换掉纠结点
//需求:使用div_3替换掉div_1节点
function updateNode(){
//获取div_1节点
var div1Node = document.getElementById("div_1");
//获取div_3节点
var div3Node = document.getElementById("div_3");
//使用replaceNode()方法将div_3替换掉div_1节点
//div1Node.replaceNode(div3Node);
div1Node.parentNode.replaceChild(div3Node, div1Node);
}
结果：
需求:实现div_3不改变而，用div_3再修改div_1，即克隆cloneNode()
//需求:实现div_3不改变而，用div_3再修改div_1，即克隆clonNode()
function clonNode(){
//获取div_1节点
var div1Node = document.getElementById("div_1");
//获取div_3节点
var div3Node = document.getElementById("div_3");
//cloneNode(boolean):boolean代表是否将其子节点也克隆
var cloneDiv3 = div3Node.cloneNode(true);
div1Node.parentNode.replaceChild(cloneDiv3, div1Node);
}
<input type="button" value="clon节点" onclick="clonNode()"/>
结果：
firstNode = childNode(0)
lastNode = childNode(length-1)
20示例——新闻字体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻字体的大中小样式</title>
<script type="text/javascript">
function changeFontSize(size){
var newstextDiv = document.getElementById("newstext");
newstextDiv.style.fontSize = size+"px";
}
</script>
<style type="text/css">
a:link a:VISITED {
color:purple;
}
a:hover{
color:orange;
}
div{
width:600px;
}
</style>
</head>
<body>
<!-- 实现使用超链接实现大中小字体样式的变更
思路：1，先有新闻数据，并用标签进行封装
2，定义一些页面样式
3，确定事件源和时间，以及处理方式中被处理的节点。
事件源：a标签，事件：onclick
被处理的节点：div_newstext
超链接节点本身就有默认的点击事件,需要给超链接加入自定义的事件处理，就要先取消超链接默认的点击效果
方式一：href="##"
方式二：启动JS的href="javascript:void(0)" 然后再设置onclick事件
三个a标签使用一个方法，并传入不同的字体参数，通过document.getElementById("id").style再设置其属性即可，对象调用使用fontSize这种形式
-->
<h1>这是一个新闻标题</h1>
<hr>
<a href="javascript:void(0)" onclick="changeFontSize(18)">大字体</a>
<a href="javascript:void(0)" onclick="changeFontSize(14)">标准字体</a>
<a href="javascript:void(0)" onclick="changeFontSize(12)">小字体</a>
<div id="newstext" style="font-size:12px;">
这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。
</div>
</body>
</html>
结果：
大：
中：
小：
21.示例——新闻字体2
需求：除了变化大小，也变化字体的颜色
也document.getElementById("id").style.属性设置
但是如果要改变更多属性时，这样操作就会很烦躁，因此需要进行样式封装。
将多个所需的样式进行封装，一般使用类选择器；
封装到选择器中，只要给指定的标签加载不同的选择器即可；
函数传值时，传入选择器；
设置时，document.getElementById(“id”).className = 选择器名称;即可
样式定义了，如果定义了类选择器，样式没有生效，有可能是id选择器优先级更高，且Style属性优先级最高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻字体的大中小样式</title>
<script type="text/javascript">
function changeFontSize(size){
var newstextDiv = document.getElementById("newstext");
newstextDiv.style.fontSize = size+"px";
}
function changeFont(selector){
var newstextDiv = document.getElementById("newstext");
newstextDiv.className = selector;
}
</script>
<style type="text/css">
a:link a:VISITED {
color:purple;
}
a:hover{
color:orange;
}
div{
width:600px;
}
.max{
color:#22FF22;
background-color:#ee0000;
}
.mid{
color:#0044ff;
background-color:#FF5500;
}
.min{
color:#4433ff;
background-color:#000000;
}
</style>
</head>
<body>
<!-- 实现使用超链接实现大中小字体样式的变更
思路：1，先有新闻数据，并用标签进行封装
2，定义一些页面样式
3，确定事件源和时间，以及处理方式中被处理的节点。
事件源：a标签，事件：onclick
被处理的节点：div_newstext
超链接节点本身就有默认的点击事件,需要给超链接加入自定义的事件处理，就要先取消超链接默认的点击效果
方式一：href="##"
方式二：启动JS的href="javascript:void(0)" 然后再设置onclick事件
三个a标签使用一个方法，并传入不同的字体参数，通过document.getElementById("id").style.属性 再设置其属性即可，对象调用使用fontSize这种形式
-->
<h1>这是一个新闻标题</h1>
<hr>
<a href="javascript:void(0)" onclick="changeFontSize(18)">大字体</a>
<a href="javascript:void(0)" onclick="changeFontSize(14)">标准字体</a>
<a href="javascript:void(0)" onclick="changeFontSize(12)">小字体</a>
<br/>
<h3>class选择器方式变换样式</h3>
<a href="javascript:void(0)" onclick="changeFont('max')">大</a>
<a href="javascript:void(0)" onclick="changeFont('mid')">标准</a>
<a href="javascript:void(0)" onclick="changeFont('min')">小</a>
<div id="newstext" style="font-size:12px;" class="mid">
这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。这是一段新闻，目的是为了设置新闻字体的大中小样式。实现使用超链接实现大中小字体样式的变更。
</div>
</body>
</html>
大：
标准：
小：
22.示例——展开闭合列表
默认不显示列表里的条目overflow，一点击则显示。
overflow:visible显示，auto自动，hidden隐藏，scroll滚动。用于检索或设置对象的内容超过指定高度或宽度时如何管理内容。
事先指定区域的宽高，超出部分使用overflow进行设置样式
思路：
- 标签封装数据，html
- 定义样式css
- 明确事件源，时间，以及要处理节点，dom
- 明确具体的操作方式，其实就是时间的处理内容
- 将dl属性的overflow的值进行hidden和visible切换（通过标记记录每次点击，然后判断选择来隐藏或者显示）
- 因此要先获取dl节点
- 改变该节点的style.overflow属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展开闭合列表</title>
<style type="text/css">
dl dd{
margin:0px;
}
dl{
height:15px;
overflow:hidden;
}
</style>
<script type="text/javascript">
var flag = true;
function expandDT(){
//获取dt标签
var dtTag = document.getElementsByTagName("dl")[0];
if(flag){
dtTag.style.overflow = "visible";
flag = false;
}else{
dtTag.style.overflow = "hidden";
flag = true;
}
}
</script>
</head>
<body>
<!-- 默认不显示列表里的条目overflow，一点击则显示 -->
<dl>
<dt onclick="expandDT()" style="font-size:12px;">展开闭合条目</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
</body>
</html>
结果：
23.示例——展开闭合列表2
问题一：写法太繁琐，可以预定义样式已降低JS和CSS的耦合性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展开闭合列表</title>
<style type="text/css">
dl dd{
margin:0px;
}
/* dl{
height:15px;
overflow:hidden;
} */
.open{
height:60px;
overflow:visible;
}
.close{
height:15px;
overflow:hidden;
}
</style>
<script type="text/javascript">
var flag = true;
function expandDT(){
//获取dt标签
var dtTag = document.getElementsByTagName("dl")[0];
if(flag){
dtTag.style.overflow = "visible";
flag = false;
}else{
dtTag.style.overflow = "hidden";
flag = true;
}
}
function openClose(){
var dtTag = document.getElementsByTagName("dl")[0];
if(dtTag.className == "open"){
dtTag.className = "close";
}else{
dtTag.className = "open";
}
}
</script>
</head>
<body>
<!-- 默认不显示列表里的条目overflow，一点击则显示 -->
<dl class="close">
<dt onclick="openClose()">展开闭合条目</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
</body>
</html>
结果：
有多个dl时，可以通过传值方式，区分从而操作多个dl闭合：
<dl class="closeDl">
<dt onclick="openClose(0)">展开闭合条目一</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
<dl class="closeDl">
<dt onclick="openClose(1)">展开闭合条目二</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
<dl class="closeDl">
<dt onclick="openClose(2)">展开闭合条目三</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
问题：如果传值的index顺序变了，会影响闭合效果的正确性。
解决：传入当前被触发的节点即可（this）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展开闭合列表</title>
<style type="text/css">
dl dd{
margin:0px;
}
dl{
height:20px;
}
/* dl{
height:15px;
overflow:hidden;
} */
.openDl{
overflow:visible;
}
.closeDl{
overflow:hidden;
}
</style>
<script type="text/javascript">
var flag = true;
function expandDT(){
//获取dt标签
var dtTag = document.getElementsByTagName("dl")[0];
if(flag){
dtTag.style.overflow = "visible";
flag = false;
}else{
dtTag.style.overflow = "hidden";
flag = true;
}
}
function openClose(node){
//var dtTag = document.getElementsByTagName("dl")[0];
var nodeDl = node.parentNode;
if(nodeDl.className == "openDl"){
nodeDl.className = "closeDl";
}else{
nodeDl.className = "openDl";
}
}
</script>
</head>
<body>
<!-- 默认不显示列表里的条目overflow，一点击则显示 -->
<dl class="closeDl">
<dt onclick="openClose(this)">展开闭合条目一</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
<dl class="closeDl">
<dt onclick="openClose(this)">展开闭合条目二</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
<dl class="closeDl">
<dt onclick="openClose(this)">展开闭合条目三</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
</body>
</html>
结果：
24.示例——展开闭合列表3
在多个列表下，一次只展开一个列表，当打开其中一个时，其他的列表闭合
怎么保证只展开一个？
思路：获取所有dl节点getElementsByTagName；遍历这些节点，只对当前的dl进行展开或者闭合操作(parentNode == 遍历到的节点)，其他节点都进行闭合操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展开闭合列表</title>
<style type="text/css">
div{
height:100px;
}
dl dd{
margin:0px;
}
dl{
height:20px;
}
/* dl{
height:15px;
overflow:hidden;
} */
.openDl{
overflow:visible;
}
.closeDl{
overflow:hidden;
}
</style>
<script type="text/javascript">
//只展开闭合当前节点的条目，其他的都闭合
function openClose1(node){
//var dtTag = document.getElementsByTagName("dl")[0];
var nodeDl = node.parentNode;
//通过node的length进行遍历当前所有dl节点
var collNodes = document.getElementsByTagName("dl");
for (var x = 0; x < collNodes.length; x++) {
//遍历到的节点为当前节点才进行展开或者闭合
if(collNodes[x] == nodeDl){
if(nodeDl.className == "openDl"){
nodeDl.className = "closeDl";
}else{
nodeDl.className = "openDl";
}
}else{
collNodes[x].className = "closeDl";
}
}
}
</script>
</head>
<body>
<!-- 默认不显示列表里的条目overflow，一点击则显示 -->
<div>
<dl class="closeDl">
<dt onclick="openClose1(this)">展开闭合条目一</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
</div>
<div>
<dl class="closeDl">
<dt onclick="openClose1(this)">展开闭合条目二</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
</div>
<div>
<dl class="closeDl">
<dt onclick="openClose1(this)">展开闭合条目三</dt>
<dd>展开闭合条目1</dd>
<dd>展开闭合条目2</dd>
<dd>展开闭合条目3</dd>
<dd>展开闭合条目4</dd>
</dl>
</div>
</body>
</html>
结果：
25.示例——好友菜单
FireForx和IE6的内核不一样，解析的效果也会不一样
需求：完成一个好友菜单，展开闭合效果
对表格中的ul进行样式定义：取出无序列表的样式；取消ul的内外边距
对表格及单元格的框线进行定义；
设置表格中的超链接样式；
要设置菜单栏和菜单项，a标签有效区域有限，ul标签也是有效的，所以可以对td单元格中的一部分进行封装：先在td里添加背景色，然后再分别设置ul和a标签的的背景色
设置预定义样式：事先隐藏ul内容（按高度隐藏）也可以使用display进行设置
inline行内自动填充，如果一行显示不下另起一行；block另起一行单独作为区块显示。
怎么获取a标签自己对应的ul标签：使用当前a标签的parentNode,然后再通过其拿到ul，要求一次展开一个ul其他的闭合。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>好友菜单</title>
<style type="text/css">
/* 取消li标签的图标list-style */
table td li{
list-style: none;
background-color: teal;
}
table td ul{
margin:0px;
padding:0px;
}
table td a:link,table td a:VISITED {
color:blue;
text-decoration: none;/* 取消a标签下划线 */
}
table td a:hover {
color:red;
}
/* 预定义样式，设置展开和闭合的样式display */
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list(node){
//获取当前节点
var parNode = node.parentNode;//获取到的是td
var curULNodes = parNode.getElementsByTagName("ul")[0];/* 获取当前的ul节点 */
//获取所有的ul节点
var tabNode = document.getElementById("menulist");
var ulsNodes = tabNode.getElementsByTagName("ul");
for (var x = 0; x < ulsNodes.length; x++) {
if(ulsNodes[x] == curULNodes){
if(curULNodes.className == "open"){
curULNodes.className = "close";
}else{
curULNodes.className = "open";
}
}else{
ulsNodes[x].className = "close";
}
}
}
</script>
</head>
<body>
<table id="menulist">
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单一</a>
<ul class="close">
<li>张一
<li>张二
<li>张三
<li>张四
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单二</a>
<ul class="close">
<li>李一
<li>李二
<li>李三
<li>李四
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单三</a>
<ul class="close">
<li>王一
<li>王二
<li>王三
<li>王四
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单四</a>
<ul class="close">
<li>赵一
<li>赵二
<li>赵三
<li>赵四
</ul>
</td>
</tr>
</table>
</body>
</html>
结果：
26.示例——创建表格
在页面中创建一个表格，由用户决定创建几行几列的表格
有事件源，比如按钮；必须有一个存储生成的标个节点的位置
思路：可以通过createElement创建元素的形式来实现
1，创建表格节点；2，创建tbody节点；3，创建行节点tr；4，创建单元格节点td；5，让这些节点有关系，指定层次的几点添加append()，appendChild逐级添加；6，获取div节点，并将创建好的表格放进去
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建表格一</title>
<style type="text/css">
table td{
border:maroon 1px solid;
width:200px;
}
</style>
<script type="text/javascript">
function createTab(){
//1，创建表格节点；
var tabNode = document.createElement("table");
//2，创建tbody节点；
var tbodyNode = document.createElement("tbody");
//3，创建行节点tr；
var trNode = document.createElement("tr");
//4，创建单元格节点td；
var tdNode = document.createElement("td");
tdNode.innerHTML = "这是一个单元格";
//5，让这些节点有关系，指定层次的几点添加append()，appendChild逐级添加；
trNode.appendChild(tdNode);
tbodyNode.appendChild(trNode);
tabNode.appendChild(tbodyNode);
//6，获取div节点，并将创建好的表格放进去
document.getElementById("tab").appendChild(tabNode);
}
</script>
</head>
<body>
<input type="button" value="创建表格" onclick="createTab()"/>
<hr>
<div id="tab"></div>
</body>
</html>
结果：
27.示例——创建表格——使用表格对象
无论td tr tbody都是表格里面的东西，所以只要有表格对象即可
insertRow(index)创建行，并将行加入到rows集合中，相当于createElement和appendChild两个方法。index默认-1表示将行插入到行集合的结尾处，其他值表示在指定位置插入行。
行是有单元格组成，于是可以使用行对象tr对象，insertCell()
function createTab2(){
//1，创建表格节点；
var tabNode = document.createElement("table");
//2，通过insertRow创建行
var trNode = tabNode.insertRow();
//3,通过insertCell创建列
var tdNode = trNode.insertCell();
tdNode.innerHTML = "这是一个单元格";
//4，将表格节点添加到div中
document.getElementById("tab").appendChild(tabNode);
}
结果：
function createTab3(){
//1，创建表格节点；
var tabNode = document.createElement("table");
for (var x = 0; x <= 4; x++) {
//2，通过insertRow创建行
var trNode = tabNode.insertRow();
for (var y = 0; y <= 5; y++) {
//3,通过insertCell创建列
var tdNode = trNode.insertCell();
tdNode.innerHTML = (x+1)+"行-"+(y+1)+"列";
}
}
//4，将表格节点添加到div中
document.getElementById("tab").appendChild(tabNode);
document.getElementsByName("tab3")[0].disabled = true;
}
结果：
创建一次表格后，不能再继续创建：button组件中的disabled属性，设置或获取控件的状态，只有true和false。可以在创建表格一次后将该button属性设置为true即可
28.示例——创建表格——指定行列
在页面有输入框供用户输入指定的行列：
function createTab4(){
//1，创建表格节点；
var tabNode = document.createElement("table");
//获取用户输入的行和列
var rowval = document.getElementsByName("rownum")[0].value;
var cellval = document.getElementsByName("collnum")[0].value;
for (var x = 0; x < rowval; x++) {
//2，通过insertRow创建行
var trNode = tabNode.insertRow();
for (var y = 0; y < cellval; y++) {
//3,通过insertCell创建列
var tdNode = trNode.insertCell();
tdNode.innerHTML = (x+1)+"行-"+(y+1)+"列";
}
}
//4，将表格节点添加到div中
document.getElementById("tab").appendChild(tabNode);
document.getElementsByName("tab4")[0].disabled = true;
}
行：<input type="text" name="rownum"/>
列：<input type="text" name="collnum"/>
<br/>
<input type="button" value="创建表格1" onclick="createTab()"/>
<input type="button" value="创建表格2" onclick="createTab2()"/>
<input type="button" name="tab3" value="创建表格3(5行6列)" onclick="createTab3()"/>
<input type="button" name="tab4" value="创建表格4" onclick="createTab4()"/>
<hr>
<div id="tab"></div>
29.示例——删除表格的行和列
deleteRow(rowindex):rowindex表示行号（0开始）
需要判断表格是否存在，所以创建表格是要创建表格的id或者name
动态设置表格id方法：直接调用属性完成,tabNode.id = “tabId”;tabNode.setAttribute(“id”,” tabId”);
function delRow(){
//判断表格是否存在
var tabNode = document.getElementById("tabId");
if(tabNode){
//获取要删除的行数
var rownum = document.getElementsByName("deleteRow")[0].value;
tabNode.deleteRow(rownum-1);
}else{
alert("表格不存在");
return;
}
}
行：<input type="text" name="rownum"/>
列：<input type="text" name="collnum"/>
删除的行：<input type="text" name="deleteRow"/>
<br/>
<input type="button" value="创建表格1" onclick="createTab()"/>
<input type="button" value="创建表格2" onclick="createTab2()"/>
<input type="button" name="tab3" value="创建表格3(5行6列)" onclick="createTab3()"/>
<input type="button" name="tab4" value="创建表格4" onclick="createTab4()"/>
<input type="button" value="删除行" onclick="delRow()"/>
<hr>
<div id="tab"></div>
删除列：其实就是删除同一行中的同一位置的单元格
function delColl(){
//判断表格是否存在
var tabNode = document.getElementById("tabId");
if(tabNode){
//要先获取某行，再删除其列
var collnum = document.getElementsByName("deleteColl")[0].value;
//表格中行集合中的列集合的长度要保证存在
if(collnum >=1 && collnum<=tabNode.rows[0].cells.length){
for (var x = 0; x < tabNode.rows.length; x++) {
//获取要删除的行数
tabNode.rows[x].deleteCell(collnum-1);
}
}else{
alert("要删除的列不存在");
return;
}
}else{
alert("表格不存在");
return;
}
}
<body>
行：<input type="text" name="rownum"/>
列：<input type="text" name="collnum"/><br/>
删除的行：<input type="text" name="deleteRow"/><br/>
删除的列：<input type="text" name="deleteColl"/>
<br/>
<input type="button" value="创建表格1" onclick="createTab()"/>
<input type="button" value="创建表格2" onclick="createTab2()"/>
<input type="button" name="tab3" value="创建表格3(5行6列)" onclick="createTab3()"/>
<input type="button" name="tab4" value="创建表格4" onclick="createTab4()"/>
<input type="button" value="删除行" onclick="delRow()"/>
<input type="button" value="删除列" onclick="delColl()"/>
<hr>
<div id="tab"></div>
</body>
30.示例——行颜色间隔显示并高亮
预定义样式
思路：因为要操作行的样式，所以要先获取表格对象；获取所有被操作的行对象（表格对象.rows）；遍历(从第二行开始遍历)行并给每一行指定样式。
问题：JS写在DOM上面，会导致获取表格对象时还没有加载到DOM对象，而读取不到表格对象，因此，可以使用onload方法
高亮光标所在行：事件，onmouseover光标在此之上 onmouseout光标移走后。在光标高亮之前把颜色记录下来，在光标移走后，再还原颜色。
想让所有行都能适用的onmouseover和onmouseout，所以在遍历行时，就给行设置此两个事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行颜色间隔显示并高亮</title>
<style type="text/css">
table{
width:400px;
border:maroon 1px solid;
border-collapse: collapse;
}
table th{
border:maroon 1px solid;
background-color: gray;
}
table td{
border:maroon 1px solid;
}
/* 预定义奇偶行的样式 */
/* 奇数 */
.odd{
background-color: teal;
}
/* 偶数 */
.even{
background-color: olive;
}
/* 鼠标悬停样式 */
.over{
background-color: red;
}
</style>
<script type="text/javascript">
//记录原始颜色
var oldColor;
function trColor(node){
//1 因为要操作行的样式，所以要先获取表格对象；
var tabNode = document.getElementById("tab");
//2 获取所有被操作的行对象（表格对象.rows）；
var trNodes = tabNode.rows;
//3 遍历(从第二行开始遍历)行并给每一行指定样式。
for (var x = 1; x < trNodes.length; x++) {
//奇数行一种颜色
if(x%2==1){
trNodes[x].className = "odd";
//偶数行另一种颜色
}else{
trNodes[x].className = "even";
}
trNodes[x].onmouseover = function(){
name = this.className;
this.className = "over";
}
trNodes[x].onmouseout = function(){
this.className = name;
}
}
}
//JS写在DOM上面，会导致获取表格对象时还没有加载到DOM对象，而读取不到表格对象，因此，可以使用onload方法
onload = function(){
trColor();
}
</script>
</head>
<body>
<table id="tab">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>湖北</td>
</tr>
<tr>
<td>李四</td>
<td>27</td>
<td>湖南</td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
<td>广东</td>
</tr>
<tr>
<td>赵六</td>
<td>26</td>
<td>福建</td>
</tr>
<tr>
<td>孙琦</td>
<td>26</td>
<td>安徽</td>
</tr>
</table>
</body>
</html>
结果：
31.示例——表格排序
需求：对年龄进行排序。年龄可点击：按钮或者a标签。
思路：1，排序就需要数组，获取需要参与排序的行对象数组；2，对行数组中的每一行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换；3，将排好序的数组重新添加回表格。
需要定义一个临时容器，临时容器存储的是数据的地址，用于存储需要排序的航对象
获取每个单元格的值：容器[x].cells[1].innerHTML
换位置：换位置的是行，而不是列
排完序后重新添加回表格，临时容器[x].parentNode.appendChild(临时容器[x]);
可以多次切换：使用flag记录切换标记，每次切换后，将其更改
临时容器存储的是数据的地址，排完序后，再将其地址添加到对应的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格排序</title>
<style type="text/css">
table{
width:400px;
border:maroon 1px solid;
border-collapse: collapse;
}
table th{
border:maroon 1px solid;
background-color: gray;
}
table td{
border:maroon 1px solid;
}
a{
text-decoration: none;
}
a:hover{
color:yellow;
}
a:link a:VISITED {
color:blue;
}
</style>
<script type="text/javascript">
//使用标记记录每次排序的标识，实现升序降序切换
var flag = true;
function sortAge(){
//1需要定义一个临时容器，临时容器存储的是数据的地址，用于存储需要排序的航对象
var ageArr = [];
var tabNode = document.getElementById("tab");
//2获取每个单元格的值：容器[x].cells[1].innerHTML
var trNodes = tabNode.getElementsByTagName("tr");
for (var x = 1; x < trNodes.length; x++) {
ageArr[x-1] = trNodes[x];
}
//对容器里的数值进行排序
//3换位置：换位置的是行，而不是列
mySort(ageArr);
//trNodes.parentNode.appendChild(ageArr);
//4排完序后重新添加回表格，临时容器[x].parentNode.appendChild(临时容器[x]);
if(flag){
for (var x = 0; x < ageArr.length; x++) {
alert(ageArr[x].cells[1].innerHTML);
//这里一定要使用临时容器的父节点
ageArr[x].parentNode.appendChild(ageArr[x]);
}
flag = false;
}else{
for (var x = ageArr.length-1; x >= 0; x--) {
alert(ageArr[x].cells[1].innerHTML);
//这里一定要使用临时容器的父节点
ageArr[x].parentNode.appendChild(ageArr[x]);
}
flag = true;
}
}
function mySort(ageArr){
for (var x = 0; x < ageArr.length-1; x++) {
for (var y = x+1; y < ageArr.length; y++) {
if(parseInt(ageArr[x].cells[1].innerHTML) > parseInt(ageArr[y].cells[1].innerHTML)){
var temp = ageArr[x];
ageArr[x] = ageArr[y];
ageArr[y] = temp;
}
}
}
}
</script>
</head>
<body>
<table id="tab">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sortAge()">年龄</a></th>
<th>籍贯</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>湖北</td>
</tr>
<tr>
<td>李四</td>
<td>27</td>
<td>湖南</td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
<td>广东</td>
</tr>
<tr>
<td>赵六</td>
<td>28</td>
<td>福建</td>
</tr>
<tr>
<td>孙琦</td>
<td>26</td>
<td>安徽</td>
</tr>
</table>
</body>
</html>
结果：
32.示例——全选商品列表
思路：获取所有的名称为item的复选框，判断checked的状态，为true的表示被选中，获取该节点的value进行累加。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品全选</title>
<script type="text/javascript">
function getSum(){
var sum = 0;
var itemsNode = document.getElementsByName("item");
for (var x = 0; x < itemsNode.length; x++) {
if(itemsNode[x].checked){
sum+= parseInt(itemsNode[x].value);
}
}
document.getElementById("sumId").innerHTML = sum;
}
function checkAll(node){
var itemsNode = document.getElementsByName("item");
for (var x = 0; x < itemsNode.length; x++) {
//全选的box的状态赋值为所有的itembox的状态
itemsNode[x].checked = node.checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="checklist" onclick="checkAll(this)"/>全选<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000<br/>
<input type="button" value="总金额是" onclick="getSum()"/><span id="sumId"></span>
</body>
</html>
结果：
33.示例——邮件列表
CSS样式设置、行颜色间隔显示：
步骤：1，获取表格对象；2，获取行对象表对象.rows；3，对所有需要设置背景的行对象进行遍历；
全选：把全选复选框的状态赋值给其他所有复选框的状态
全选按钮：全选按钮、反选按钮(原来复选框的真假赋值为假真即非)、全选复选框三个功能都是一样的，在一个方法实现。通过传值方式解决：可以字符串、数字(0,1,2)等区别都可以。
删除所选邮件：获取所有mail节点；删除某一行（每个节点间都存在所属关系，可以按照层次关系拿，复选框是当前节点，复选框节点的父级为td,而td的父级就是tr节点）；然后trNode.parentNode.removeChild(trNode);即可。
在进行删除操作时，每次删除点前一个角标位的数据时，后一个角标位的数据会前移，但循环x++时，再次循环到下一条数据时，就会有一条前移的数据无法删除，所以使用x--回到前一个角标位进行操作。
只要remove就会改变长度，行长度在减少，但是循环的x在递增。即remove后，数据角标前移，但是x却在递增；让x—即可（也可以不做x—也不做删除，而是使用行记住所有要删除的标记，然后再遍历临时容器进行删除）；删完后还是需要颜色间隔显示，再调用一次颜色间隔显示的方法。
删除前进行删除确认：if(confirm(“确认删除？”))
注意：复选框中所有的复选框都要名字相同
mail.css:
table{
width:500px;
border:red 1px solid;
border-collapse: collapse;
}
table th{
border:maroon 1px solid;
background-color: gray;
}
table td{
border:maroon 1px solid;
}
/* 预定义奇偶行的样式 */
/* 奇数 */
.odd{
background-color: teal;
}
/* 偶数 */
.even{
background-color: olive;
}
/* 鼠标悬停样式 */
.over{
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邮件附件</title>
<style type="text/css">
@IMPORT url("mail.css");
</style>
<script type="text/javascript">
var oldColor;
function trColor(){
//获取表格对象
var tabNode = document.getElementById("mail");
//通过表格对象获取所有行
var trNums = tabNode.rows;
//循环所有的行，将奇数行和偶数行分开设置不同颜色
for (var x = 1; x < trNums.length-1; x++) {
if(x%2==1){
trNums[x].className = "odd";
}else{
trNums[x].className = "even";
}
trNums[x].onmouseover = function(){
//在鼠标悬浮时记录之前的样式
oldColor = this.className;
this.className = "over";
}
trNums[x].onmouseout = function(){
this.className = oldColor;
}
}
}
onload = function(){
trColor();
}
//获取所有复选框的节点,使用当前节点的选中状态赋值给其他所有的复选框
function checkAll(node){
//获取所有复选框的节点
var checkboxNodes = document.getElementsByName("mails");
//循环所有的行，将奇数行和偶数行分开设置不同颜色
for (var x = 0; x < checkboxNodes.length; x++) {
checkboxNodes[x].checked = node.checked;
}
}
//使用标记区分：全选（1）、反选（-1）、取消全选（0）
//循环所有的复选节点，然后按条件操作
function checkMail(num){
//获取所有复选框的节点
var checkboxNodes = document.getElementsByName("mails");
//除了第一行和最后一行，循环所有的行，将奇数行和偶数行分开设置不同颜色
for (var x = 1; x < checkboxNodes.length-1; x++) {
if(num>0){
checkboxNodes[x].checked = true;
}else if(num<0){
checkboxNodes[x].checked = !checkboxNodes[x].checked;
}else{
checkboxNodes[x].checked = false;
}
}
}
function delMail(){
var checkboxNodes = document.getElementsByName("mails");
//除了第一行和最后一行，循环所有的行，将奇数行和偶数行分开设置不同颜色
for (var x = 1; x < checkboxNodes.length-1; x++) {
if(checkboxNodes[x].checked){
var trNode = checkboxNodes[x].parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
//在进行删除操作时，每次删除点前一个角标位的数据时，后一个角标位的数据会前移，但循环x++时，再次循环到下一条数据时，就会有一条前移的数据无法删除，所以使用x--回到前一个角标位进行操作
x--;
}
}
trColor();
}
</script>
</head>
<body>
<table id="mail">
<tr>
<th><input type="checkbox" onclick="checkAll(this)" name="mails"/>全选</th>
<th>发件人</th>
<th>邮件名称</th>
<th>附件</th>
</tr>
<tr>
<td><input type="checkbox" name="mails"/></td>
<td>张三1</td>
<td>邮件名称1</td>
<td>附件1</td>
</tr>
<tr>
<td><input type="checkbox" name="mails"/></td>
<td>张三2</td>
<td>邮件名称2</td>
<td>附件2</td>
</tr>
<tr>
<td><input type="checkbox" name="mails"/></td>
<td>张三3</td>
<td>邮件名称3</td>
<td>附件3</td>
</tr>
<tr>
<td><input type="checkbox" name="mails"/></td>
<td>张三4</td>
<td>邮件名称4</td>
<td>附件4</td>
</tr>
<tr>
<td><input type="checkbox" name="mails"/></td>
<td>张三5</td>
<td>邮件名称5</td>
<td>附件5</td>
</tr>
<tr>
<td><input type="checkbox" name="mails"/></td>
<td>张三6</td>
<td>邮件名称6</td>
<td>附件6</td>
</tr>
<tr>
<td><input type="checkbox" onclick="checkAll(this)" name="mails"/>全选</td>
<td colspan="3" align="center">
<input type="button" value="全选" onclick="checkMail(1)"/>
<input type="button" value="取消全选" onclick="checkMail(0)"/>
<input type="button" value="反选" onclick="checkMail(-1)"/>
<input type="button" value="删除所选行" onclick="delMail()"/>
</td>
</tr>
</table>
</body>
</html>
结果：
34.示例——调查问卷
单选按钮演示：1，是否参与问卷调查？2，性格测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调查问卷</title>
<style type="text/css">
#content{
display:none;
}
</style>
<script type="text/javascript">
function checkRadio(node){
var radioNode = node.value;
var contentNode = document.getElementById("content");
if(radioNode == "yes"){
contentNode.style.display = "block";
}else{
contentNode.style.display = "none";
}
}
</script>
</head>
<body>
请问您是否接受以下问卷调查：
<input type="radio" name="ask" value="yes" onclick="checkRadio(this)"/>是
<input type="radio" name="ask" value="no" checked="checked" onclick="checkRadio(this)"/>否
<div id="content">
调查问卷内容：<br/>
您的姓名：<input type="text"/><br/>
您的年龄：<input type="text"/>
</div>
</body>
</html>
结果：
35.示例——性格测试
步骤：1，判断radio中是否有答案被选中：获取所有的radio，并遍历判断checked的状态，用flag记录是否被选中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>性格测试</title>
<style type="text/css">
#ullist{
list-style: none;
margin:8px;
padding:4px;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function getResult(){
var val;
var flag = false;
//获取所有单选按钮
var radioNode = document.getElementsByName("fruit");
for (var x = 0; x < radioNode.length; x++) {
//遍历判断checked的状态
if(radioNode[x].checked){
val = radioNode[x].value;
flag = true;
break;
}
}
//用flag记录是否被选中,如果被选中记录分数并显示相应div,没有被选中则提示未选中单选按钮
if(flag){
//判断值的范围
if(val<=3){
document.getElementById("less").style.display = "block";
document.getElementById("more").style.display = "none";
}else{
document.getElementById("less").style.display = "none";
document.getElementById("more").style.display = "block";
}
}else{
document.write("请选择一种水果")
}
}
</script>
</head>
<body>
<h2>欢迎您参与性格测试：</h2>
<div>
<h3>第一题：</h3>
您喜欢的水果是什么？
<ul id="ullist">
<li><input type="radio" name="fruit" value="1"/>苹果
<li><input type="radio" name="fruit" value="2"/>葡萄
<li><input type="radio" name="fruit" value="3"/>芒果
<li><input type="radio" name="fruit" value="4"/>樱桃
<li><input type="radio" name="fruit" value="5"/>橘子
</ul>
</div>
<input type="button" value="查看测试结果" onclick="getResult()"/>
<div id="less" class="close">1-3分：你的性格内向并扭曲，建议咨询心理医生</div>
<div id="more" class="close">4-6分：你的性格外向活泼，交往正常</div>
</body>
</html>
结果：
36.示例——下拉菜单——选择颜色
想拿到被选中的option时利用select对象拿到所有的options
获取所有的options;循环遍历所有的options；通过selectedIndex设置或获取选中选项的索引或位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单——选择颜色</title>
<style type="text/css">
#div1{
width:100px;
height:100px;
position:relative;
float:left;
}
#div2{
width:100px;
height:100px;
position:relative;
float:left;
}
#div3{
width:100px;
height:100px;
position:relative;
float:left;
}
#text{
padding:10px;
width:300px;
position:relative;
clear:left;
}
</style>
<script type="text/javascript">
function changeColor(node){
//注意通过node.style.backgroundColor获取属性值时，必须是在DOM节点中，相应标签里有style属性，如果是写在css中的样式属性时获取不了的
var divColor = node.style.backgroundColor;
document.getElementById("text").style.color = divColor;
}
function changeSelColor(val){
document.getElementById("text").style.color = val;
}
</script>
</head>
<body>
<div id="div1" style="background-color: red;" onclick="changeColor(this)"></div>
<div id="div2" style="background-color: green;" onclick="changeColor(this)"></div>
<div id="div3" style="background-color: blue;" onclick="changeColor(this)"></div>
<div id="text">
颜色检测区域，选择什么颜色的div，则文字变成什么颜色
</div>
<hr>
<select id="colorSel" onchange="changeSelColor(this.value)">
<option>请选择颜色</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>
结果：可以通过点击div区域或者下拉框调整字体的颜色
37.示例——下拉菜单——级联选择省市
方式一：使用二维数组的形式存储各个城市
方式二：通过option中的value值去对应设置json格式数据
步骤：
1，获取两个下拉菜单对象；2，获取到底选择的哪个省；3，通过角标到容器去获取对应城市数组；4，遍历这个数组，并将这个数组的元素封装成option对象createElement(“option”)创建optionDOM节点，添加到子菜单中
subNode.appendChild(optNode)；5，每次添加前，要将子菜单中的内容清空：遍历子菜单然后再removeChild(),删除时角标在递增，数据在往后，始终有数据没被删完，可以x++不使用，也可以在循环里写X--；清除第二种方法：直接让子菜单的length为0subSelNode.length=0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>级联选择城市</title>
<style type="text/css">
select{
width:100px;
}
</style>
<script type="text/javascript">
function changeProvice(){
//声明省份和城市的关系
var provinceArr = [['请选择城市'],['深圳','韶关','清远','佛山'],['武汉','恩施','宜昌','襄樊'],['万州','石柱','黔江','沙市'],['温州','绍兴','丽水','义乌']];
//1，获取两个下拉菜单对象；
var provinceSelNode = document.getElementById("province");
var citySelNode = document.getElementById("city");
//2，获取到底选择的哪个省；
var provinceIndex = provinceSelNode.selectedIndex;
//3，通过角标到容器去获取对应城市数组；
var citiesArr = provinceArr[provinceIndex];
//4，每次添加前，要将子菜单中的内容清空：遍历子菜单然后再removeChild(),删除时角标在递增，数据在往后，始终有数据没被删完，可以x++不使用，也可以在循环里写X--；清除第二种方法：直接让子菜单的length为0subSelNode.length=0
citySelNode.length = 0;
//5，遍历这个数组，并将这个数组的元素封装成option对象createElement(“option”)创建option DOM节点，添加到子菜单中subNode.appendChild(optNode)；
for (var x = 0; x < citiesArr.length; x++) {
var optionNode = document.createElement("option");
optionNode.innerHTML = citiesArr[x];
citySelNode.appendChild(optionNode);
}
}
</script>
</head>
<body>
<select id="province" onchange="changeProvice()">
<option>请选择省份</option>
<option>广东</option>
<option>湖北</option>
<option>重庆</option>
<option>浙江</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
</body>
</html>
结果：
38.示例——添加删除附件
需求：动态添加或删除某些附件。
添加附件时：因为文件选取框定义在行对象中，所以只要给表格创建新的行和单元格即可insertRow() insertCell()。
删除：删除当前所在的行即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加或删除附件</title>
<style type="text/css">
a:link,a:visited{
color:blue;
text-decoration: none;
}
a:hover{
color:purple;
text-decoration: none;
}
</style>
<script type="text/javascript">
function addFile(){
var tabNode = document.getElementById("tabId");
//table里添加tr，tr里添加td
var trNode = tabNode.insertRow();
var tdNode_text = trNode.insertCell();
var tdNode_del = trNode.insertCell();
tdNode_text.innerHTML = "<input type='file'/>";
tdNode_del.innerHTML = "<a href='javascript:void(0)' οnclick='delFile(this)'>删除附件</a>";
}
function delFile(node){
//获取父级节点，在通过父级节点删除本节点
var trNode = node.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
</script>
</head>
<body>
<table id="tabId">
<tr>
<td><a href="javascript:void(0)" onclick="addFile()">添加附件</a></td>
</tr>
</table>
</body>
</html>
结果：
39.示例——表单校验——涉及的时间和信息提示方式
用户输入信息后，在发送到服务端之前进行校验，校验非法则不发送数据到服务端
光标焦点失去时：onblur
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script type="text/javascript">
function checkUser(){
var username = document.getElementById("username");
var userspan = document.getElementById("userspan");
if(username.value == "lisi"){
userspan.innerHTML = "用户名正确".fontcolor("green");
}else{
userspan.innerHTML = "用户名错误".fontcolor("red");
}
}
</script>
</head>
<body>
<form>
用户名：<input type="text" id="username" onblur="checkUser()"/><span id="userspan"></span><br/>
密码：<input type="password"/>
</form>
</body>
</html>
结果：
40.示例——表单校验——涉及的正则校验
正确信息和错误信息以及要求先写好，然后根据校验的结果来显示不同信息
正则基本和java正则差不多
需求：name四个字母，并且忽略大小写
re = new RegExp(“pattern”,”flag”);pattern为正则表达式，flag为标记全文查找出现的所有pattern，i忽略大小写，m多行查找
JS中的match方法不是返回真假值，而是将查到的匹配的结果放到数组中并返回
JS中test方法返回布尔值，找出被查找的字符串中是是否存在某值。
正则中如果使用”/正则内容/”,则\等特殊符号不需要转义了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script type="text/javascript">
function checkUser2(){
var username = document.getElementById("username");
var userspan = document.getElementById("userspan");
var regex = new RegExp("^[a-z]{4}$","i");//^开始标志$结束标志，i表示忽略大小写
if(regex.test(username.value)){
userspan.innerHTML = "用户名正确".fontcolor("green");
}else{
userspan.innerHTML = "用户名错误".fontcolor("red");
}
}
</script>
</head>
<body>
<form>
用户名：<input type="text" id="username" onblur="checkUser2()"/><span id="userspan"></span><br/>
密码：<input type="password"/>
</form>
</body>
</html>
结果：
41.示例——表单校验——表单提交的两种方式
用户名正确才提交，非法则不提交。要根据数据是否合法再决定提交按钮。
对于submit按钮，会默认将form表单中的数据打成包进行提交。因此需要在form里加上方式一：onsubmit事件，重写表单默认的提交事件处理。
onsubmit="return checkForm()"在onsubmit事件里面要对checkForm方法进行布尔值的返回，如果为真才会真正提交。
方式二：自定义提交按钮或者其他组件，然后再方法中直接调用submit()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script type="text/javascript">
function checkUser2(){
var flag = false;
var username = document.getElementById("username");
var userspan = document.getElementById("userspan");
var regex = new RegExp("^[a-z]{4}$","i");//^开始标志$结束标志，i表示忽略大小写
if(regex.test(username.value)){
userspan.innerHTML = "用户名正确".fontcolor("green");
flag = true;
}else{
userspan.innerHTML = "用户名错误".fontcolor("red");
flag = false;
}
return flag;
}
function checkForm(){
if(checkUser2()){
return true;
}else{
return false;
}
}
function mysubmit(){
var userForm = document.getElementById("userForm");
userForm.submit();
}
</script>
</head>
<body>
<form id="userForm" onsubmit="return checkForm()">
用户名：<input type="text" id="username" onblur="checkUser2()"/><span id="userspan"></span><br/>
密码：<input type="password"/><br/>
<input type="submit" value="提交"/>
</form>
<input type="button" value="自定义提交" onclick="mysubmit()"/>
</body>
</html>
结果：
42.示例——表单校验——涉及的正则校验
更多的校验。如果有很多表单元素，要拿到很多的表单的值，要写正则等，且获取方法基本一致，所以就进行了方法截取。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script type="text/javascript">
function checkForm(id,regex,spanId,okInfo,errInfo){
var flag = false;
var val = document.getElementById(id).value;
var userspan = document.getElementById(spanId);
if(regex.test(val)){
userspan.innerHTML = okInfo.fontcolor("green");
flag = true;
}else{
userspan.innerHTML = errInfo.fontcolor("red");
flag = false;
}
return flag;
}
function checkUser(){
var regex = /^[a-z]{4}$/;
return checkForm("username",regex,"userspan","用户名正确","用户名错误");
}
function checkPwd(){
var regex = /^\d{6,8}$/;
return checkForm("pwd",regex,"pwdspan","密码正确","密码错误");
}
function checkRePwd(){
var pwd = document.getElementById("pwd").value;
var repwd = document.getElementById("repwd").value;
var repwdspan = document.getElementById("repwdspan");
if(pwd == repwd){
repwdspan.innerHTML = "密码一致".fontcolor("green");
return true;
}else{
repwdspan.innerHTML = "密码不一致".fontcolor("red");
return false;
}
}
function checkMail(){
var regex = /^\[email protected]\w+(\.\w+)+$/;
return checkForm("mail",regex,"mailspan","邮件正确","邮件错误");
}
function submitForm(){
if(checkUser()&&checkPwd()&&checkRePwd()&&checkMail()){
return true;
}else{
return false;
}
}
function mysubmit(){
var userForm = document.getElementById("userForm");
userForm.submit();
}
</script>
</head>
<body>
<form id="userForm" onsubmit="return submitForm()">
用户名：<input type="text" id="username" onblur="checkUser()"/><span id="userspan"></span><br/>
密码：<input type="password" id="pwd" onblur="checkPwd()"/><span id="pwdspan"></span><br/>
确认 密码：<input type="password" id="repwd" onblur="checkRePwd()"/><span id="repwdspan"></span><br/>
邮件：<input type="text" id="mail" onblur="checkMail()"/><span id="mailspan"></span><br/>
<input type="submit" value="提交"/>
</form>
<input type="button" value="自定义提交" onclick="mysubmit()"/>
</body>
</html>
结果：