JavaScript第十三讲：DOM的应用操作

DOM操作（上）

一.DOM

作用：DOM（Document  Object  Nodel）

 

1.document 文档 HTML文件  XML文件（标记语言）

   

          ssssss

   

 

2.Object 对象（HTML元素转成的js对象）

注意：如果使用js操作HTML或XML文档，就需要先将HTML文档结构转成js对象

a、操作属性

b、操作内容

     innerText内部的文本(IE能用)（非IE用textContent）

     innerHTML

     outerText

     outerHTML外标签

      表单 ----value

c、操作样式

  

 单个操作

   aobj.style.backgroundColor="red";

   aobj.style.fontSize="3cm";

  

  批量操作

   className

 

  aobj.className="test";

  aobj.className+=" demo";

 //aobj.className="test demo";

  aobj.className="";//清除类

 

 

 

有了以上三点的操作之前先转成对象

转成对象的两种方式

A、标记名（li、a、ul等等 ---多个）、id名（唯一）、name（多个）、class

document中的三个方法

var objs=document.getElementsByTagName("div");

var objs=document.getElementById("one");

var objs=document.getElementsByName("two");

 

B、用数组获取对象

document.title=

document.body=[object]

window.frames=[object]

document.all=[object]

document.embeds=[object]//所有动画

document.scripts=[object] //所有脚本

document.applets=[object]//

document.images=[object]

document.forms=[object]

document.anchors=[object]//所有锚点中带name的

document.styleSheets=[object]

document.links=[object]

有七种方式

  alert(document.forms[1].username.value);//结果为lisi

  alert(document.forms["frm2"].username.value);

  alert(document.forms.item(1).username.value);

  alert(document.forms.item("frm2").username.value);

  alert(document.forms.frm2.username.value);

  alert(document.frm2.username.value);

  alert(document["frm2"].username.value);

 

 

例1

 

   

   

   

  mmmmmmm

 

   test

 

 

 

 

 

二.BOM

小知识

判断IE还是火狐的方法

if(document.all){

alert("IE");

}else{

 alert("huohu");

}

例2.解决IE和火狐之间的这块兼容问题

 

DOM操作（中）

例1

全选

反选

全不选

var  cnames=document.getElementsByName("ids[]");

 function sall(){

    for(var i=0;i

         cnames[i].checked="true";

}

 

function fall(){

   for( var i=0;i

        if(cnames[i].checked)

                cnames[i].checked="";

        else

                cnames[i].checked=true;

}

function nall(){

   for(var i=0;i

        cnames[i].checked="";

 

}

 

例2

全选 

//将checkbox和全选连在一起了。

 

例3

 

 

例4选项卡

 

 

   

         

第一项

         

第二项

         

第三项

  

   

   

     

 

             

                     

• aaaaaaaa

                      

• aaaaaaaa

                      

• aaaaaaaa

             

       < /div>

 

             

                     

• bbbbbb

                      

• bbbbbb

                      

• bbbbbb

             

       

 

             

                     

• ccccccc

                     

• ccccccc

                     

• ccccccc

             

       

   

 

 

 

例5、用数组获取对象

 

 

 

DOM的应用（下）

DOM

D---document

O---Object

M---model

 

一、将文档想成一个倒树，每一个部分（元素、内容、属性、注释）都是一个节点

二、只要知道一个节点，按照关系找到其他节点。

     父节点    parentNode

    子节点（第一个、最后一个） childNodes    firstChild   lastChild

    同胞节点（上一个、下一个） nextSibling  previousSibling

    可以对节点进行增删改查

三、找到节点，节点类型nodeType，节点名nodeName，节点值nodeValue

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

 

nodeName属性含有节点的名称

元素节点的nodeName是标签名称

属性节点的nodeName是属性名称

文本节点的nodeName永远是#text

文档节点的nodeName永远是#document

注释：nodeName所包含的XML元素的标签名称永远是大写的

         对于文本节点，nodeValue属性包含文本

        对于属性节点，nodeValue属性包含属性值

        nodeValue属性对于文档节点和元素节点是不可用的

       nodeType属性可返回节点的类型

       最重要的节点类型是：

元素类型       节点类型

元素               1

属性               2

文本               3

注释               8

文档               9

 

可以在一个文档流中

1.创建节点

在文档流中创建所以在document中的方法。document.creatElement("")//创建元素

2.添加到文档流

appendChild();

insertBefore();

3.删除节点

removeChild();

 

例1.

 

   

 

aaaaaa

wwwww

 

dddd

 

 

 

 

 

例2.

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

add

 

例3//在谁之后；在谁和谁之间

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

ssdfsdfsdfsdf

dddddd

 

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

add

 

 

例5//在p标签之后插入

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

ssdfsdfsdfsdf

dddddd

wwwww

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

add

 

例6、 //删除节点

 

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaa

ssdfsdfsdfsdf

dddddd

wwwww

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

add

del