Javascript高级程序设计之DOM

DOM是文档对象模型,是前端编程接触最多的部分,也是最让人诟病的东西。因为DOM编程的性能问题,一直是一个老生常谈的话题,但一直以来也没有一个很是完美的解决方案。这篇是对DOM的一个简单介绍,并不会太过深入的去介绍。

DOM编程时基于HTML或XML的,它提供了动态控制HTML或XML的功能。这里我们主要说HTML。HTML是制作网页的最基本也是最核心的部分,没有HTML可以说就没有网页。HTML通过各种标签来构建页面,它的层级结构看上去是很典型的树状结构。在整个HTML最顶层,有一个<html><html/>标签,它标示这HTML的开始,所有的子孙标签都要写在这个标签里。它拥有一个属于自己的名称:文档元素。在HTML中有且只有一个文档元素

Node是DOM1中绑定的一个接口,JS提供Node类型来实现它,通过该类型,就可以对HTML节点进行动态的操作,不过在IE中并没有实现该类型,因此我们不讲IE。HTML中的所有标签元素,都继承自Node,因此每个标签都可以使用Node提供的属性和方法。Node有一个nodeType的属性,它的值是一系列常量,一共有12个值,用1-12的数字表示,它标示了节点的类型,通过该类型可以很轻松的知道元素是什么节点。当然不是只有这一个属性可以判断类型,利用nodeValue和nodeName属性也可以判断元素类型。nodeName存储的是节点的标签名称的大写形式,想要获取小写形式,可以使用localName。nodeValue的值如果是元素的话则一直为null。

前边说HTML是树状结构,也就是说节点之前会向树枝那样彼此相连接,不过这种连接只有通过DOM才能展现出来。在DOM中每个节点都有一个parentNode和childNodes属性,这两个属性就是用来彼此连接节点的。childNodes属性存储的是一个Nodelist对象,是一个类数组对象。它可以向数组那样用方括号访问其中存储的元素,也拥有length属性,当然也可以用item方法存储的元素:node.childNodes.item(0)。childNodes是动态的,也就是说,子节点的变化,会实时的反应到childNodes存储的Nodelist对象上。parentNode属性则返回节点的父节点对象。除这两个属性外,还提供了访问兄弟节点的previousSibling、nextSibling属性和访问第一个节点和最后一个节点的firstChild和lastChild,及返回根节点的ownerDocument。除了属性之外,DOM还提供了一些方法,如检测是否含有节点的hasChildNodes方法,传入节点,返回布尔值,true为有,false为无。追加节点到尾部的appendChild方法,接收一个要插入的检点作为参数,返回插入的节点。向节点之前插入节点的insertBefore方法,接收参照节点和插入的节点作为参数。替换节点的replaceChild方法,接收要替换的和替换的节点作为参数。删除节点的removeChild方法,接收要删除的节点作为参数。复制节点的cloneNode方法,接收一个布尔值,表示是直线深复制还是浅复制。

Document类型

document是节点中的顶层节点,具有以下特征:nodeType为9、nodeName值为"#document"、nodeValue值为null、parentNode值为null、ownerDocument值为null。document可以表示html和xml文档,不过这里主要讲html文档。document拥有一个documentElement属性,获取对页内html节点的引用,拥有一个body属性获取对body节点的引用,拥有一个doctype属性返回对<!DOCTYPE html>的引用,不过由于浏览器兼容的原因,这个属性用处不是很大,拥有一个title属性,获取和设置标题中的文本,拥有一个url属性,返回页面的url,拥有一个domain属性,返回域名信息,可以通过把这个属性设置为相同的域名,实现框架和子框架之间的通信,需要注意的是,属性设置为松散后,无法在设置会紧绷的,拥有一个referrer属性,返回链接到这个页面的那个页面的url。

posted on 2018-11-02 11:49  木森焱  阅读(382)  评论(0编辑  收藏  举报

导航