javascript学习基础笔记之DOM对象操作

159 阅读 0 评论 105 点赞

我是靠谱客的博主火星上鞋子，最近开发中收集的这篇文章主要介绍javascript学习基础笔记之DOM对象操作，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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；