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 12 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
js字符串转成JSON
Nov 07 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 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数据库类
2009/05/27 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python迭代器的使用方法实例
2013/11/21 Python
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python转换摩斯密码示例
2014/02/16 Python
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
《最后一头战象》教学反思
2016/02/16 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS