首页 > 代码库 > javascript的DOM操作

javascript的DOM操作

在javascript中DOM操作可以说是使用的最频繁的也是最重要的一项内容了,使用jquery可以很简便的操作DOM,当然原声的javascript操作DOM的也需要掌握.

首先我们来看看在jquery中和原生的javascript中我们怎么操作DOM的

1 创建节点(包括文本,属性等的操作)

   1)创建节点

document.createElement(‘标段名称‘) 
document.createTextNode(‘文字内容‘); 

    2)插入节点

appendChild(); 
insertBefore(ele1,ele2); 

     3)设置(获取属性)

ElementObject.value
ElementObject[‘value‘] 
ElementObject.getAttribute(‘value‘) ElementObject.setAttribute(‘value‘,‘‘)

     4)元素之间的内容

1 innerHTML //获取节点之间的内容,包括子节点等
2 innerText //获取文本之间的内容,只能获取文本

 

一、使用js操作css属性的写法

1、对于没有中划线的css属性一般直接使用style.属性名即可。

如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position

2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。

如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等

3、js操作css float属性的特殊写法

因为 float 是javascript的保留字,我们不能直接使用obj.style.float来使用,这样操作是无效的。其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器Mozilla(gecko),ff等用 styleFloat:obj.style.cssFloat。

 

二、使用js获取css属性值

1、获取行内Style:obj.style. 属性名。<div id="css88" class="ss" style="width:200px; height:200px; background:#333333">JS获取CSS属性值</div> 不能访问class。

2、获取Class内及Link外部的Css属性:IE中使用的是obj.currentStyle[“属性名”]方法,而FF是用的是getComputedStyle 方法

三、使用js给css属性赋值

1、赋值class属性

赋值:document.getElementById(‘ceil‘).className = "class1";

如它有多个值:document.getElementById(‘ceil‘).className = "class1 class2 class3";

2、obj.style.cssText设定一个对象的css样式

document.getElementById(‘navition‘).style.cssText = "您的CSS代码‘;



 

     

 

                         

 

   

 

   

   

   

 

   

   

javascript的DOM操作