javascript学习基础笔记之DOM对象操作


Posted in Javascript onNovember 03, 2011

DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档。DOM对象给予开发者对HTML的访问权限,并且使开发者能将HTML作为XML文档来处理和查看。DOM对象是与语言无关的API,意味着它的实现并不是与javascript绑定,这在于初学者来说可能会理解错误。DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是用一系列相互关联的对象来表示这些代码,而这些对象可以被修改,而且无需重新解析代码就能直接访问它们。由于DOM的使用上的简便,因此它成为了Web浏览器和javascript最喜欢的方法。document对象是BOM的对象,即window.document==document,但是它又同时属于DOM,也是HTML DOM的HTMLDocument对象的一种表现形式,反过来说它也是XML DOM Document对象。

JavaScript中的大部分处理DOM的过程都是利用document对象。

要访问html元素,可以利用document的documentElement特性:

var oHtml=document.documentElement;

oHtml对象包含一个表示<html/>的HTMLElement对象,通过:

var oHead=oHtml.firstChild;

var oBody=oHtml.lastChild;

可以得到分别表示<head/>和<body/>的对象,也可以通过使用childNodes特性来完成:

var oHead=oHtml.childNodes[0];//将childNodes当做Array来使用;

var oBody=oHtml.childNodes[1];//将childNodes当做Array来使用;

上述表达可以使用更加正规的表达方式,那就是shiyongitem()方法:

var oHead=oHtml.childNodes.item(0);

var oBody=oHtml.childNodes.item(1);

其实在HTML页DOM对象定义了document.body作为指向<body/>元素的指针,即

oBody = document.body;

但是document.head却没有定义,它的返回值是undefined;

Javascript 相关文章推荐
jQuery实现表单提交时判断的方法
Dec 13 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
微信小程序实现签到功能
Oct 31 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 #Javascript
遍历jquery对象的代码分享
Nov 02 #Javascript
jquery 笔记 事件
Nov 02 #Javascript
分页栏的web标准实现
Nov 01 #Javascript
jquery键盘事件使用介绍
Nov 01 #Javascript
JS鼠标事件大全 推荐收藏
Nov 01 #Javascript
EasyUI中的tree用法介绍
Nov 01 #Javascript
You might like
php获得文件扩展名三法
2006/11/25 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php表单敏感字符过滤类
2014/12/08 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
Vue按需加载的具体实现
2017/12/02 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python如何求解两数的最大公约数
2018/09/27 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
工程力学专业自荐信范文
2014/03/17 职场文书
导师就业推荐信范文
2014/05/22 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
法制教育演讲稿
2014/09/10 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫