Javascript DOM加强
1，DOM的概念：
文档对象模型：document object model，就是一个模型（模子），他会将我们的文档（html,xml）转化成javascript 可以操作的对象
2，结构：
通过分析：DOM把HTML解析成2部分（head,body）(2个子节点)，这样形成了一棵家谱树
有哪几部分组成：（通过节点）
DOM------
元素节点
（1）document.getElementById(‘id值’)
（2）Document.getElementsByName(“元素名称”)
一般情况下，我们用于表单，（考虑到浏览器的兼容性）
（3）document.getElementsByTagName(“标签名”)
属性节点
获得属性节点
getAttribute（“属性名”）
修改属性节点
setAtrribute(‘属性名’,’新的属性值’)
文本节点
textNode获得文本节点
获得所有p元素的内容
把文本域 变成 按钮
/*
//第一步，获得所有的元素节点（节点列表）
var ps = document.getElementsByTagName("p");
//第二步，定位到具体的某一个元素节点（数组下标,0表示第一个节点）
//第三步，找到当前元素的内容
alert(ps[0].innerHTML);
for(){
}
//第二种方法，通过分析发现id属性有规律 p1 p2
for(var i=1;i<=5;i++){
document.getElementById("p"+i).innerHTML;
}
*/
document.getElementById("username").setAttribute("type","button");
网页换肤
function changeColor(c){
document.bgColor = c;
}
Javascipt DOM的增删改查
增：
//给当前的div创建（增加一个节点（元素））
var p = document.createElement("p");
var text = document.createTextNode("我创建的元素");
p.appendChild(text);
var div = document.getElementById("skin");
div.appendChild(p);
//创建一个 文本框（默认显示请输入用户名）
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("value","请输入用户名");
div.appendChild(input);
删：
var div = document.getElementById("box");
//firstChild 父元素的第一个子元素；lastChild 父元素的最后一个子元素
//var span = div.firstChild;
var span = document.getElementById("span1");
div.removeChild(span);
改
var span = document.getElementById("span1");
span.innerHTML = '把我加进来吧';
查
document.getElementsByName
注意：一般用于表单
作业：
通过document.getElementsByName来实现 复选框的全选，全部选，反选
<input type="checkbox" name="check"/>
<input type="checkbox" name="check"/>
<input type="checkbox" name="check"/>
<input type="checkbox" name="check"/>
<input type="checkbox" name="check"/>
项目需求：
（1）图片切换
定时器
//实现图片动态切换
//声明一个计数器
var count = 1;
function changePic(){
var img = document.getElementById('img');
if(count ==8){
count = 0;
}
img.src = ++count+'.jpg';
}
（2）鼠标移入到图片上时，停止切换图片；鼠标移除时继续切换
Onmouseover事件，onmouseout事件，清除定时器
function start_chan(){
interId = setInterval("changePic()",1000);
}
function stop_chan(){
clearInterval(interId);
}
（3）序号和对应的图片同时显示
（4）鼠标移入到序号上时，当前序号高亮显示，同时显示对应的图片，停止切换图片