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中获取id值方法小结
Sep 22 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
javascript基础知识讲解
Jan 11 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
JavaScript快速调试的两个技巧
Nov 04 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
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
python动态性强类型用法实例
2015/05/09 Python
改进Django中的表单的简单方法
2015/07/17 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python实现八大排序算法
2016/08/13 Python
Python+django实现简单的文件上传
2016/08/17 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
大学生求职推荐信
2013/11/27 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
房产证明范本
2015/06/19 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Go语言编译原理之源码调试
2022/08/05 Golang