JavaScript DOM进阶：节点类型与常用扩展方法详解

DOM节点类型概述

DOM（文档对象模型）包含多种节点类型，前文已做过介绍。例如Element类型代表元素节点，Text类型代表文本节点。理解这些基础类型是进行DOM操作的前提。

一 DOM类型

下表列出了DOM中主要的节点类型及其说明： Node：表示所有节点类型的统一接口，但IE浏览器不支持此类型。 Document：表示整个文档对象。 Element：表示HTML或XML中的元素节点。 Text：表示文本节点。 Comment：表示文档中的注释节点。 CDATASection：表示CDATA区域节点。 DocumentType：表示文档类型声明节点。 DocumentFragment：表示文档片段节点。 Attr：表示属性节点。

1.Node类型

DOM1级规范定义了一个Node接口，所有DOM节点类型都必须实现该接口。在JavaScript中，这个接口被实现为Node类型。除了IE浏览器外，其他主流浏览器均可访问到该类型。

2.Document类型

// Document类型代表整个文档，即文档的根节点。该节点是隐藏的，没有对应的具体HTML标签。 document; // 返回document对象 document.nodeType; // 9，表示节点类型值 document.childNodes[0]; // DocumentType，第一个子节点通常是文档类型声明 document.childNodes[1]; // HTMLHtmlElement，即<html>元素

// 若需直接获取<html>标签对应的元素节点对象HTMLHtmlElement，可使用documentElement属性。 document.documentElement; // 返回HTMLHtmlElement对象

// 获取<body>标签的常用旧方法是document.getElementsByTagName('body')[0]，但更简洁的方式是直接访问body属性。 document.body; // 返回HTMLBodyElement对象

// 在<html>标签之前存在文档声明<!DOCTYPE>，它被视为浏览器的第一个子节点。 document.doctype; // 返回DocumentType对象

// Document对象包含一些遗留属性和集合，可帮助快速处理特定任务。 // 常用属性： document.title; // 获取或设置<title>标签的内容。 document.URL; // 获取当前页面的完整URL路径。 document.domain; // 获取当前页面的域名。当页面包含来自不同子域的框架或内嵌框架时，设置document.domain为相同值可解决跨域通信限制，使不同子域的页面能相互访问JavaScript对象。 document.referrer; // 保存链接到当前页面的上一页URL。 // 常用对象集合： document.anchors; // 获取文档中所有带name属性的<a>元素集合。 document.links; // 获取文档中所有带href属性的<a>元素集合。 document.forms; // 获取文档中所有<form>元素集合。 document.images; // 获取文档中所有<img>元素集合。

3.Element类型

// Element类型用于表示HTML中的元素节点。前文已介绍过元素的查找与创建操作。 // 元素节点的nodeType值为1，nodeName为标签名。 // 在非IE浏览器中，元素节点对象会返回具体的元素类型。 元素名 对应类型 HTML HTMLHtmlElement DIV HTMLDivElement BODY HTMLBodyElement P HTMLParamElement

4.Text类型

// Text类型用于表现文本节点类型,文本不包含HTML,或包含转以后的HTML;文本节点的nodeType为3;
// 在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点;
  var box = document.createElement('div');
  var text1 = Document.createTextNode('Mr');
  var text2 = Document.createTextNode('Lee!');
  box.appendChild(text1);
  box.appendChild(text2);
  document.body.appendChild(box);
  alert(box.childNodes.length);    // =>2;两个文本节点;

// 把两个同邻的文本节点合并在一起,使用normalize()即可;
  box.normalize();          // 合并成一个节点;

// 将一个节点实现分离;
  box.firstChild.splitText(3);    // 分离一个节点;

// Text还提供一些别的DOM操作的方法
  var box = document.getElementById('box');
  box.firstChild.deleteData(0,2);       // 删除从0位置开始的2个字符;
  box.firstChild.insertData(0,'Hello');    // 从0位置开始添加指定字符;
  box.firstChild.replaceData(0,2,'Miss');   // 从0位置替换掉2个指定字符;
  box.firstChild.substringData(0,2);      // 从0位置获取2个字符,直接输出;
  alert(box.firstChild.nodeValue);       // 输出操作后的结果;

5.Comment类型

Comment类型表示文档中的注释节点，其nodeType为8，nodeName为'#comment'，nodeValue为注释的具体内容。例如： var box = document.getElementById('box'); alert(box.firstChild); // 可能返回Comment类型节点

6.Attr类型 Attr类型表示文档元素中的属性节点。其nodeType为11，nodeName为属性名，nodeValue为属性值。详细内容可参考前文章节。

DOM扩展功能与属性

二 DOM扩展 1.呈现模式

// 从IE6开始区分标准模式和混杂模式(怪异模式),主要看文档的声明;
// IE为document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式;
// 如果是标准模式,则返回CSS1Compat;如果是混杂模式则返回BackCompat;
  if(document.compatMode == 'CSS1Compat'){
    alert(document.documentElement.clientWidth);
  }else{
    alert(document.body.clientWidth);
  }

2.滚动

DOM提供了一些页面滚动相关的方法。例如，使用scrollIntoView()方法可使指定元素滚动到可见区域。 document.getElementById('box').scrollIntoView(); // 设置指定元素可见

3.children属性

由于子节点中可能包含空白文本节点，不同浏览器对此解释不一致。若只需获取有效的子节点，可使用非标准的children属性。 var box = docuemnt.getElementById('box'); alert(box.children.length); // 获取有效子节点的数量

4.contains()方法

可使用contains()方法判断一个节点是否为另一个节点的后代。 var box = document.getElementById('box'); alert(box.contains(box.firstChild)); // 返回true

DOM内容操作详解

三 DOM操作内容 1.innerText属性

document.getElementById('box').innerText;        // 获取文本内容(如有html直接过滤掉);
  document.getElementById('box').innerText = 'Mr.Lee';  // 设置文本(如有html转义);
  // PS:除了Firefox之外,其他浏览器均支持这个方法;Firefox的DOM3级提供了另外一个类似的属性:textContent;
  // 兼容方法
  function getInnerText(element){
    return (typeof element.textContent == 'string')?element.textContent:element.innerText;
  }
  function setInnerText(element,text){
    if(typeof element.textContent == 'string'){
      element.textContent = text;
    }else{
      element.innerText = text;
    }
  }

2.innerHTML属性

innerHTML属性可以解析并插入HTML字符串。 document.getElementById('box').innerHTML; // 获取文本内容（不过滤HTML标签） document.getElementById('box').innerHTML = '<b>123</b>'; // 插入加粗的123 虽然innerHTML支持插入HTML，但存在作用域限制。例如，通过innerHTML插入的<script>或<style>元素通常不会被执行。 box.innerHTML = "<script>alert('Lee');</script>"; // <script>元素通常不被执行 box.innerHTML = "<style>background:red;</style>"; // <style>元素通常不被应用

3.outerText

outerText在取值时与innerText行为一致，但Firefox浏览器不支持该属性。 此外，赋值操作非常危险，它不仅替换文本内容，还会直接移除当前元素。 var box = document.getElementById('box'); box.outerText = '<b>123</b>'; alert(document.getElementById('box')); // 返回null，因为元素已被移除。不建议使用此方法。

4.outerHTML

// outerHTML属性在取值和innerHTML一致,但和outerText一样,赋值之后将元素抹去;
  var box = document.getElementById('box');
  box.outerHTML = '123';
  alert(document.getElementById('box'));           // null;

// PS:关于最常用的innerHTML属性和节点操作方法的比较;在插入大量HTML标记时,使用innerHTML的效率明显要高很多;
// 因为在设置innerHTML时,会创建一个HTML解析器,这个解析器是浏览器级别的;因此执行JavaScript会快得多;
// 但是,创建和销毁HTML解析器也会带来性能损失,最好控制在最合理的范围内;
  for(var i=0; i<10; i++){
    ul.innerHTML = '<i>item</i>';      // 避免频繁;
  }
  // 完善
  for(var i=0; i<10; i++){
    a = '<li>item</i>';            // 临时保存;
  }
  ul.innerHTML = a;

DOM核心概念总结

四 小结

DOM是一个语言中立的API，用于访问和操作HTML及XML文档。DOM1级规范将HTML和XML文档视为层次化的节点树，开发者可使用JavaScript操作这棵树，从而改变文档的外观和结构。

DOM由各种节点构成，简要总结如下：

1.最基本的节点类型是Node，用于抽象表示文档中独立的部分，其他所有节点类型均继承自Node。 2.Document类型表示整个文档，是分层节点的根节点。在JavaScript中，document对象是Document的一个实例。使用document对象可通过多种方式查询和获取节点。 3.Element节点表示文档中的所有HTML或XML元素，可用于操作元素的内容和属性。 4.此外还有其他节点类型，分别表示文本内容、注释、文档类型声明、CDATA区域和文档片段。