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编程起步(第三课)
Feb 27 Javascript
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
bootstrap table小案例
2016/10/21 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
用python对oracle进行简单性能测试
2020/12/05 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
经济系大学生求职信
2013/10/01 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技