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 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
jQuery链使用指南
Jan 20 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
node.js实现端口转发
Apr 14 Javascript
详解Node.js开发中的express-session
May 19 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
vue实现登录拦截
Jun 29 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
xajax写的留言本
2006/11/25 PHP
php 表单验证实现代码
2009/03/10 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
Python中sort和sorted函数代码解析
2018/01/25 Python
python中cPickle类使用方法详解
2018/08/27 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python文件路径操作方法总结
2020/12/21 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
电工工作职责范本
2014/02/22 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
物业管理工作方案
2014/05/10 职场文书
模具专业求职信
2014/06/26 职场文书
投诉信格式范文
2015/07/02 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书