1.昨日回顾
昨日回顾详细内容文章：→ 文章链接
DOM 的概念
W3C的DOM的主要目的：使用 程序或脚本 可以 动态的 改变网页的外观、结构、内容。
前台动态网站：一定要结合事件来实现。onload、onscroll、onchange、onsubmit
HTML标记来调用事件，当事件发生时，去执行一项动作。这个动作一般是一个函数。该函数实现一项功能。
客户端脚本：VBScript、JavaScript、ActionScript等
静态网页：HTML+CSS
前台技术：HTML、CSS、JavaScript、jQuery、AJAX、XML等
后台技术：PHP、MySQL、smarty模板引擎、yii、ThinkPHP、OOP编程思想、MVC、 APACHE、Linux、Uninux
DOM 的分类
核心DOM：提供了一些公共的属性和方法，可以用于操作HTML和XML文档。
HTML DOM：针对HTML文档提供的一些属性方法
XML DOM：针对XML提供的一些属性和方法
CSS DOM：针对操作CSS提供的一些属性方法
Event DOM：可以获取当前鼠标的环境信息，比如： 取得鼠标的坐标
HTML 节点树
一个HTML文档只有一个根元素；
子节点、父节点、兄弟节点
HTML文档是一种结构化的文档，是一种有一定层级关系的文档。
核心DOM 的节点操作
firstChild：第一个子节点。访问<body>节点 document .firstChild.lastChild
lastChild：最后一个子节点
childNodes：节点列表，是一个数组。
parentChild：父节点
setAttribute(name,value)：给某个元素对象，增加 一个 属性
removeAttribute(name)：删除节点属性
getAttribute(name)：取到某个节点的属性的值
createElement(tagName)：创建一个节点，创建一个HTML标记
parentNode.appendChild(nodeName)：给某个父节点，增加一个子节点
parentNode.insertBefore(newObj,oldObj)：将某一个节点插入到另一个节点的前面
2.HTML DOM的新特性
核心DOM操作网页中的各元素，可以实现动态的HTML。但是，选择某个元素非常麻烦，特是当层级越深时，操作就更麻烦。核心DOM查找元素并不实用。DOM为HTML提供了专用的方法，就是HTML DOM。
HTML DOM 的特性
（1）每一个 HTML元素 (标记)，都对应一个元素对象(对象)。任何HTML标记都对应一个元素对象。
（2）每一个HTML元素的属性，都与 元素对象 的 属性 一一对应。
举例：
<img id=“obj” src =“images/xingxing.gif” />
<script>
Var obj = document. getElementById (“obj”);
obj. src = “images/yueliang.gif”;
obj. title = “图片标题”
obj. style = “width:400px;height:300px;”;
obj. border = 1;
obj.class = “img01”3
</script>
3.HTML DOM访问HTML的方法
（1 ）使用getElementById() 方法
<div id=“box”></div>
var obj = document.getElementById(“box”);
obj.style = “width:400px;height:300px;”
obj.setAttribute(“style”,”width:400px;padding:20px;”);
//给id=box的元素添加一个图片
Var node_img = document.createElement(“img”);
node_img.src = “images/bg.gif”;
obj.appendChild(node_img);
//清除div中所有的内容
obj.innerHTML = “”;
（2 ）使用 getElementsByTagName () 方法
含义：取得某一个标记下的所有指定的子标记，返回一个数组类型。
<ul id=“obj”>
<li>北京市</li>
<li>天津市</li>
<li>武汉市</li>
<li>上海市</li>
<li>广州市</li>
</ul>
Var obj = document.getElementById(“obj”);
Var arr = obj.getElement s ByTagName(“li”); //HTML DOM
Var arr = obj.childNodes; //核心DOM
For(var i=0;i<arr.length;i++)
{
arr[i].style = “color:#0000ff;text-decoration:underline;”;
arr[i].setAttribute(“style”,”color:#0000ff;text-decoratin:underline;”);
}
（3 ）使用name 属性
每个HTML标记，都有name属性，一般在 表单中 使用 name 来访问。
<form name=“form1” onsubmit= “return checkForm() ” >
用户名：<input type=“text” name=“username” />
<input type=“submit” value=“提交表单” />
</form>
//对表单中的username进行验证
function checkForm()
{
Var theForm = document.form1;
if( theForm.username.value == “”){
alert(“用户名不能为空”);
return false;
}else if(theForm.username.value.length <5 && theForm.username.value.length > 20)
{
alert(“用户名只能介于5-20之间”);
return false;
}else
{
return true;
}
}
4.元素对象的属性和方法
元素对象就是HTML元素对应的对象，就叫元素对象。
tagName：标记的名称，同nodeName一样。
id：同元素的id属性一样
title：同元素的title属性一样
className：同元素的class属性一样，给元素增加一个类样式
innerHTML：指某个标记中的所有内容，可以包含其它标记。
nodeValue：也指某个文本节点的内容，但只能是纯文本。
offsetWidth：指元素对象的宽度(不含滚动条中的内容)
offsetHeight：指元素对象的高度，里面如果没有内容，则高为0
注意：跟css中的height不太一样，CSS中的height，标记可以没有内容，但height可以设置
offsetHeight必须要有内容，否则高为0.
scrollWidth：包含滚动条中的内容的宽度
scrollHeight：包含滚动条中的内容的高度
scrollTop：指向上滚动过去的距离。
scrollLeft：指向左滚动过去的距离。
offsetTop：指元素距离网页顶端的距离
offsetLeft：指元素距离网页左端的距离
onscroll ：当滚动条移动时，执行 JS 程序。
5.CSS DOM
每一个HTML标记，都具有 style 属性 ，相应的，每一个元素对象都具有style属性。style属性是一个对象。
CSS DOM就是通过style对象来访问和操作CSS。
<script>
function init()
{
//取得id=box的对象
var obj = document.getElementById(“box”);
//给id=box的对象增加样式
obj.setAttribute(“style”,“width:400px;height:300px;”); //核心DOM中的方法
obj.style = “width:400px;height:300px;”; //HTML DOM中的属性
//使用style对象来增加样式
obj.style.width = “400px”; //给id=box的对象增加一个width的CSS属性
obj.style.height = “300px”; //给id=box的对象增加一个height的CSS属性
obj.style.overflow = “hidden”; //数据溢出则隐藏
obj.style.border = “1px solid #ff0000” //增加边框
obj.style.backgroundColor = “#f0f0f0”; //背景颜色
obj.style.paddingTop = “20px”; //上填充为20px
//往id=box中添加一个<h2>标记，内容随意，标题的颜色为#FF0000
var str = “<h2 style=’color:#ff0000’>广州传智播客欢迎您</h2>”;
str += “ <ul id=’obj_ul’> ”;
str += “<li>HTML超文本标注语言</li>”;
str += “<li>CSS层叠样式表</li>”;
str += “</ul>”;
obj. innerHTML = str; //将str的内容写入到obj对象中
//求出有多少个<li>标记
var obj_ul = document.getElementById(“ obj_ul ”);
var arr = obj_ul.getElementsByTagName(“li”);
window.alert(“ <li> 标记的个数为：”+arr.length);
}
</script>
<body onload=“init()”>
<div id=“box”></div>
</body>
将 CSS 的属性转成 style 对象的属性
（1）如果CSS的属性是一个单词，可以直接写，必须为全小写。如：obj.style.width = “400px”
（2）如果CSS的属性是多个单词用横线连接的，在书写时，将“横线”去掉，并且从第二个单词开始，每个单词的首字母要大写。如：obj.style.backgroundColor = “red”
综合案例：书讯快递
分析结果：
dome 的高为260，overflow=hidden
dome包含dome1和dome2
dome2初始化时为空
dome1和dome2的高度都是260
dome1的内容和dome2的内容一样
通过dome的scrollTop++来实现向上滚动
循环滚动，需要有定时器
鼠标放上dome，停止滚动，清除定时器
鼠标移出dome，开始滚动，再次调用定时器函数
6.综合案例：购物车
onBlur：当鼠标从文本框中移出时触发一个JS函数。
表格对象的属性
rows：取得表格的所有行，是一个数组。如：table.rows
cells：取得表格行的所有单元格，是一个数组。如：tr.cells
