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 dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
编程语言JavaScript简介
Oct 16 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
javascript操作数组详解
Dec 17 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 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格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
Python Property属性的2种用法
2015/06/21 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
材料加工工程求职信
2014/02/19 职场文书
便利店促销方案
2014/02/20 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
挂职个人工作总结
2015/03/05 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
债务追讨律师函
2015/06/24 职场文书
庆元旦主持词
2015/07/06 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis