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 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
Express本地测试HTTPS的示例代码
Jun 06 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
微信小程序日历插件代码实例
Dec 04 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
php中++i 与 i++ 的区别
2012/08/08 PHP
preg_match_all使用心得分享
2014/01/31 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
Python 描述符(Descriptor)入门
2016/11/20 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
企划经理的岗位职责
2013/11/17 职场文书
记帐员岗位责任制
2014/02/08 职场文书
学校消防安全责任书
2014/07/23 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
离婚案件上诉状
2015/05/23 职场文书
小学班主任研修日志
2015/11/13 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
Nginx实现会话保持的两种方式
2022/03/18 Servers
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android