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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
js格式化时间的方法
Dec 18 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
8个非常实用的Vue自定义指令
Dec 15 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php页面防重复提交方法总结
2013/11/25 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
Python Websocket服务端通信的使用示例
2020/02/25 Python
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
实习自我鉴定范文
2013/10/30 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
家长对孩子的寄语
2015/02/26 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
python编程项目中线上问题排查与解决
2021/11/01 Python