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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
Javascript闭包实例详解
Nov 29 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 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
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
Vue.js中的高级面试题及答案
2020/01/13 Javascript
python定时执行指定函数的方法
2015/05/27 Python
Python中的默认参数详解
2015/06/24 Python
在Python中移动目录结构的方法
2016/01/31 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
假面舞会策划方案
2014/05/29 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
网站出售协议书范文
2014/10/10 职场文书
工作年限证明模板
2014/11/01 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers