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 相关文章推荐
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
小程序实现发表评论功能
Jul 06 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php实现的双向队列类实例
2014/09/24 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
jQuery的12招常用技巧分享
2011/08/08 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
Vue3为什么这么快
2020/09/23 Javascript
python实现二分查找算法
2017/09/21 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
pycharm实现猜数游戏
2020/12/07 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
工艺工程师岗位职责
2014/03/04 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
2014年法院工作总结
2014/11/24 职场文书
销售2014年度工作总结
2014/12/08 职场文书
爱心捐款活动总结
2015/05/09 职场文书
海洋天堂观后感
2015/06/05 职场文书
2015年度女工工作总结
2015/10/22 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB