JavaScript DOM进阶方法

// 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);       // 输出操作后的结果;

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

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')"<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是语言中立的API,用于访问和操作HTML和XML文档;

DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结构;
DOM由各种节点构成,简要总结如下:
1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node;

2.Document类型表示整个文档,是一组分层节点的根节点;在JavaScript中,document对象是Document的一个实例;

使用document对象,有很多种方式可以查询和获取节点;

3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性;

4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;