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("
");

这个方式可以避开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页面中的元素
二:childNodes列表
并且如下代码所示

//html部分
//
// 
//

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

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

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

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

DocumentType节点(不重要)

节点可以通过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(不重要)

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

IE8及之前,Safari3.1及更高,Opera和chrome:只为第一条注释创建节点,部位第二条注释创建节点.

IE9+:将第一条注释创建为document.childNodes中的一个注释节点,也将第二条注释创建为document.childNodes中的注释子节点

Safari3.1之前,firefox:完全忽略

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

文档信息

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

title:包含在