网站建设   网站建设技术   网页设计   JavaScript  

javascript针对DOM的应用分析(三)

人浏览  发布时间:2021-02-15

前两章讲了获取DOM元素。这章就开始讲如何操作dom。1.针对页面上有的DOM元素操作,无非就是对这个dom元素的样式进行操作 如果这个DOM元素没有样式也就谈不上操作了。2.我们也可以直...
前两章讲了获取DOM元素。这章就开始讲如何操作dom。1.针对页面上有的DOM元素操作,无非就是对这个dom元素的样式进行操作
如果这个DOM元素没有样式也就谈不上操作了。2.我们也可以直接用JS动态的向html里写入DOM元素。 
今天这章我们就讲这两个应用 
(一)对html里现有的DOM元素进行操作。 
我上面说了,对现有的DOM元素进行操作,无非就是对样式的操作。所以我们首先就要能获取这个DOM元素的样式。在讲获取DOM元素的样式之前。先要说下DOM元素的样式链接方式。有三种。 

一是直接在html文档里写入样式例如 
<div style="width:300px;height:200px;background:#000;"></div>。 

二是在html文档头部用样式标签插入例如 
<style> 
#dom{width:300px;height:200px;background:#000;} 
</style> 

三就是我们常用的链入方式例如 
<link rel="stylesheet" type="text/css" href="css.css" /> 

这三种的用JS操作它样式的方法都不太相同 
重点我们说第一种链入样式操作,因为是最常用的,也是最方便的。 
第二种链入样式操作麻烦。 
第三种链入样式操作麻烦不说,而且无法直接修改样式,想修改的话还必须用第一种的方法,也就是说只能看不能摸 

第一种链入样式的操作方法 
例<div id="dom" style="width:300px;height:200px;background:#000;margin-top:10px;"></div> 
获取它的高度属性,首先当然是获取DOM元素了,用前几章的方法 
var a = document.getElementById("dom"); 
再来获取它的高度属性,很简单 
var h = a.style.height; 
以此类推,获取宽度,获取背景色 
var w = a.style.width; 
var bg = a.style.background; 
注意那个外边距属性是margin-top; 
要获取这个不能直接写 
var mt = a.style.margin-top; 
要用JQ中提到的骆驼写法 
var mt = a.style.marginTop; 

获取它当然没什么用处,我们要能修改,修改起来也很方便。例如我们要把它的高度变为100,很简单,就一句 
a.style.height = "100px"; 
其他的以此类推,我不再多说; 


第二种链入样式的操作方法 
<style> 
#dom{width:300px;height:200px;background:#000;margin-top:10px;} 
</style> 
这种操作需要区分浏览器。因为IE和FF对这个获取的代码不同,比如获取高度的方法是 
var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules; 
var a = domcss[0].style.height; 
修改的话是这样的 
domcss[0].style.height = "100px"; 
这个我也不想解释为什么是这样写。大家感兴趣的自己去查下; 

第三种链入样式的操作方法 
<link rel="stylesheet" type="text/css" href="css.css" /> 
这种操作也需要区分浏览器。 
获取的话一般都是写个函数,函数是这样的 
function CurrentStyle(element){ 
return element.currentStyle || document.defaultView.getComputedStyle(element, null); 

假如我们那个css.css文件里面有height属性 
获取方法是var a = CurrentStyle("dom").height; 
无法用这里的方法直接修改,只能用第一种方法修改 
这个我也不想解释为什么是这样写。大家感兴趣的自己去查下; 

(二)用JS动态创建DOM元素。 
其实这个很简单就是几个JS的方法而已,不过要像盖房子一样一步一步来,比如我要创建一个这样的DOM元素: 
<div id="dom" style="width:100px;height:100px;background:#000;margin-top:10px;"></div> 

第一步,要创建一个div节点。var newobj = document.createElement("div"); 

第二步,要给这个节加一个id属性,并且属性名是dom。newobj.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(newobj)) 

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

好这章就到这里了,下章开始就用开始教大家写一些效果了。 (编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图