针对dom元素的分析应用

如果这个DOM元素没有样式也就谈不上操作了。2.我们也可以直接用JS动态的向html里写入DOM元素。

今天这章我们就讲这两个应用

（一）对html里现有的DOM元素进行操作。

我上面说了，对现有的DOM元素进行操作，无非就是对样式的操作。所以我们首先就要能获取这个DOM元素的样式。在讲获取DOM元素的样式之前。先要说下DOM元素的样式链接方式。有三种。

一是直接在html文档里写入样式例如

二是在html文档头部用样式标签插入例如

#dom{width:300px;height:200px;background:#000;}

三就是我们常用的链入方式例如

这三种的用JS操作它样式的方法都不太相同

重点我们说第一种链入样式操作，因为是最常用的，也是最方便的。

第二种链入样式操作麻烦。

第三种链入样式操作麻烦不说，而且无法直接修改样式，想修改的话还必须用第一种的方法，也就是说只能看不能摸

第一种链入样式的操作方法

例

获取它的高度属性，首先当然是获取DOM元素了,用前几章的方法

var a = lementById("dom");

再来获取它的高度属性，很简单

var h = ht;

以此类推，获取宽度，获取背景色

var w = h;

var bg = ground;

注意那个外边距属性是margin-top;

要获取这个不能直接写

var mt = in-top;

要用JQ中提到的骆驼写法

var mt = inTop;

获取它当然没什么用处，我们要能修改，修改起来也很方便。例如我们要把它的高度变为100，很简单,就一句

ht = "100px";

其他的以此类推，我不再多说；

第二种链入样式的操作方法

#dom{width:300px;height:200px;background:#000;margin-top:10px;}

这种操作需要区分浏览器。因为IE和FF对这个获取的代码不同,比如获取高度的方法是

var domcss = eSheets[0]ules||eSheets[0]s;

var a = domcss[0]ht;

修改的话是这样的

domcss[0]ht = "100px";

这个我也不想解释为什么是这样写。大家感兴趣的自己去查下；

第三种链入样式的操作方法

这种操作也需要区分浏览器。

获取的话一般都是写个函数，函数是这样的

function CurrentStyle(element){

return entStyle || omputedStyle(element, null);

}

假如我们那个文件里面有height属性

获取方法是var a = CurrentStyle("dom")ht;

无法用这里的方法直接修改，只能用第一种方法修改

这个我也不想解释为什么是这样写。大家感兴趣的自己去查下；

（二）用JS动态创建DOM元素。

其实这个很简单就是几个JS的方法而已，不过要像盖房子一样一步一步来，比如我要创建一个这样的DOM元素：

第一步，要创建一个div节点。var newobj = teElement("div");

第二步，要给这个节加一个id属性，并且属性名是dom。ttribute("id","dom");

第三步，要给这个节点加属性了这里有两种方，一种就是我们前面说到的修改样式是这样的h = "100px";还有一种就是第二步用到的'那个方法ttribute("width","100px"),其他属性以此类推

第四步，就是要把这个节点给放到html文档里，方法是这样的ndChild(newobj)这句的意思是这样的。就是获取了body元素

，appendChild(newobj)就是向这个body元素里添加一个孩子元素就是我们创建的那个节点。

如果你想移除这个节点是这样veChild(newobj);

（这个可以换的，换成你想要向那个里面添加子元素的的那个元素，比如我想向id为con的这个元素添加节点我们就这样写lementById("con")ndChild(newobj)）

这就算是完成了。JS里有很多和appendChild差不多的方法。用法和这个一样大家有兴趣的可以去百度一下。所以我这里也就不说了，都不太常用。

好这章就到这里了，下章开始就用开始教大家写一些效果了。