js + DOM 黄金搭档

Javascript DOM加强

1，DOM的概念：

文档对象模型：documentobject  model，就是一个模型（模子），他会将我们的文档（html,xml）转化成javascript 可以操作的对象

2，结构：

通过分析：DOM把HTML解析成2部分（head,body）(2个子节点)，这样形成了一棵家谱树

3．2，HTML DOM的规则：

Html文档对应的节点（对象）-----------   document

Document对象是html标签转化成的对象，他可以对我们的html文件所有的元素进行操作

 

 

有哪几部分组成：（通过节点）

DOM------

元素节点

（1）document.getElementById(‘id值’)

（2）Document.getElementsByName(“元素名称”)

一般情况下，我们用于表单，（考虑到浏览器的兼容性）

（3）document.getElementsByTagName(“标签名”)

 

属性节点

获得属性节点

getAttribute（“属性名”）

修改属性节点

setAtrribute(‘属性名’,’新的属性值’)

删除属性      removeAttribute() 参数属性名

创建属性       createAttribute()  参数1，属性名；参数2，属性值（可选）

文本节点

textNode获得文本节点

 

获得所有p元素的内容

把文本域变成按钮

/*

       //第一步，获得所有的元素节点（节点列表）

       varps = document.getElementsByTagName("p");

       //第二步，定位到具体的某一个元素节点（数组下标,0表示第一个节点）

       //第三步，找到当前元素的内容

       alert(ps[0].innerHTML);

       for(){

 

       }

 

       //第二种方法，通过分析发现id属性有规律 p1 p2

       for(vari=1;i<=5;i++){

              document.getElementById("p"+i).innerHTML;

       }

*/

       document.getElementById("username").setAttribute("type","button");

 

 

 

修改文本节点可以  重新给innerHTML赋值

删除文本节点   innerHTML 清空

 

 

通过常用的对象的属性来查找节点

parentNode    当前元素的父节点

firstChild      当前元素的第一个子节点

lastChild  当前元素的最后一个子节点

注意：

一定要注意元素与元素之间的空格

 

网页换肤

       functionchangeColor(c){

              document.bgColor= c;

       }

 

Javascipt DOM的增删改查

增：

       //给当前的div创建（增加一个节点（元素））

       varp = document.createElement("p");

       vartext = document.createTextNode("我创建的元素");

       p.appendChild(text);

       vardiv = document.getElementById("skin");

       div.appendChild(p);

       //创建一个文本框（默认显示请输入用户名）

       varinput = document.createElement("input");

       input.setAttribute("type","text");

       input.setAttribute("value","请输入用户名");

       div.appendChild(input);

 

删：

              vardiv = document.getElementById("box");

              //firstChild父元素的第一个子元素；lastChild父元素的最后一个子元素

              //varspan = div.firstChild;

              varspan = document.getElementById("span1");

              div.removeChild(span);

 

改

              varspan = document.getElementById("span1");

              span.innerHTML= '把我加进来吧';

查

document.getElementsByName

注意：一般用于表单

作业：

通过document.getElementsByName来实现复选框的全选，全部选，反选

       <inputtype="checkbox" name="check"/>

       <inputtype="checkbox" name="check"/>

       <inputtype="checkbox" name="check"/>

       <inputtype="checkbox" name="check"/>

       <inputtype="checkbox" name="check"/>

 

 

 

 

 

项目需求：

（1）图片切换

    定时器

（2）鼠标移入到图片上时，停止切换图片；鼠标移除时继续切换

 Onmouseover事件，onmouseout事件，清除定时器

（3）序号和对应的图片同时显示

 

（4）鼠标移入到序号上时，当前序号高亮显示，同时显示对应的图片，停止切换图片