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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
通过实例解析javascript Date对象属性及方法
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
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
python实现公司年会抽奖程序
2019/01/22 Python
基于python3的socket聊天编程
2020/02/17 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
理工学院学生自我鉴定
2014/02/23 职场文书
导航工程专业自荐信
2014/09/02 职场文书
订货会邀请函
2015/01/31 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers