JavaScript高程第十章:DOM(上)

Node类型

除了IE(该死的IE),其他所有浏览器都可以访问到Node类型,而JS中所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法.
每个节点都有一个nodeType属性,可以表明节点的类型,我们来看看有哪些类型吧

Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)
nodeName和nodeValue属性则完全取决于nodeType,对于元素节点,nodeName保存的始终为标签名,而nodeValue保存的值始终为null

childNodes属性中保存着一个NodeList对象(类数组对象,并不是Array的实例),NodeList是动态的,是基于DOM结构动态执行查询的结果,我们能通过以下方式来访问子节点.

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

对于NodeList对象,我们还可以转换为数组,如下

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

值得注意,该段代码在IE8及更早版本前是报错的,这是因为IE8及更早版本将NodeList实现为一个COM对象,而我们不能像使用JScript对象那样使用该对象,所以上述代码会导致错误.以下是对于兼容性的解决方法.

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

每个节点还有parentNode属性,该属性指向文档树中的父节点.包含在childNodes列表中的所有节点都有相同的父节点,而childNodes列表中的每个节点之间为同胞节点,可以通过previousSibling和nextSibling属性访问.如果列表只有一个节点,则该节点上述两个属性为null.
父节点与其第一个和最后一个子节点之间也存在特殊关系.父节点存在属性firstChild和lastChild分别指向它们.其中firstChild与childNodes[0]相等,而x.lastChild与x.childNodes[x.childNodes.length-1]相等.

节点中hasChildNodes()方法也是一个有用的方法,在包含节点情况下返回true,否则返回false.

所有节点最后一个属性都为ownerDocument,它指向表示整个文档的文档节点,即#document,可以使我们直接到达顶层.

操作节点

注意:关系指针都是只读的,所以DOM提供了一些函数供我们操作节点.
以下介绍了四种操作方法,都需要先取得父节点,但是需要明白不是所有类型的节点都有/支持子节点.

插入节点

appendChild(node) //向childNodes列表末尾添加一个节点,并在添加后,关系指针会相应更新.

值得注意的是appendChild()添加的节点如果已经是文档的一部分,那么相当于转移节点.

insertBefore(node,null) //参数一为插入节点,第二个参数则为参照节点,设为null则效果与appendChild一样,存在参照节点则插入节点变成参照节点前一个同胞节点(previousSibling)

移除/替换节点

removeChild(oldNode) //移除并非替换节点,返回值为oldNode
replaceChild(newNode,oldNode) //oldNode替换为newNode,oldNode虽然技术上仍然存在,但是文档中没有了它的位置

其他方法

这里有两个方法是所有类型节点都有的,它们就是cloneNode(boolean)和normalize(),我们重点介绍cloneNode()

cloneNode(boolean) //传入一个布尔值,该值决定执行深复制(节点及整个节点树)还是浅复制(仅复制本身)

注意点一:深复制IE9之前版本不会为空白符创建节点,所以深复制时childNodes长度会有所不同.
注意点二:cloneNode()方法只复制特性和子节点(指定情况下),不会复制JS属性如事件处理程序等等(除开IE,存在复制事件处理程序的bug),所以复制前最好先移除事件处理程序.

Element类型

除了Document类型,我们Web编程中最常用的类型就是Element类型啦.
Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问

特征

nodeType值为1
nodeName为元素标签名
nodeValue为null
parentNode可能是Document或Element
子节点可能是Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference

其中nodeName和tagName属性返回相同的值,推荐使用tagName,则表义更清晰,值得注意的是返回值大小写的问题,由于HTML中为答谢,而XML/XHTML则会与源代码保持一致,所以比较时要统一大小写形式.

HTML元素

HTML元素都由HTMLElement类型表示,不直接通过该类型,也是通过它的子类型表示.HTMLElement类型继承自Element并且添加了一些属性如下:

id 元素在文档中的唯一标识符
title 元素的附加说明信息,一般为工具提示条显示
lang 元素内容的语言代码,很少使用
dir 语言方向,ltr为从左到右,rtl则相反
className 与元素class的特性对应,没有设置为class则是因为class为ECMAScript的保留字

注意以上属性的修改并不是所有都会在页面中直观的表现出来,id和lang修改对用户来说是不可见的(假设没有css样式),对title的修改则只会在鼠标移动到元素上时才会显示出来(工具提示条),dir的修改则会在属性重写的那一刻立刻影响页面中的文本,对className的修改则与是否关联了不同的CSS样式有关.

特性

HTML元素每个元素都有一个或多个特性,操作特性的DOM方法如下有三个:

getAttribute()
setAttribute()
removeAttribute()
这三个方法可以针对任何特性使用,包括自定义特性.

但是只有公认的特性才会添加到DOM元素属性上,自定义的特性通常是不存在的(undefined),当然这里又要注意我们的"好朋友"IE啦,它会为自定义特性创建属性.

特殊特性

主要针对getAttribute()方法讲述一下特殊情况.

有两类特殊特性,有对应的属性名,但值与getAttribute()返回的值并不相同

style,通过getAttribute()访问会返回CSS文本,而通过属性访问返回一个对象
onclick这样的事件处理程序,通过getAttribute()访问会返回相应代码的字符串.而属性访问时,则会返回一个JavaScript函数(未指定则为null)

故通常只有取得自定义特性值的情况下,才会使用getAttribute()方法.

注意!:我们的"老朋友"IE7及以前版本中,getAttribute()方法访问上述两个特殊特性时,返回的值与属性的值相同.即getAttribute("style")返回一个对象,getAttribute("onclick")返回一个函数.

设置特性

这里主要讲解下setAttribute()方法,这和getAttribute()相对应.这个方法接受两个参数,要设置的特性名和值,如果特性存在则将值进行替换;不存在则创建并设置相应的值.
值得注意的是,设置特性名会转换为小写.而且直接给DOM元素添加一个自定义的属性并不会让这个属性成为元素的特性.

div.mycolor="red";
div.getAttribute("mycolor"); //这里返回null(IE除外)

移除特性

removeAttribute()方法用于彻底删除元素特性,调用该方法会清除特性的值并完全删除特性.
注意!:IE6及以前版本不支持该方法.

attributes属性

Element类型是使用attributes属性的唯一一个DOM节点类型.在该属性中包含一个NamedNodeMap,与NodeList类似,也是"动态"集合.元素每一个特性都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中.相关方法如下:

getNamedItem(name)返回nodeName属性等于name的节点
removeNamedItem(name)从列表移除nodeName等于name的节点
setNamedItem(node)向列表添加节点,以节点的nodeName属性为索引
item(pos)返回处于数字pos位置处的节点

在该属性中有一系列的节点,每个节点的nodeName就是特性的名称,nodeValue就是特性的值.要取得元素的id特性,可以使用attributes.getNamedItem("id").nodeValue
等同于attributes["id"].nodeValue

调用removeNamedItem()与在元素上调用removeAttribute()效果相同.

setNamedItem()是一个很不常用的方法,该方法可以为元素添加一个新特性,此外需要为它传入一个特性节点.

注意!:IE7及更早版本会返回HTML元素中所有可能的特性,包括没指定的特性.
针对低版本改进:每个特性节点都有一个名为specified的属性,如果为true则意味着要么HTML中指定了相应特性,要么通过setAttribute()设置了该特性,在IE中未设置过的特性都为false,其他浏览器则不会为这类特性生成对应特性节点.

创建元素

document.createElement()方法就可创建新元素.
该方法接受一个参数,就是元素标签名,这个标签名在HTML下不区分大小写,XML中则会区分大小写.

在创建新元素的同时,新元素也设置了ownerDocument属性,此时,还可以操作元素特性,为它添加更多的子节点.
在设置完特性后,由于未添加到文档树,所以一切特性都不会影响浏览器的显示.我们可以通过之前讲到的appendChild(),insertBefore(),replaceChild()方法来进行相应的操作.
一旦添加到文档树,则浏览器会立刻呈现该元素.此后我们的修改都会反应到浏览器中.
注意!(常不考虑):在IE中我们可以通过另一种方式进行创建

document.createElement("<div id=\"myNewDiv\" class=\"box\"></div>");

这个方式可以避开IE7及更早版本中动态创建元素的某些问题.(不能设置动态创建的iframe元素的name特性;不能通过表单的reset()方法重设动态创建的input元素;动态创建的type特性值为"reset"的button元素重设不了表单;动态创建的一批name相同的单选按钮彼此毫无关系)

元素子节点
除了IE,其他浏览器解析代码时会解析空白符为文本节点.我们可以通过nodeType属性的检查来过滤掉它们.

Document 类型

在JavaScript中Document类型表示文档,我们常用的document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面;document对象还是window对象的一个属性,因此可以将其作为全局对象来访问.

特征

nodeType值为9
nodeName为"#document"
nodeValue为null
parentNode为null
ownerDocument为null
子节点可能是一个DocumentType(最多一个),Element(最多一个),ProcessingInstruction或Comment

Document类型可以表示HTML页面或者其他基于XML的文档,不过最常见的应用还是作为HTMLDocument实例的document对象.通过该对象,我们可以获取页面有关信息,操作页面的外观,以及其底层结构.

文档子节点

虽然DOM标准规定Document节点的子节点可以是DocumentType,Element,ProcessingInstruction或Comment,但是还有两个内置的访问其子节点的快捷方式.
一:documentElement属性-始终指向HTML页面中的<html>元素
二:childNodes列表
并且如下代码所示

//html部分
//<html>
// <body></body>
//</html>

var html = document.documentElement;
console.log(html === document.childNodes[0]); //true
console.log(html === document.firstChild);    //true

可见documentElement,firstChild,childNodes[0]指向同一个元素<html>

并且作为HTMLDocument的实例,还有一个body属性,直接指向<body>元素.

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

DocumentType节点(不重要)

<!DOCTYPE>节点可以通过document.doctype属性获取并访问它的信息.
以下是各浏览器支持差别:

IE8及之前:存在文档类型声明,会错误解释为一个注释并把它当作Comment节点;而document.doctype 值始终为null
IE9+及firefox:如果存在文档类型声明,则会将其作为文档第一个子节点;document.doctype是一个DocumentType节点,也可以通过document.firstChild或document.childNodes[0]访问.
Safari,Chrome和Opera:如果存在文档类型声明,则会将其解析,但不作为文档子节点,document.doctype是一个DocumentType节点,但该节点不存在于document.childNodes中.

Comment(不重要)

<!-- 注释1 -->
<html>
  <body>
  </body>
</html>
<!-- 注释2 -->

对于上述注释也在不同浏览器中存在不同.

IE8及之前,Safari3.1及更高,Opera和chrome:只为第一条注释创建节点,部位第二条注释创建节点.
IE9+:将第一条注释创建为document.childNodes中的一个注释节点,也将第二条注释创建为document.childNodes中的注释子节点
Safari3.1之前,firefox:完全忽略

以上的不一致性导致了无论是注释还是DocumentType节点对于我们来说用处十分有限.

文档信息

document对象有属性提供了document对象所表现的网页的一些信息.

title:包含在<title>元素中的文本(浏览器窗口的标题栏或标签页上),但是修改该值不会改变<title>元素.
URL:包含页面完整的URL
domain:包含页面的域名
referrer:保存链接到当前页面的那个页面的URL,如无来源页面则为空字符串.
注意!:这些信息都存在于HTTP头部,只不过我们能通过该属性在JS中访问它们.而且我们只能在遵守规则(不能将这个属性设置为URL中不包含的域,不能将域缩紧如将wrox.com设置为p2p.wrox.com一样(IE8及之后))的情况下设置domain属性.

其中domain属性还是越过跨域安全限制的好办法.

查找元素

主要用到document对象以下方法.

getElementById("id") //接受一个参数,如果找到相应元素则返回该元素,不存在则返回null

//注意!:IE8及较低版本不区分ID大小写/如果存在多个ID则只返回第一次出现的/IE7及较低版本中name值与ID匹配的表单元素会被返回

getElementsByTagName("img") //接受一个参数,为要取得元素的标签名,返回一个NodeList(包含零或多个元素).在HTML文档中,这个方法返回一个HTMLCollection对象,该对象与NodeList非常类似

getElementsByName("name") //只有HTMLDocument类型才有的方法.和上述两个方法相似,也就不解释传入参数之类的啦

HTMLCollection对象

元素数量可以通过length获得,而且我们可以通过.item()和方括号语法[0]/["name特性"]来访问元素.namedItem()方法则可以通过name特性取得其中的元素.

特殊集合

除了属性和方法,document对象还有一些特殊集合.这些集合都是HTMLCollection对象,为访问文档常用部分提供了快捷方式,如下:

document.anchors 包含文档中所有带name特性的<a>元素
document.applets 包含文档中所有的<applet>元素(已不再推荐使用)
document.forms 包含文档中所有<form>元素
document.images 包含文档中所有<img>元素
document.links 包含文档中所有带href特性的<a>元素
该集合始终可以通过HTMLDocument对象访问到.而且是动态的随着当前文档内容的更新而更新.

DOM一致性(分级)

document.implementation属性就是用在检测浏览器实现了DOM的哪些部分.
document.implementation.hasFeature()方法接受两个参数,要检测的DOM功能名称和版本号,如果浏览器支持则返回true.但是这并不代表着实现与规范一致

文档写入

document对象有一个存在很久的功能,将输出流写入到网页中的能力.这关乎到下列4个方法.

write()
writeln()
上面两个方法都是接受一个字符串参数,writeln()额外在字符串写入后再写入一个换行符

注意!:如果要用于写入<script></script>则要对</script>进行转义=></script>,防止script标签被提前闭合导致无法执行;如果在文档接在结束后再调用则会导致整个页面重写.

open()
close()
上述两个方法用于打开和关闭网页的输出流,如果在页面加载期间使用write()和writeln()则不需要用到这两个方法(严格型的XHTML文档不支持文档写入)