针对dom元素的分析应用.doc

针对dom元素的分析应用 如果这个DOM元素没有样式也就谈不上操作了2.我们也可以直接用JS动态的向html里写入DOM元素 今天这章我们就讲这两个应用 （一）对html里现有的DOM元素进行操作 我上面说了对现有的DOM元素进行操作无非就是对样式的操作所以我们首先就要能获取这个DOM元素的样式在讲获取DOM元素的样式之前先要说下DOM元素的样式链接方式有三种 一是直接在html文档里写入样式例如 二是在html文档头部用样式标签插入例如 domwidth:300px;height:200px;background:000; 三就是我们常用的链入方式例如 这三种的用JS操作它样式的方法都不太相同 重点我们说第一种链入样式操作因为是最常用的也是最方便的 第二种链入样式操作麻烦 第三种链入样式操作麻烦不说而且无法直接修改样式想修改的话还必须用第一种的方法也就是说只能看不能摸 第一种链入样式的操作方法 例 获取它的高度属性首先当然是获取DOM元素了,用前几章的方法 vara=document.getElementById(dom); 再来获取它的高度属性很简单 varh=a.style.height; 以此类推获取宽度获取背景色 varw=a.style.width; varbg=a.style.background; 注意那个外边距属性是margintop; 要获取这个不能直接写 varmt=a.style.margintop; 要用JQ中提到的骆驼写法 varmt=a.style.marginTop; 获取它当然没什么用处我们要能修改修改起来也很方便例如我们要把它的高度变为100很简单,就一句 a.style.height=100px; 其他的以此类推我不再多说； 第二种链入样式的操作方法 domwidth:300px;height:200px;background:000;margintop:10px; 这种操作需要区分浏览器因为IE和FF对这个获取的代码不同,比如获取高度的方法是 vardomcss=document.styleSheets0.cssRules|document.styleSheets0.rules; vara=domcss0.style.height; 修改的话是这样的 domcss0.style.height=100px; 这个我也不想解释为什么是这样写大家感兴趣的自己去查下； 第三种链入样式的操作方法 这种操作也需要区分浏览器 获取的话一般都是写个函数函数是这样的 functionCurrentStyle(element) returnelement.currentStyle|document.defaultView.getComputedStyle(element,null); 假如我们那个css.css文件里面有height属性 获取方法是vara=CurrentStyle(dom).height; 无法用这里的方法直接修改只能用第一种方法修改 这个我也不想解释为什么是这样写大家感兴趣的自己去查下； （二）用JS动态创建DOM元素 其实这个很简单就是几个JS的方法而已不过要像盖房子一样一步一步来比如我要创建一个这样的DOM元素： 第一步要创建一个div节点varnewobj=document.createElement(div); 第二步要给这个节加一个id属性并且属性名是domnewobj.setAttribute(id,dom); 第三步要给这个节点加属性了这里有两种方一种就是我们前面说到的修改样式是这样的newobj.style.width=100px;还有一种就是第二步用到的那个方法newobj.setAttribute(width,100px),其他属性以此类推 第四步就是要把这个节点给放到html文档里方法是这样的document.body.appendChild(newobj)这句的意思是这样的document.body就是获取了body元素 appendChild(newobj)就是向这个body元素里添加一个孩子元素就是我们创建的那个节点 如果你想移除这个节点是这样document.body.removeChild(newobj); （这个可以换的换成你想要向那个里面添加子元素的的那个元素比如我想向id为con的这个元素添加节点我们就这样写document.getElementById(con).appendChild(newo