首页 > 代码库 > JavaScript(5)——DOM

JavaScript(5)——DOM

DOM操作

  为了写这一篇随笔真的是费了好多力气,虽然还是写不好。本来是从周一都开始写的,但是周二周三忙着去帮忙招新了,哈哈哈。感觉做自己喜欢的事特别好玩,虽然挺忙的。看着那些小鲜肉,感觉自己真的老了啊。感觉太久没有更博了,学长估计要打我了。恩~不过我还是很开心。这次写的DOM操作,内容有点多也有点乱。理解还是没有那么透彻,不过一点点积累吧,总会有懂的时候。加油!

【DOM】

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

【节点层次】

DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。文档节点是每个文档的根节点。文档元素是文档的最外层元素,文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。

【Node类型】

DOM1级定义了一个Node接口,该接口将由DOM中所有节点类型实现。这个Node接口在JavaScript中作为Node类型实现的;除了IE之外,在其他所有浏览器中都可以访问到这个类型。JavaScript中所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法,但不是所有节点类型都受到web浏览器的支持。

每个节点都有一个nodeType属性,用于表明节点的类型。节点类型由在Node类型中定义的12个数值常量(详情见高程书第三版P248)来表示,任何节点类型必居其一。

要了解节点的具体信息,可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。对于元素节点,nodeName中保存的始终是元素的标签名,而nodeValue的值始终是null。

每个节点都有一个childNode属性,其中保存着一个NodeList对象。NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。NodeList对象的独特之处在于,它实际上是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反映在NodeList对象中。

 要想在IE中将NodeList转换为数组,必须手动枚举所有成员。下列方式也可以将NodeList转换为数组:

function convertToArray(nodes){    var array=null;    try{         array=Array.prototype.slice.call(nodes,0);//针对非IE浏览器      }catch(ex){       array=new Array();       for(var i=0;i<nodes.length;i++){           array.push(nodes[i]);        }    }    return array;}

操作节点

appendChild(),用于向childNodes列表的末尾添加一个节点。如果传入到appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来的位置转移到新的位置。而如果想把节点放在在列表中某个特定的位置,可以使用insertBefore()方法(参数为要插入的节点和作为参照的节点)。

replaceChild(要插入的节点,要替换的节点)方法。用该方法插入一个人节点时,该节点的所有关系指针都会从被他替换的节点复制过来。被替换的节点仍然在文档中,但它在文档中已经没有了自己的位置。

【Document属性】

JS通过Document类型表示文档。在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。而且,document对象是window对象的一个属性,因此可以将其作为全局对象来访问。

文档的子节点

DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingIn-struction或Comment,还有两个内置的访问其子节点的快捷放肆。第一个就是documentElement属性(始终指向HTML页面中的<html>元素),另一个就是通过childNodes列表访问文档元素。document对象还有一个body属性,直接指向<body>元素。

所有浏览器都支持document.documentElement和document.body属性。

浏览器对document.doctype的支持差别很大,具体如下:

*IE8及之前版本:如果存在文档声明类型声明,会将其错误地解释为一个注释并将把它作为Comment节点;而document.doctype的值始终为null。

*IE9+及Firefox:如果存在文档类型声明,则将其作为文档的第一个子节点;document.doctype是一个DocumrntType节点,也可以通过document.firstChild或document.childNodes[0]访问同一个节点。

*Safari、Chrome和Opera:如果存在文档类型声明,则将其解析,但不作为文档的子节点。document.doctype是一个DocumentType节点,但该节点不会出现在document.childNodes中。

文档信息

作为HTMLDocument的一个实例,document对象还有一些标准的Document对象所没有的属性。比如title属性,包含着<tiele>元素中的文本。其中URL(包含页面完整的URL)、domain(包含页面的域名)、referrer(保存着链接到当前页面的那个页面的URL)。所有这些信息都存在于请求的HTTP头部。这三个属性中,只有domain是可以设置的。

查找元素

查找元素的方法可以有getElementById()和getElementsByTagName()还有getElementsByName()这三种方法。

特殊集合

document.anchors,包含文档中所有带有name特性的<a>元素;

document.forms,包含文档中所有的<from>元素;

docuemnt.imges,包含文档中所有的<img>元素;

docuemnt.links,包含文档中所有带有href特性的<a>元素;

文档写入

将输出流写入到网页中的能力。这种能力主要有write()、writeln()、open()和close()。其中 write()和writeln()方法都接受一个字符串参数,即要写入到输出流的文本。write()会原样写入,而writeln()则会在字符串末尾加一个换行符(\n)。方法open()和close()分别用于打开和关闭网页的输出流。

【Element类型】

用于表现XML和HTML元素,提供了对元素标签名、子节点及特性的访问。

要访问元素的标签名可以使用nodeName属性,也可以使用tagName属性;这两个属性会返回相同的值。

取得特性

操作特性的DOM方法主要有三个,分别是getAttribute()、setAttribute()和removeAttribute()。这三个方法可以针对任何特性使用。

有两类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()返回的值并不相同。第一类特性就是style,用于通过CSS为元素指定样式。在通过getAttribute()访问时,返回的style特性中包含的是CSS文本,而通过属性来访问它则会返回一个对象。第二类特性是onclick这样的事件处理程序。通过getAttribute()访问,则会返回相应代码的字符串,而访问onclick属性时,则返回一个JS函数(没有指定时,返回null)。

与getAttribute()对应的方法是setAttribute(),这个方法接受要设置的特性名和值这两个参数。通过setAttribute()方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一换成小写形式。

removeAttribute(),用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性。

Element类型是使用attributes属性的唯一一个DOM节点类型。该属性中包含一个NamedNodeMap,与NodeList类似,也是一个动态的集合。

使用document.createElement()方法可以创建新元素。且只接受一个参数,即要创建元素的标签名。

【Text类型】

文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容。里面的内容不能包含HTML代码,会被转义。

可以通过nodeValue属性或data属性访问Text节点中包含的文本。这两个属性中包含的值相同。

可以使用document。createTextNode()创建新文本节点,这个方法接受要插入节点中的文本这一个参数。如果两个文本节点是相邻的同胞节点,那么这两个节点中的文本就会连起来显示,中间不会有空格。

用normalize()方法可以将相邻文本节点合并起来。

用splitText()方法可以将一个文本节点分为两个文本节点。

【Comment类型】

注释在DOM中是通过Comment类型来表示的。Comment类型与Text类型继承自相同的基类,因此它拥有除了splitText()之外的其他方法。

【DocumentFragment类型】

所有节点类型中,只有DocumentFragment在文档中没有对应的标记。虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。文档片段中的节点不属于文档树。通过appendChild()或insertBefore()将文档片段中内容添加到文档中,即使文档片段作为参数,也只会将子节点添加过去,文档片段本身永远不会成为文档树的一部分。

【DOM操作技术】

【动态脚本】

在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本。创建动态脚本一共有插入外部文件和直接插入JavaScript代码这两种方式。动态加载的外部JS文件能够立即运行。

【动态样式】

指的是在页面刚加载时不存在的样式;动态样式是在页面加载完成后动态添加到页面中的。

如果专门针对IE编写代码,务必小心使用styleSheet.cssText属性。在重用同一个<style>元素并再次设置这个属性时,有可能会导致浏览器崩溃。同样,将cssText属性设置为空字符串也可能导致浏览器崩溃。

【使用NodeList】

NodeList对象都是“动态的”,这就意味着每次访问NodeList对象,都会运行一次查询。

 

JavaScript(5)——DOM