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 相关文章推荐
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
webpack3之loader全解析
Oct 26 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
canvas绘制折线路径动画实现
May 12 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
多重?l件?合查?(二)
2006/10/09 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python笔记(2)
2012/10/24 Python
python使用cPickle模块序列化实例
2014/09/25 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
专业销售业务员求职信
2013/11/18 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
单位在职证明范本
2014/01/09 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
专科生就业求职信
2014/06/22 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js