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的动画算法实例
Jan 20 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
Angular路由简单学习
Dec 26 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
小程序实现搜索框功能
Mar 26 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue backtop组件的实现完整代码
Apr 07 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
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python调用百度REST API实现语音识别
2018/08/30 Python
Django 路由系统URLconf的使用
2018/10/11 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
致长跑运动员加油稿
2014/02/20 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
医德医风自我评价2015
2015/03/03 职场文书
消防隐患整改通知书
2015/04/22 职场文书