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在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
js简单抽奖代码
Jan 16 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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 curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Javascript计算时间差的函数分享
2011/07/04 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python中装饰器学习总结
2018/02/10 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
云台山导游词
2015/02/03 职场文书
清洁工个人总结
2015/03/04 职场文书
个人求职意向书
2015/05/11 职场文书
百家讲坛观后感
2015/06/12 职场文书
运动员入场前导词
2015/07/20 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
Nginx配置使用详解
2022/07/07 Servers