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


Posted in Javascript onApril 15, 2012

如果这个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差不多的方法。用法和这个一样大家有兴趣的可以去百度一下。所以我这里也就不说了,都不太常用。

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

Javascript 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
小程序实现多列选择器
Feb 15 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
javascript针对DOM的应用分析(二)
Apr 15 #Javascript
javascript针对DOM的应用实例(一)
Apr 15 #Javascript
JavaScript中的null和undefined解析
Apr 14 #Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 #Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 #Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 #Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 #Javascript
You might like
CodeIgniter模板引擎使用实例
2014/07/15 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
node.js的事件机制
2017/02/08 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python3基础之list列表实例解析
2014/08/13 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
用python批量移动文件
2021/01/14 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
活动总结报告范文
2014/05/04 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
检讨书怎么写
2015/01/23 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
导游词之无锡梅园
2019/11/28 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python