JavaScript操作DOM对象



1、DOM操作分为： DOM Core,HTML-DOM，CSS-DOM。

2、节点和节点关系

整个文档是一个文档节点

每个html标签是一个元素节点

包含HTML元素中的文本是文本节点

每个HTML属性是一个属性节点

                                                                   创建节点和插入节点

名称	描述
createElement(tagName)	创建一个标签名为tagNme的新元素节点
A.addendChild(B	把B节点追加至A节点的末尾
insertBefore(A,B	把A节点插入B节点之前
cloneNode(deep)	复制某个指定的节点

创建和插入

function tianjia() {

      var an=document.getElementById("div");    //获取div  id   

var an2=document.createElement("img");      //添加一个img节点

an2.setAttribute("src","images/shoppingBg.jpg");      //添加节点属性 

 an2.setAttribute("id","tupian");                   //添加节点属性 

   an.appendChild(an2);             //将新节img点插入div中

                            }

名称	描述
removeChild(node)	删除指定节点
replaceChild(newNode,oldNode)	用其他的节点替换指定节点的节点

删除节点

function shanxhu() { 

   var an=document.getElementById("tupian");   //获取img id

an.parentNode.removeChild(an);              //id.父节点.removeChild属性实现删除节点

}

替换节点

function xiugai() {

    var an=document.getElementById("tupian");  //获取img id
    var an2=document.createElement("img");     //用createElement属性创建一个img节点
    an2.setAttribute("src","images/shoppingBg.jpg");//给img节点属性赋值
    an2.setAttribute("id","tupian");                 //给img节点属性赋值
    an.parentNode.replaceChild(an2,an);        //用新的img节点替换掉老的
}

操作节点样式

       1.style属性

          使用style属性改变样式的语法如下:

     HTML 元素.style.样式属性="值";

在页面中有一个 id 为titles的div,要改变div中的字体颜色为红色,字体大小为25px,代码如下所示

document.etElementById("titles").style.color="#ff0000";  //改变颜色属性

document.etElementById("titles").style.fontSize"25px";       //改变字体大小

2.className属性

className属性设置或放回元素的clss样式

HTML 元素.clssName="样式名称";