WebAPI
01-WebAPI的概念.avi
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
我们通俗一点理解:API就是文档库,就像我们需要学什么武功,我们去藏经阁找就行了.
其实,jsAPI我们已经用过很多了.
02-JavaScript组成.avi
我们可以通过文档查出js的三大组成部分,分别是:
ECMAScript
BOM
DOM: DOM（文档对象模型）是 HTML 和 javascipt,css整合的核心。DOM 将把整个页面规划成由节点层级构成的文档。HTML 页面的每个部分都是一个节点的衍生物。
03-DOM相关概念.avi
DOM:文档对象模型:把文档抽象成对象,对象有对应的属性和方法,我们可以直接使用.
那么这句话的意思就是,我们先要明确是哪个对象,然后再给这个对象设置属性和方法就行了.
DOM也有对应的标准,获取对应的元素都是固定的方法.
我们之前学习过document.write(“
书写一个段落标签
”);这样一个语法,那么我们就是用的document对象我们可以把整个页面当成一个文档,我们能在文档里面书写内容.
04-根据id获取元素-剪裁.avi
HTML DOM getElementById() 方法
定义和方法:getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。
根据id获取元素:
var div = document.getElementById('main');
console.log(div);
// 获取到的数据类型 HTMLDivElement，对象都是有类型的
05-getElementsByTagName.avi
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
根据标签名获取元素:
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" />
</body>
</html>
06-getElementsByTagName.avi
07-获取元素的其它方式.avi
getElementsByName()
getElementsByClassName()
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
eg:返回一个文档中所有的class为"note"或者 "alert"的div元素.
var matches = document.querySelectorAll("div.note, div.alert");
08-注册事件.avi
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。ame( name )
先来看看w3c里面有哪些事件?
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
event.stopPropagation();//阻止事件的传播
DOM0事件模型
第一阶段:给一个id为test的控件添加了一个onclick的点击事件
1. document.getElementById("test").onclick = function(e){};
或者给一个id为test的控件添加鼠标移动上去的事件
1 document.getElementById("test")["onmousemove"] = function(e){};
[]的形式主要是为了解决属性名不是合法的标识符，比如：object.123肯定报错，但是object["123"]就避免了这个问题
用[]表示的好处
[]的写法，也把js写活了，用字符串表示属性名称，可以在运行时动态绑定事件。
事件模型在不断发展，早期的事件模型称为DOM0级别。
DOM0事件模型，所有的浏览器都支持。
直接在dom对象上注册事件名称，就是DOM0写法，比如：
事件被触发时，会默认传入一个参数e，表示事件对象，通过e，我们可以获取很多有用的信息，比如点击的坐标、具体触发该事件的dom元素等等。
基于DOM0的事件，对于同一个dom节点而言，只能注册一个，后边注册的同种事件会覆盖之前注册的。例如：
var btn = document.getElementById("test");
btn.onmousemove = function(e){
alert("ok");
};
btn["onmousemove"] = function(e){
alert("ok1");
};
我们给同一个按钮添加了同样的鼠标移动事件,那么最后的结果应该是什么呢?
我们可以通过测试,可以看出打印的是ok1,因为后面一个把前面一个给层叠掉了
我们再来聊聊this这个关键字:
我平常说的最多的,this就是代表的是当前的.
var btn = document.getElementById("test");
btn.onmousemove = function(e){
alert(this.id);
};
结果输出test。因为事件就是在id为test的dom节点上注册的，事件触发时，this当然代表这个dom节点，可以理解为事件是被这个dom节点调用的。
所以，想解除事件就相当简单了，只需要再注册一次事件，把值设成null，例如：
var btn = document.getElementById("test");
btn.onclick = function(e){
alert("ok");
};
btn.onclick = null;
原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，也就解除了事件绑定。
DOM0事件模型还涉及到直接写在html中的事件。例如：
<div id="test" class="test" onclick="exec();" ></div>
通过这种方式注册的事件，同样遵循覆盖原则，同样只能注册一个，最后一个生效。
区别就是，这样注册的事件，相当于动态调用函数(有点eval的意思)，因此不会传入event对象，同时，this指向的是window，不再是触发事件的dom对象。
但是,最后的这种在标签里面设置点击事件的调用方式是很少使用的.
DOM2事件模型
- DOM2支持同一dom元素注册多个同种事件。
- DOM2新增了捕获和冒泡的概念。
DOM2事件通过addEventListener和removeEventListener管理的标准，
addEventListener其实就是注册事件，她有三个参数，分别为：“事件名称”, “事件回调”, “捕获/冒泡”
//先找人 找到test为id的这个控件
var btn = document.getElementById("test");
//给这个控件添加对应的事件 其中这个案例里面
//第一个参数 点击事件 onclick的点击事件
//第二个参数 触发这个事件会执行这个事件的代码段 回调时和DOM0一样，也会默认传入一个event参数，同时this是指触发该事件的dom节点。
//第三个参数,true代表捕获事件，false代表冒泡事件。 它的值一般都是true或者false
btn.addEventListener("click", function(e){
alert("ok");
}, false);
冒泡和捕获是什么意思?
意思就是某个元素触发了某个事件，最先得到通知的是window，然后是document，依次而入，直到真正触发事件的那个元素(目标元素)为止，这个过程就是捕获。接下来，事件会从目标元素开始起泡，再依次而出，直到window对象为止，这个过程就是冒泡。
关于事件捕获和冒泡的,想更多深入的了解的,可以找我单独的要视频资料.
举个例子解释一下捕获和冒牌吧.
//假设有这样的一个div
<div id="test" class="test">
<div id="testInner" class="test-inner"></div>
</div>
//然后我们在外层div上注册两个click事件，分别是捕获事件和冒泡事件，代码如下：
var btn = document.getElementById("test");
//捕获事件
btn.addEventListener("click", function(e){
alert("ok1");
}, true);
//冒泡事件
btn.addEventListener("click", function(e){
alert("ok");
}, false);
最后，点击内层的div，先弹出ok1，后弹出ok。结合上边的原理图，外层div相当于图中的body，内层div相当于图中最下边的div，证明了捕获事件先执行，然后执行冒泡事件。
为什么要强调点击内层的div呢？因为真正触发事件的dom元素，必须是内层的，外层dom元素才有机会模拟捕获事件和冒泡事件，从原理图上就看出了。
//如果在真正触发事件的dom元素上注册捕获事件和冒泡事件呢？
var btnInner = document.getElementById("testInner");
//冒泡事件
btnInner.addEventListener("click", function(e){
alert("ok");
}, false);
//捕获事件
btnInner.addEventListener("click", function(e){
alert("ok1");
}, true);
当然还是点击内层div，结果是先弹出ok，再弹出ok1。理论上应该先触发捕获事件，也就是先弹出ok1，但是这里比较特殊，因为我们是在真正触发事件的dom元素上注册的事件，相当于在图中的div上注册，由图可以看出真正触发事件的dom元素，是捕获事件的终点，是冒泡事件的起点，所以这里就不区分事件了，哪个先注册，就先执行哪个。本例中，冒泡事件先注册，所以先执行。
这个道理适用于多个同种事件，比如说一下子注册了3个冒泡事件，那么执行顺序就按照注册的顺序来，先注册先执行。例如：
var btnInner = document.getElementById("testInner");
btnInner.addEventListener("click", function(e){
alert("ok");
}, false);
btnInner.addEventListener("click", function(e){
alert("ok1");
}, false);
btnInner.addEventListener("click", function(e){
alert("ok2");
}, false);
结果是依次弹出ok、ok1、ok2。
为了进一步理解事件模型，还有一种场景，假如说外层div和内层div同时注册了捕获事件，那么点击内层div时，外层div的事件一定是先触发的，代码如下：
var btn = document.getElementById("test");
var btnInner = document.getElementById("testInner");
btnInner.addEventListener("click", function(e){
alert("ok");
}, true);
btn.addEventListener("click", function(e){
alert("ok1");
}, true);
结果是先弹出ok1。
假如外层div和内层div都是注册的冒泡事件，点击内层div时，一定是内层div事件先执行，原理相同。
细心的读者会发现，对于div嵌套的情况，如果点击内层的div，外层的div也会触发事件，这貌似会有问题！
点击的明明是内层div，但是外层div的事件也触发了，这的确是个问题。
其实，事件触发时，会默认传入一个event对象，前边提过了，这个event对象上有一个方法：stopPropagation，通过此方法，可以阻止冒泡，这样外层div就接收不到事件了。代码如下：
var btn = document.getElementById("test");
var btnInner = document.getElementById("testInner");
btn.addEventListener("click", function(e){
alert("ok1");
}, false);
btnInner.addEventListener("click", function(e){
//阻止冒泡
e.stopPropagation();
alert("ok");
}, false);
接下来聊聊怎么解除事件吧。解除事件语法：btn.removeEventListener(“事件名称”, “事件回调”, “捕获/冒泡”);
这和绑定事件的参数一样，详细说明下：
- 事件名称，就是说解除哪个事件呗。
- 事件回调，是一个函数，这个函数必须和注册事件的函数是同一个。
- 事件类型，布尔值，这个必须和注册事件时的类型一致。
也就是说，名称、回调、类型，三者共同决定解除哪个事件，缺一不可。举个例子：
var btn = document.getElementById("test");
//将回调存储在变量中
var fn = function(e){
alert("ok");
};
//绑定
btn.addEventListener("click", fn, false);
//解除
btn.removeEventListener("click", fn, false);
要想注册过的事件能够被解除，必须将回调函数保存起来，否则无法解除。
09-点击按钮切换图片.avi
点击按钮实现如下效果:
点击点我切换图片,再点击的时候切换回来.
首先,要实现这一效果必须要先思考一下如何完成?
- 点击按钮实现切换,那么第一步就要先找到这个按钮(目前通过getElementById去查找)
- 实现切换的效果直接调用这个按钮的src属性就行了,相当于修改一下这个src的路径
- 需要实现来回切换,那么需要一个标识表示到底什么是第一张,什么是第二张
- 第一张图是a.jpg,点击切换的时候需要改变这个默认值,同时需要改变的是图片的src路径
// 1 获取元素
var btn = document.getElementById('btn');
var mv = document.getElementById('mv');
// 2 给按钮注册事件
var flag = false; // 当flag的值是false 的时候 对应a.jpg 当flag的值是true的时候 对应 b.jpg
btn.onclick = function () {
// 3 切换图片
if (flag) {
mv.src = 'images/a.jpg';
flag = false;
} else{
mv.src = 'images/b.jpg';
flag = true;
}
}
10-非表单元素的属性.avi
从 JavaScript 的观点来看，网页上的每个 HTML 标签都是一个 DOM 对象，标签的属性也是 DOM 对象的属性。如：
从 JavaScript 的观点来看，这个 标签是一个 Image 对象，它是 DOM 对象的一种。它的 id、src、width、border 属性的值已经指定，其它属性采用默认值。
利用 JavaScript 程序可以访问 DOM 对象，实际上就是用程序访问一个 HTML 标签。你可以通过编程修改一个 DOM 对象的属性，也就是用程序修改一个 HTML 标签的属性，使标签变得可控。
注意: DOM 对象的属性通常与相应的 HTML 标签的属性相对应，名字通常也是相同的，但 DOM 对象的属性需区分大小写。比如 border 属性可以用在 、
等几种标签中，则对应的 Image 对象、Table 对象等 DOM 对象也拥有 border 属性，取值方法也相同。有个别 DOM 属性的名字和 HTML 标签的属性名字不同，但它们实际上是同一个属性。比如 HTML 标签的 class 属性对应的 DOM 属性是className （注意大小写）。这是因为 class 是 JavaScript 保留字，而属性名是不能和保留字同名的。
每一个标签都有对应的属性,我们可以改变一个div的背景颜色,可以改变一个a链接的href属性,这些我们都可以通过DOM元素的属性直接进行赋值修改.
11-点击按钮div显示隐藏.avi
要实现点击一个按钮控制div的显示与隐藏
文字只有两种状态:要么是显示,要么是隐藏
div也只有两种状态:要么是显示,要么是隐藏,div的显示与隐藏我们可以通过className去控制
也就是说:如果文字是显示,那么对应的状态div是隐藏的 这个div元素的className=“hidden”
如果文字是隐藏,那么对应的状态div是显示的 这个div元素的className = 'show';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
background-color: red;
width: 200px;
height: 200px;
}
//点击显示按钮的时候,需要将className设置为显示,这个时候操作完了字体变为隐藏
.show {
display: block;
}
//点击隐藏按钮的时候,需要将className设置为hidden代表隐藏就行了,这个时候操作完了字体文字变成显示
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隐藏">
<br>
<div id="box" >
</div>
<script>
//1 获取元素(先找人)
var btn = document.getElementById('btn');
// isShow记录了box的状态，true 显示 ，false 隐藏
var isShow = true;
//2 给按钮注册这个按钮的点击事件
btn.onclick = function () {
//3 控制div的显示隐藏
var box = document.getElementById('box');
if (isShow) {
// 为什么DOM对象的对应的标签的class属性的名字叫做className ，应为class 在js中是关键字
// 关键字不可以作为变量或者属性的名字
box.className = 'hidden';
// 如何设置按钮对应的元素的属性 this代表当前的 代表当前你点击的这个按钮
// btn.value = '显示';
this.value = '显示';
isShow = false;
} else {
box.className = 'show';
this.value = '隐藏';
isShow = true;
}
}
// this的几种情况
// 1 普通函数中的this -> window
// 2 构造函数中的this -> 是当前构造函数创建的对象
// 3 方法中的this -> 方法所属的对象
// 4 事件处理函数中的this -> 事件源，谁调用的该事件this就指向谁
//4 改变按钮中的文字
</script>
</body>
</html>
12-取消a标签的默认行为.avi
<a id="link" href="http://www.baidu.com">百度</a>
<script>
var link = document.getElementById('link');
link.onclick = function () {
alert('点击我了');
// 取消a标签的默认行为（跳转到href）
return false;
}
</script>
点击a链接,如果不想让他实现跳转,那么直接 return false就可以了,为什么呢?
其实这个也就是从Windows对象的一个事件捕获的过程,捕获了这个点击事件之后就不让他进行冒泡处理就行了.所以 return false是告诉浏览器,我后续的操作不需要你处理了,我自己解决战斗.
13-美女相册-注册事件.avi
- 完成以下案例（实现点击小图切换大图，并且文字也发生对应的改变）
思考:
-
为什么要有大图和小图,小图不是也可以设置设置对应的宽高么?
-
要想实现点击小图，大图能够进行对应的切换，那么这两者之间的联系怎么去建立呢？
14-美女相册-设置图片和内容.avi
15-innerHTML和innerText.avi
document 对象中有innerHTML和innerText 两个属性， 这两个属性都是获取document对象的文本内容的，这两个属性间有哪些区别呢？
innerHTML 是一个 DOM 属性，它代表的是一个标签所包含的内容。利用这个属性可以修改一个 HTML 的开始标签和结束标签之间的内容。但对于 等单个标签，它所对应的Image 对象没有 innerHTML 属性。
innerText
我们分别通过以下场景来解析这两种的差别：
demo1:
<html>
<head><title>innerHTML</title></head>
<body>
<p id="p1">hello world </p>
<script>
var content = document.getElementById("p1");
console.log(content.innerHTML);
console.log(content.innerText)
</script>
</body>
</html>
demo2:
<html>
<head><title>innerHTML</title></head>
<body>
<div id="d1"><p id="p1">hello world </p></div>
<script>
var content = document.getElementById("d1");
alert(content.innerHTML);
alert(content.innerText)
</script>
</body>
</html>
通过上面两个示例，可以看出：
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。
16-innerText和textContent.avi
17-innerText的兼容性处理.avi
18-表单元素的属性.avi
19-给文本框赋值.avi
var elem1, elem2;
// document.forms 是一个 HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);
alert(elem1 === elem2); // 显示 "true"
elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm");
alert(elem1 === elem2); // 显示 "true"
课外拓展
关于DOM级别的一些问题，DOM0，DOM1，DOM2
好吧,其实,DOM0这玩意其实是不存在的,只是我们给他的一个参照物而已.DOM0,DOM1,DOM2我们只是把它比作DOM的一种发展阶段.
具体说呢，DOM0级指的是IE4和Netscape 4.0这些浏览器最初支持的DHTML…大概2000年的时候争论过DOM0的问题，最后结论大概是，没有官方形成此标准.。
DOM1级（DOM Level 1）于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成：DOM核心（DOM Core）和DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。
如果说DOM1级的目标主要是映射文档的结构，那么DOM2级的目标就要宽泛多了。DOM2级在原来DOM的基础上又扩充了（DHTML一直都支持的）鼠标和用户界面事件、范围、遍历（迭代DOM文档的方法）等细分模块，而且通过对象接口增加了对CSS（Cascading Style Sheets，层叠样式表）的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。
DOM2级引入了下列新模块，也给出了众多新类型和新接口的定义。
DOM视图（DOM Views）：定义了跟踪不同文档（例如，应用CSS之前和之后的文档）视图的接口；
DOM事件（DOM Events）：定义了事件和事件处理的接口；
DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口；
DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口。
DOM3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法–在DOM加载和保存（DOM Load and Save）模块中定义；新增了验证文档的方法–在DOM验证（DOM Validation）模块中定义。DOM3级也对DOM核心进行了扩展，开始支持XML 1.0规范，涉及XML Infoset、XPath和XML Base。
在阅读DOM标准的时候，读者可能会看到DOM0级（DOM Level 0）的字眼。实际上，DOM0级标准是不存在的；所谓DOM0级只是DOM历史坐标中的一个参照点而已。具体说来，DOM0级指的是Internet Explorer 4.0和Netscape Navigator 4.0最初支持的DHTML。
其他DOM标准
除了DOM核心和DOM HTML接口之外，另外几种语言还发布了只针对自己的DOM标准。下面列出的语言都是基于XML的，每种语言的DOM标准都添加了与特定语言相关的新方法和新接口：
SVG（Scalable Vector Graphic，可伸缩矢量图）1.0；
MathML（Mathematical Markup Language，数学标记语言）1.0；
SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）。
还有一些语言也开发了自己的DOM实现，例如Mozilla的XUL（XML User Interface Language，XML用户界面语言）。但是，只有上面列出的几种语言是W3C的推荐标准。
话说最新的w3c草案里还有一个DOM4……….
DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
导航属性:
parentNode - 节点（元素）的父节点
firstChild – 节点下第一个子元素
lastChild – 节点下最后一个子元素
childNodes - 节点（元素）的子节点
节点属性:
attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的文本值
访问 HTML 元素（节点）
访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素：
通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法
通过使用 getElementsByName() 方法
导航节点关系
您能够使用以下节点属性：
parentNode
firstChild
lastChild
childNodes
在文档结构中进行导航。
HTML DOM 属性
innerHTML属性:获取元素内容
nodeName属性:获取节点的名称。
nodeValue属性:获取节点的值。
nodeType属性:获取节点的类型,返回值是数字(配图)
关于图片切换以及后续的优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
首先1：把html 静态的标签排版需要处理好。
我们就可以分析我要做哪些效果。根据效果我就可以分析出来事件，事件出来我的函数就出来
触发一个事件，执行一个方法，我触发一个事件，我的这个方法要做哪些业务逻辑处理...
方法写好 （写方法里面的逻辑代码，api 操作）
测试...
-->
<script type="text/javascript">
//打开这个页面，我们就因该可以看到，
//获取当前正在高亮的，过两秒钟之后，我要它跳到下一个div
var ids=window.setInterval("changeImage()", 2000);
//每隔两秒执行这个方法..
function changeImage(){
//获取到当前正在高亮的..
var highdiv=document.getElementsByClassName("sinaclass")[0];
//判断当前高亮的div 是否还有下一个div ，如果有，如果没有，第一个高亮..
if(highdiv.nextSibling.nextSibling){
highdiv.removeAttribute("class");
highdiv.nextSibling.nextSibling.setAttribute("class","sinaclass");
}else{
highdiv.removeAttribute("class");
document.getElementById("right_area").firstChild.nextSibling.setAttribute("class","sinaclass");
}
changsrc();
}
function changsrc(){
//获取当前正在高亮的div，它下面的img的地址，
var lasthdiv=document.getElementsByClassName("sinaclass")[0];
var rightdivimg=lasthdiv.firstChild.nextSibling;
var righimagesrc=rightdivimg.getAttribute("src");
//获取到左边left_area 里面的大的img，把它的地址替换到右边的img 地址..
document.getElementById("leftimageId").setAttribute("src",righimagesrc);
}
window.onload=function(){
//页面加载完毕，为右边的四个div 加事件，先获取到..
var divs=document.getElementById("right_area").childNodes;
for(var i=0;i<divs.length;i++){
if(divs[i].nodeType==1){
//都是元素节点..
//为右边的四个div 加鼠标悬停事件..
divs[i].onmouseover=function(){
//我应该把当前正在高亮的移除..
var hdiv=document.getElementsByClassName("sinaclass")[0];
hdiv.removeAttribute("class");
//鼠标移动到这个div ，我就应该把这个div 高亮..
this.setAttribute("class","sinaclass");
changsrc();
//终止循环..
window.clearInterval(ids);
}
divs[i].onmouseout=function(){
ids=window.setInterval("changeImage()", 2000);
}
}
}
}
</script>
<style type="text/css">
.main{
width: 510px;
height: 292px;
border: 1px solid #abcdef;
background: #CCD3EE;
}
.left_area{
width: 400px;
height: 272px;
border: 1px solid #abcdef;
margin: 10px;
float: left;
}
.right_area{
float: left;
width: 80px;
height: 272px;
border: 1px solid #abcdef;
margin-top: 10px;
}
.right_area div{
width: 80px;
height: 66px;
}
.sinaclass{
border: 2px solid red;
}
</style>
</head>
<body>
<div class="main">
<div class="left_area">
<img alt="" src="001.jpg" width="400" height="272" id="leftimageId">
</div>
<div class="right_area" id="right_area">
<div class="sinaclass">
<img alt="" src="001.jpg" width="80" height="66">
</div>
<div>
<img alt="" src="002.jpg" width="80" height="66">
</div>
<div>
<img alt="" src="003.jpg" width="80" height="66">
</div>
<div>
<img alt="" src="004.jpg" width="80" height="66">
</div>
</div>
</div>
</body>
</html>
闲扯
为什么 DOM 必不可少
自从 IE 4.0 和 Netscape Navigator 4.0 开始支持不同形态的动态 HTML（DHTML），开发者首次能够在不重载网页的情况下修改它的外观和内容。这是 Web 技术的一大飞跃，不过也带来了巨大的问题。Netscape 和微软各自开发自己的 DHTML，从。而结束了 Web 开发者只编写一个 HTML 页面就可以在所有浏览器中访问的时期 (dom 里面由兼容性.)
业界决定必须要做点什么以保持 Web 的跨平台特性，他们担心如果放任 Netscape 和微软公司这样做，Web 必将分化为两个独立的部分，每一部分只适用于特定的浏览器。因此，负责指定 Web 通信标准的团体 W3C（World Wide Web Consortium）就开始制定 DOM。每个浏览器厂商会有自己的一些东西，这样我们网页开发，就会有一些兼容性 (兼容性)
什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 页面上面的标签 的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
总结
对象的获取
用 JavaScript 设置或修改一个 HTML 标签的属性时，首先要做的是获取这个标签所对应的 DOM 对象。常用的方法有：
1、用 id 获取 DOM 对象：
如果一个标签设置了 id 属性，我们可以利用 id 值访问这个标签，它的 JavaScript 代码代码为：
document.getElementById( id )
document 是一个 BOM 对象，它代表了当前的 HTML 文档；getElementById 是 Document 对象的一个方法；id 是网页中某个 HTML 标签的 id 属性值。
document.getElementById( id ) 的返回值是一个对象型数据，也就是一个 DOM 对象。
2、用 name 获取 DOM 对象：
如果一个标签设置了 name 属性，我们可以利用 name 值访问这个标签，它的 JavaScript 代码代码为：
document.getElementsByName( name )
说明：在一个网页中，如果为标签设置 id 属性，则各个标签的 id 属性值不能相同，如果为标签设置 name 属性，则一个网页中可以有多个 name 属性值相同的标签。
所以 document.getElementsByName( name ) 的返回值不是单一的对象，而是一个 DOM 对象数组，它包含了本页中所有 name 值相同的那些标签。
3、用标签名获取 DOM 对象：
我们可以直接用标签名访问指定标签，它的JavaScript代码代码为：
document.getElementsByTagName( tagname )
说明：由于在一个网页中，同一种标签可以出现多次，所以 document.getElementsByTagName( tagname ) 的返回值也是一个 DOM 对象数组，它包含了本页中指定种类的所有标签。
比如：document.getElementsByTagName( “img” ) 返回的是一个 Image 对象数组，每个元素对应于网页中的一个 标签，数组中的元素按 标签出现的顺序排列。
比较以上三种方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接访问到网页中一个指定的 HTML 标签，这也是我们今后最常使用的方法。
设置或修改标签的属性
获取了一个 DOM 对象之后，我们可以为该对象的属性进行赋值，从而修改了它所对应标签的属性值。一般方法是：
DOM对象.属性名 = 值;
DOM 对象的属性名通常和HTML标签的属性名相同，但它要区分大小写，所以在书写时要特别注意。
4550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
