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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
Angular 应用技巧总结
Sep 14 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
node.js监听文件变化的实现方法
Apr 17 Javascript
vue动态设置页面title的方法实例
Aug 23 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
2.PHP入门
2006/10/09 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
javascript实现连续赋值
2015/08/10 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
使用C++扩展Python的功能详解
2018/01/12 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python交换两个变量的值方法
2019/01/12 Python
python getpass实现密文实例详解
2019/09/24 Python
python 求定积分和不定积分示例
2019/11/20 Python
Django REST framwork的权限验证实例
2020/04/02 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
绿色环保演讲稿
2014/05/10 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
如何通过一篇文章了解Python中的生成器
2022/04/02 Python