dom

75 阅读 0 评论 50 点赞

我是靠谱客的博主鳗鱼芒果，最近开发中收集的这篇文章主要介绍dom，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、知识回顾
* BOM 概述
* BOM 的各个对象
      * window对象
          innerHeight，innerWidth
    document.body.clientWidth,document.body.clientHeight,
    self
    opener :超链和window.open()
    parent : iframe和frame
    frames[]:

          三种对话框： alert(),prompt(),confirm()
    定时器： setTimeout(),setInterval()

    模态窗口： showModalDialog() ,showModelessDialog()

  * History对象
    forward() ,back(),go()
  * Location对象.

二、内容
* 事件（掌握，明白每个事件发生的时机）
  鼠标移动事件
  * onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
  * onmouseover : 鼠标悬停事件
   鼠标悬停事件：当鼠标移动到某个控件上面的时候发生
    this: 把this写在那个标签里面就代表那个标签对象
    this.style.backgroundColor : 当调用样式表中的属性的时候，如果属性中间有横杠，则应去掉.

    示例：当鼠标移动到p标签上的时候，p标签改变样式 (参见demo01_鼠标悬停事件.html)
  * onmouseout : 鼠标移出事件
   鼠标移开事件：当鼠标从控件上移开的时候
   示例参见(demo_02_鼠标移开事件.html ;

    * 鼠标点击事件
  onclick : 当鼠标单击某个控件时发生
   示例：当单击按钮时，在<p>中显示字符串 "冠希哥来了" 参见(demo03_鼠标单击事件.html)

* 加载与卸载事件
  onload ,onunload
   加载事件(onload) : 在整个页面的元素加载完毕之后发生
   卸载事件(onunload) : 是在页面关闭时发生
     注意： onload和onunload事件必须写在body或者图片标签里面
     示例参见（demo04_加载卸载事件.html）

* 聚焦与离焦事件
  onfocus, onblur
   聚焦事件：是在控件获得焦点的时候发生
   离焦事件：是在控件失去焦点的时候发生

   示例：文本框获得焦点的时候改变样式，失去焦点时变回原样(参见demo05_聚焦离焦事件.html)

* 键盘事件
  onkeypress,onkeyup,onkeydown
   onkeypress: 按下键盘按键并松开
   onkeydown : 按下按键发生
   onkeyup: 松开按键

   示例参见（demo06_键盘事件.html`）

* 提交与重置事件
  onsubmit,onreset
  提交事件：是在点击提交按钮后发生。(必须写在form表单中)
  重置事件：是在点重置交按钮后发生。

示例：提交表单中的数据(检查):如果是陈冠希：通过，否则不能提交数据（参见demo07_提交重置事件.html）

* 选择与改变事件
     onselect:
  onchange:

  onselect: 只能用于输入框. 当选择输入框中的文本时发生
  onchange: 用于select和文本框.
     对于下拉框是在选项发生变化的时候发生
     对于文本框是在文本框的内容发生变化并且失去焦点时发生

   示例：当选择文本框的内容时，弹出文本框的内容
   下拉框的selectedIndex属性：代表选中某项的索引
   参见(demo08_选择与改变事件.html)

DOM技术
1.Dom概述？
* 什么是DOM？ docuemnt object model 文档对象模型
* 它的作用？重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目

其实就是将一些表机型的文档以及文档中的内容当成对象；
为什么要将这些文档以及其中的标签封装成对象呢：
因为可以在对象中定义其属性和行为，可以方便操作这些对象。

dom三层模型：
dom1：将html文档封装成对象
dom2：将xml文档封装成对象。
dom3：将xml文档封装成对象

dhtml:是多个技术的综合体，叫做动态的html；
html：负责将数据进行标签的封装；
css：负责标签的样式
dom：负责将标签以及标签中的数据封装成对象
JavaScript：负责通过程序设计方式来操作这些对象；将三个进行融合，通过程序设计方式来完成动态效果的操作；
标签之间存在着层次关系：

xmlhttpresquest---AJAX

当标记型文档加载进内存，那么内存中有了一个对应的dom树；

dom对已标记型文档的解析有一个弊端，就是文档多大，相对消耗资源；
对于大型文档可以使用sax这种解析方式；

节点类型：
标记型节点：类型：1
文档型节点：类型：3

注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意.

节点的关系：
父节点：
子节点
上一个兄弟节点：
下一个兄弟节点
----------------------------------
获取可以通过节点的层次关系完成；；
；
也可以通过document对象完成

getElementById:通过id属性值获取对应的节点对象，如果有多一个id值相同，获取到的是第一个id所属的对象；
尽量保证id唯一性，返回的是一个对象；
getElemnetsByName:通过标签的name属性值获取对象，返回的是一堆对象，其实就是一个对象数组；

getElementsByTagName: 即没有id也没有name时，可以通过标签名来获取节点对象，返回的是一堆对象，其实就是一个对象数组；
大多的容器型标签都具备该方法；

图解：

2.DOM树
* 结点 :   文档中的每个成分都是一个节点.(包括文本也是节点)
*.结点的属性
  a. nodeName（节点名称）
   元素节点的 nodeName 是标签名称
   属性节点的 nodeName 是属性名称
   文本节点的 nodeName 永远是 #text
   文档节点的 nodeName 永远是 #document

  b. nodeValue（节点值）
      对于文本节点，nodeValue 属性包含文本。
   对于属性节点，nodeValue 属性包含属性值。
   nodeValue 属性对于文档节点和元素节点是不可用的。

  c. nodeType（节点类型） : nodeType 属性可返回节点的类型。
   标签节点的类型值是 1
   属性节点的类型值是 2
   文本节点的类型值是 3

*. 结点的分类
   整个文档是一个文档节点
   每个 XML 标签是一个元素节点
   包含在 XML 元素中的文本是文本节点
   每一个 XML 属性是一个属性节点
   注释属于注释节点

*.结点的关系
   只有父子和兄弟关系
   parentNode : 父节点
   childNodes ：所有的子标签
   firstChild ：第一个儿子
   lastChild 　：最后一个儿子
   nextSibling ：下一个兄弟节点
   previousSibling ：　上一个兄弟节点

*. 对结点进行CRUD操作
  *.查找结点？
   两种方式： a. 采用节点之间的关系去拿根节点： document.documentElement ;
        b. 采用方法去拿
        getElementById() : 根据标签的ID拿到此标签节点
        getElementsByTagName() : 根据标签的名字拿到此标签节点数组
        getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。



  *.删除结点？
   removeChild() : 采用父节点删除子节点
   参见示例（）

  *创建节点：
   document.createElement() : 创建一个标签节点
     参见 demo15_表格添加行.html
   docuemnt.createTextNode("内容") ：创建一个文本节点
     参见 demo14_添加节点.html
   节点的setAttribute() :添加属性节点
     参见 demo14_添加节点.html

  *.添加结点？
   appendChild() : 添加子节点
    参见 demo14_添加节点.html
    参见 demo15_表格添加行.html

  *.修改或替换结点？
   replaceNode(): 替换节点(适用于IE)
   replaceChild() : 替换子节点

    参见demo13_节点的替换.html

在javascript中想调用html代码：只能通过属性innerHTML
在javascript中想调用CSS代码：只能通过属性clasName可以调用样式表
.style.属性

举例：

1.添加表格

<span style="font-size:14px;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function addtr(){
//拿到三个文本框的内容
var name = document.getElementById("name").value ;
var email = document.getElementById("email").value ;
var age = document.getElementById("age").value ;
//省略了信息的检测
//创建一个行对象及4个单元格对象并赋值
var tr = document.createElement("tr") ;
var nameTd = document.createElement("td") ;
nameTd.innerHTML = name ;
var emailTd = document.createElement("td") ;
emailTd.innerHTML = email ;
var ageTd = document.createElement("td") ;
ageTd.innerHTML = age ;
var buttonTd = document.createElement("td") ;
buttonTd.innerHTML = "<button onclick = 'deltr(this)'>删除</button>" ;
//组合对象
tr.appendChild(nameTd) ;
tr.appendChild(emailTd) ;
tr.appendChild(ageTd) ;
tr.appendChild(buttonTd) ;
//将tr添加到表格中
var tables = document.getElementsByTagName("table") ;
tables[1].appendChild(tr);
}
function deltr(btn){
//曾爷爷干掉爷爷
btn.parentNode.parentNode.parentNode.removeChild(btn.parentNode.parentNode) ;
}
//-->
</script>
<body>
<table width = 600 height = 100 align = center>
<tr>
<td>姓名:</td>
<td><input type="text" name="" id = "name"></td>
<td>邮箱:</td>
<td><input type="text" name="" id = "email"></td>
<td>年龄</td>
<td><input type="text" name="" id = "age"></td>
</tr>
<tr>
<td align = "center" colspan = "6"> <input type="button" value="添加" οnclick="addtr()"></td>
</tr>
</table>
<br>
<br>
<br>
<br>
<hr>
<table width = "500" border =1 align = center>
<tr>
<td>姓名</td>
<td>邮箱</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
</span>

2.全选全不选：

<span style="font-size:14px;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function checkAll(flag){
//拿到所有爱好的多选框对象
var hobbys = document.getElementsByName("hobby") ;
//循环依次设定每一个爱好
for(var i = 0 ;i<hobbys.length; i++){
hobbys[i].checked = flag ;
}
}
function reverseCheck(){
//拿到所有爱好的多选框对象
var hobbys = document.getElementsByName("hobby") ;
//循环依次设定每一个爱好
for(var i = 0 ;i<hobbys.length; i++){
hobbys[i].checked = !hobbys[i].checked;
}
}
//-->
</script>
<body>
<h1>请选择你的爱好：</h1>
全选/全不选<input type="checkbox" name="hobbys" οnclick="checkAll(this.checked)" /><br/>
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="swim" />游泳
<input type="checkbox" name="hobby" value="singing"/>唱歌<br/>
<input type="button" value="全选" οnclick="checkAll(true)"/> <input type="button" value="全不选" οnclick="checkAll(false)"/>
<input type="button" value="反选" οnclick="reverseCheck()"/> </body>
</body>
</html>
</span>

3.下拉框选项的移动（单项）注意：数组的长度是随时可以改变的，当移动全部时，每次只移动数组首项即可；当移动自己任选的多项时，应该保持原来数组中元素的相对位置不发生变化；

<span style="font-size:14px;"><!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function removeLeft(){
//拿到左边select的所有的option对象数组
var leftops = document.getElementById("left").options ;
//拿到选中的下拉框选项的索引
var index = document.getElementById("left").selectedIndex ;
//判断是否选择了选项
if(index == -1){
alert("必须选择一项") ;
return ;
}
//将选中的选项移动到右边的下拉框中
//alert(leftops[index].text) ;
document.getElementById("right").appendChild(leftops[index]) ;
}
function removeLeftAll(){
//拿到左边select的所有的option对象数组
var leftops = document.getElementById("left").options ;
//循环依次移动
var n
= leftops.length ;</span>

<span style="font-size:14px;">
for(var i = 0 ;i< n ;i++){
document.getElementById("right").appendChild(leftops[0]) ;
}
}
//-->
</script>
<body>
<table align="center">
<tr>
<td>
<select size="10" id="left">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
</select>
</td>
<td>
<input type="button" value="--->" οnclick="removeLeft()"/><br/>
<input type="button" value="===>" οnclick="removeLeftAll()"/><br/>
<input type="button" value="<---" οnclick=""/><br/>
<input type="button" value="<===" οnclick=""/><br/>
</td>
<td>
<select size="10" id="right">
<option>选项9</option>
</select>
</td>
</tr>
</table>
</body>
</html>
</span>

4.下拉框选项的移动（多项）

<span style="font-size:14px;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function removeLeft(){
//拿到左边select的所有的option对象数组
var leftops = document.getElementById("left").options ;
//循环判断每一个下拉框选项是否选中
for(var i= 0 ;i < leftops.length ;i++){
if(leftops[i].selected){
//选中了此选中
//将选中的选项移动到右边的下拉框中
document.getElementById("right").appendChild(leftops[i]) ;
i--;
}
}
}
function removeLeftAll(){
//拿到左边select的所有的option对象数组
var leftops = document.getElementById("left").options ;
//循环依次移动
var n
= leftops.length ;
for(var i = 0 ;i< n ;i++){
document.getElementById("right").appendChild(leftops[0]) ;
}
}
//-->
</script>
<body>
<table align="center">
<tr>
<td>
<select size="10" id="left" multiple>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
</select>
</td>
<td>
<input type="button" value="--->" οnclick="removeLeft()"/><br/>
<input type="button" value="===>" οnclick="removeLeftAll()"/><br/>
<input type="button" value="<---" οnclick=""/><br/>
<input type="button" value="<===" οnclick=""/><br/>
</td>
<td>
<select size="10" id="right">
<option>选项9</option>
</select>
</td>
</tr>
</table>
</body>
</html>
</span>

5.表单控件的内容检查

<span style="font-size:14px;"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
table{
width: 700px;
border:1px solid #6699ff;
}
input{
width:200px;
}
.one{
background-image:url(images/error.jpg) ;
background-position:left;
background-repeat:no-repeat;
}
.two{
background-image:url(images/error.jpg) ;
background-position:right;
background-repeat:no-repeat;
}
</style>
</head>
<script type="text/javascript">
<!--
function checkInfo(form){
var flag = true ;
//判断姓名
var nameTxt = form.name ;
if(nameTxt.value == "" || nameTxt.value == null){
document.getElementById("sname").innerHTML = "<font color = red>   姓名必须填写</font>" ;
document.getElementById("sname").className = "one" ;
nameTxt.className = "two" ;
flag = false ;
}
//判断密码
var passTxt = form.pass ;
if(passTxt.value == "" || passTxt.value == null){
document.getElementById("spass").innerHTML = "<font color = red>   密码必须填写</font>" ;
document.getElementById("spass").className = "one" ;
passTxt.className = "two" ;
flag = false ;
}
//判断重复密码
var repassTxt = form.repass ;
if(repassTxt.value != passTxt.value){
document.getElementById("spass").innerHTML = "<font color = red>   两次密码输入不一致</font>" ;
document.getElementById("spass").className = "one" ;
repassTxt.className = "two" ;
flag = false ;
}
return flag ;
}
//-->
</script>
<body>
<center>
<form method = "post" action = "#" onsubmit = "return checkInfo(this)">
<table>
<tr>
<td align = "right" width = "20%">通行证用户名：</td>
<td align = "left" width
= "45%"><input type="text" name="name">@163.com</td>
<td
align = "left" width
= "35%"><span id = "sname"></span></td>
</tr>
<tr>
<td align
= "right" width = "20%">密码：</td>
<td align = "left" width
= "60%"><input type="password" name="pass"></td>
<td align = "left" width
= "30%"><span id = "spass"></span></td>
</tr>
<tr>
<td align
= "right" width = "25%">重复登陆密码：</td>
<td align = "left" width
= "50%"><input type="password" name="repass"></td>
<td align = "left" width
= "30%"></td>
</tr>
<tr>
<td colspan = "3" align = "center"><input type="submit" value = "提交"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
</span>

总结：

dom编程：
1.定义界面
通过html的标签将数据进行封装；
2.定义一些静态的样式；
通过css
3.需要动态的完成和用户的交互
a.明确事件源
b.明确事件将事件注册到事件源上。
c.通过javascript的函数对象进行处理；
d.在处理过程需要明确被处理的区域：

table标签的示例。
1.在页面上通过按钮创建一个表格
思路：
1.创建一个table节点，document.createElement("table");
2.通过table节点的insertRow()方法创建表格的行对象并添加到rows集合中；
3.通过行对象的inserCell（）方法创建单元格对象，并添加到cells集合中。
4.给单元格中添加数据。
a.创建一个节点如文本节点，document.createTextNode("文本内容");
通过单元格的appendChild方法将文本节点添加到单元格的尾部；

b.可以通过单元格的innerhtml方法，添加单元格的元素；
tdNode.innerHTML="<img src='1.jpg' alt='图片说明文字'>";
5.建立好表格节点，添加到dom树中，也就是页面的指定位置上；

提示：实现动态创建表格，并可以根据用户指定的行和列进行创建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>创建表格</title>
<!-- 定义一些样式,将来给表格用 -->
<style type="text/css">
table{
border:#0099FF 1px solid;
width:600px;
border-collapse:collapse;
}
table td{
border:#0099FF 1px solid;
padding:10px 20px 3px 1px;
}
</style>
<script type="text/javascript">
function createTable(){
//1.凭空创建出表格
var tab = document.createElement("table");
var tbody = document.createElement("tbody");
tab.appendChild(tbody);
var tr = document.createElement("tr");
tbody.appendChild(tr);
var td = document.createElement("td");
tr.appendChild(td);
//2.获取父节点div
var tabDiv = document.getElementById("tabDiv");
//3.挂在节点
tabDiv.appendChild(tab);
}
function createTable2(){
//1.凭空创建出表格
var tab = document.createElement("table");
var tbody = document.createElement("tbody");
tab.appendChild(tbody);
for(var i = 0;i<5;i++){
var tr = document.createElement("tr");
tbody.appendChild(tr);
for(j = 0;j<4;j++){
var td = document.createElement("td");
td.innerHTML = (i+1)+"行"+(j+1)+"列"
tr.appendChild(td);
}
}
//2.获取父节点div
var tabDiv = document.getElementById("tabDiv");
//3.挂在节点
tabDiv.appendChild(tab);
}
function createTable3(){
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
//1.凭空创建出表格
var tab = document.createElement("table");
var tbody = document.createElement("tbody");
tab.appendChild(tbody);
for(var i = 0;i<row;i++){
var tr = document.createElement("tr");
tbody.appendChild(tr);
for(j = 0;j<col;j++){
var td = document.createElement("td");
td.innerHTML = (i+1)+"行"+(j+1)+"列"
tr.appendChild(td);
}
}
//2.获取父节点div
var tabDiv = document.getElementById("tabDiv");
//3.挂在节点
tabDiv.appendChild(tab);
}
</script>
</head>
<body>
<div id="div_id">
</div>
<input type="button" value="创建表格" οnclick="createTable()" /><br />
<input type="button" value="创建表格(5行6列)" οnclick="createTable2()" /><br />
行数:<input type="text" name="row" id="row"/><br />
列数:<input type="text" name="col" id="col"/><br />
<input type="button" name="createButton" value="创建表格(行列用户输入)" οnclick="createTable3()" />
<div id="tabDiv">
</div>
</body>
</html>

----------------------------
2.如何删除表格中的行或者列
思路：
1.删除行：获取表格对象，通过表格对象中的deletrow方法，将指定的行索引传入deleterow方法中；
2.删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作；
获取所有的行对象，并进行遍历，通过行对象的deletecell方法将指定单元格删除；

略；

3.将表格中的数据进行排序
思路：
1.获取表格中的所有行对象。
2.定义临时存储，将需要进行排序的行对象存入数组中；
3.对数组进行排序，通过比较每一个行对象中指定单元格的数据，如果是整数需要通过parseInt转换；
4.将排序后的数组进行遍历，将每一个行对象重新添加会表格，通过tbody节点的appendchild方法；
5.其实排序就是每一个行对象的引用取出；

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=GBK">
<title>Untitled Document</title>
<styletype="text/css">
table{
border:#249bdb1pxsolid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb1pxsolid;
padding:10px;
}
table th{
border:#249bdb1pxsolid;
padding:10px;
background-color:rgb(200,200,200);
}
th a:link,th a:visited{
color:#279bda;
text-decoration:none;
}
</style>
<scripttype="text/javascript">
varflag = true;
functionsortTable(){
/*
* 思路：
* 1，排序就需要数组。获取需要参与排序的行对象数组。
* 2，对行数组中的每一个行的年龄单元格的数据进行比较，并完成行对象在数组中的位置*
置换。
* 3，将排好序的数组重新添加回表格。
*/
var TabNode = document.getElementById("info");
var collTrNodes = TabNode.rows;
//定义一个临时容器，存储需要排序行对象。
var trArr = [];
//遍历原行集合，并将需要排序的行对象存储到临时容器中。
for(var x=1; x<collTrNodes.length; x++){
trArr[x-1] = collTrNodes[x];
}
//对临时容器排个序。
mySort(trArr);
//将排完序的行对象添加会表格。
if(flag) {
for(var x = 0; x < trArr.length; x++) {
//oTabNode.childNodes[0].appendChild(trArr[x]);
//alert(trArr[x].cells[0].innerHTML);
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = false;
}else{
for(varx = trArr.length-1; x >=0; x--) {
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = true;
}
//alert("over");
}
function mySort(arr){
for(varx=0; x<arr.length-1; x++){
for(vary=x+1; y<arr.length; y++){
//按照年龄数值排序，并转成整数。
if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML)){
vartemp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
//arr[x].swapNode(arr[y]);
}
}
}
}
</script>
</head>
<body>
<table id="info">
<tr>
<th>姓名</th>
<th><ahref="javascript:void(0)"οnclick="sortTable()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>上海</td>
</tr>
<tr>
<td>小强</td>
<td>6</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>24</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>398
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
<tr>
<td>毕姥爷</td>
<td>18</td>
<td>沈阳</td>
</tr>
</table>
</body>
</html>

-----------------
4.表格的行颜色间隔显示，并在鼠标指定的行上高亮显示
思路：
1.获取所有的行对象，将需要间隔颜色显示的行对象进行动态的className属性的指定，那么前提是：先定义好类选择器；
2.为了完成高亮显示，需要用到两个事件，onmouseover（鼠标进入）onmouseout（鼠标移出）
3.为了方便可以在遍历行对象时，将每一个行对象都进行两个事件属性的指定，并通过匿名函数完成该事件的处理；
4.高亮的原理就是将鼠标进入时的指定颜色改变，改变前先记录鼠标移入时行对象的样式。这样鼠标离开时，可以将原样式还原；
5.该样式需要在页面加载完后直接显示，所以使用的window.onload事件完成。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格的操作</title>
<style type="text/css">
table {
border:#0099FF 1px solid;
width:500px;
border-collapse:collapse;
}
table th, table td {
border:#0099FF 1px solid;
padding:10px 0px 10px 10px;
}
table th {
background-color:#00CCFF;
}
.one {
background-color:#CCFF66;
}
.two {
background-color:#3300FF;
}
.over {
background-color:#FF0000;
}
#click {
background-color:#CC33CC;
}
</style>
<script type="text/javascript">
var clz = "";
window.onload = function(){
var trs = document.getElementsByTagName("tr");
for(var i = 0;i<trs.length;i++){
if(i%2 == 0){
//偶数行
trs[i].className = "two";
}else{
//奇数行
trs[i].className = "one";
}
//设置鼠标移入时颜色变化
trs[i].οnmοuseοver=function(){
clz = this.className;
this.className = "over";
}
//设置鼠标移除时颜色恢复
trs[i].οnmοuseοut=function(){
this.className = clz;
}
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<th>电影名称</th>
<th>电影介绍</th>
<th>主演名单</th>
</tr>
<tr>
<td>变形金刚</td>
<td>很不错的电影</td>
<td>机器人</td>
</tr>
<tr>
<td>唐伯虎点秋香</td>
<td>非常好的电影</td>
<td>周星驰,巩俐</td>
</tr>
<tr>
<td>东邪西毒</td>
<td>群星云集的电影</td>
<td>张国荣,梁朝伟...</td>
</tr>
<tr>
<td>少林足球</td>
<td>最厉害的足球电影</td>
<td>周星驰,赵薇</td>
</tr>
<tr>
<td>赌神</td>
<td>小马哥演绎赌神</td>
<td>周润发</td>
</tr>
<tr>
<td>大话西游</td>
<td>超级搞笑的电影</td>
<td>周星驰</td>
</tr>
<tr>
<td>疯狂的石头</td>
<td>一部让人大笑不止的电影</td>
<td>黄渤</td>
</tr>
</table>
</body>
</html>

-------------------
5.完成一个与css手册中一样的示例
通过下拉菜单的选择，显示指定样式属性的效果；

6.新闻字体的动态改变

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻广告</title>
<style type="text/css">
<!-- 伪元素选择器 -->
a:link,a:visited {
color:#FF9900;
text-decoration:none;
font-size:15px;
}
a:hover {
color:#0099FF;
}
.newsstyle {
border:#0099FF 1px solid;
font-size:16px;
width:400px;
}
/*
预先定一些选择器
*/
.max {
border:#0099FF 1px solid;
font-size:20px;
color:#FF0000;
background-color:#CCFFFF;
width:400px;
}
.min {
border:#0099FF 1px solid;
font-size:12px;
color:#0000FF;
background-color:#FFFFFF;
width:400px;
}
</style>
<script type="text/javascript">
function resize(className){
var newstext = document.getElementById("newstext");
//newstext.setAttribute("class",className);
var attr = newstext.getAttributeNode("class");
attr.nodeValue = className;
}
</script>
</head>
<body>
<h2>这是一个大新闻.</h2>
<a href="javascript:void(0)" οnclick="resize('min')">小字体</a>
<a href="javascript:void(0)" οnclick="resize('newsstyle')">中字体</a>
<a href="javascript:void(0)" οnclick="resize('max')">大字体</a>
<hr />
<div id="newstext" class="newsstyle">
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
演示接口.很多内容.怎么办呢?等等<br />
</div>
</body>
</html>

7.QQ好友的显示：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友列表</title>
<style type="text/css">
table {
border:#0099FF 1px solid;
width:100px;
border-collapse:collapse;
}
table td{
border:#0066FF 1px solid;
background-color:#FF9900;
text-align:center;
}
table td div {
background-color:#FFFF99;
text-align:left;
}
table td a:link, table td a:visited {
color:#00ffFF;
text-decoration:none;
}
table td a:hover {
color:#00CC00;
}
/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div {
display:none;
}
.open {
display:block;
}
.close {
display:none;
}
</style>
<script type="text/javascript">
function openDiv(obj){
//1.关闭所有div
var divs = document.getElementsByTagName("div");
for(var i = 0;i<divs.length;i++){
var attr = document.createAttribute("class");
attr.value = "close";
divs[i].setAttributeNode(attr);
}
//2.打开点击的div
var div = obj.nextSibling.nextSibling;
//div.setAttribute("class","open");
if(div.getAttributeNode("class").value == "open"){
var attr = document.createAttribute("class");
attr.value = "close";
div.setAttributeNode(attr);
}else{
var attr = document.createAttribute("class");
attr.value = "open";
div.setAttributeNode(attr);
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" οnclick="openDiv(this)">君王好友</a>
<div class="open">
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="openDiv(this)">三国好友</a>
<div>
刘备<br />
关羽<br />
张飞<br />
赵云<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="openDiv(this)">美女好友</a>
<div>
西施<br />
貂蝉<br />
杨贵妃<br />
王昭君<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="openDiv(this)">IT好友</a>
<div>
马云<br />
李开复<br />
俞敏洪<br />
黎活明<br />
</div>
</td>
</tr>
</table>
</body>
</html>

7.商品列表

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<scripttype="text/javascript">
function getSum(){
/*
* 获取所有的名称为item的复选框。
* 判断checked状态，为true表示被选中，获取该节点的value进行累加。
*/
var sum = 0;
var collItemNodes = document.getElementsByName("item");
for(var x=0; x<collItemNodes.length; x++){
if(collItemNodes[x].checked){
sum += parseInt(collItemNodes[x].value);
}
}
varsSum = sum+"元";
document.getElementById("sumid").innerHTML = sSum.fontcolor('red');
}
//全选。
function checkAll(node){
/*
* 将全选的box的checked状态赋值给所有的itembox的checked。
*/
var collItemNodes = document.getElementsByName("item");
for(var x=0; x<collItemNodes.length; x++){
collItemNodes[x].checked = node.checked;
}
}
</script>
<inputtype="checkbox"name="allitem"οnclick="checkAll(this)"/>全选<br/>
<inputtype="checkbox"name="item"value="4000"/>笔记本电脑：4000元<br/>
<inputtype="checkbox"name="item"value="4000"/>笔记本电脑：4000元<br/>
<inputtype="checkbox"name="item"value="4000"/>笔记本电脑：4000元<br/>
<inputtype="checkbox"name="item"value="4000"/>笔记本电脑：4000元<br/>
<inputtype="checkbox"name="item"value="4000"/>笔记本电脑：4000元<br/>
<inputtype="checkbox"name="item"value="4000"/>笔记本电脑：4000元<br/>
<inputtype="checkbox"name="item"value="4000"/>笔记本电脑：4000元<br/>
<inputtype="checkbox"name="item"value="4000"/>笔记本电脑：4000元<br/>
<inputtype="checkbox"name="allitem"οnclick="checkAll(this)"/>全选<br/>
<inputtype="button"value="总金额是"οnclick="getSum()"/><spanid="sumid"></span>
</body>
</html>

8.表单注册：

参考老毕视频29集吧，不想写了