js学习小结（八）2014.5.6(DOM节点，DOM操作技术)

一 DOM节点

        所有的dom节点都继承自node类。

        node类有以下几个属性：nodeType，nodeName，nodeValue。

        node类的方法：appendChild(newnode),insertBefore(newnode,beforenode),replaceChild(newnode,beReplacedNode),removeChild(beRemovedNode),这些方法必须在支持子节点的node类型中才能使用，如果该类节点不支持子节点就不能使用；

         cloneNode(isDeep);接收一个布尔值作为参数，表示是否深度复制，所谓的深度复制指的是包括复制该节点的子节点。  

使用到的主要有以下几类：

（1）.Element节点 

   nodeType：1，nodeName与tagName值一样都是元素的标签，nodeValue为null。       

（2）.TextNode节点

  nodeType：3，nodeName为“#text”，nodeValue与data属性都可以访问文本节点内的文本。此外该节点还有几个比较常用的方法：

 splitText(offset):从第offset位置开始将文本分割为两部分。

在textNode的父节点上调用normalize();方法将多个文本节点合并为一个。

（3）.Document节点

document有很多功能。

常用方法：1）查找节点方法；getElementById();getElementsByTagName();

                  2）创建节点方法：document.createElement();document.createTextNode();

  3）子节点。body=document.body;html=document.documentElement;doctype=docuement.doctype.

  4) 页面信息：document.title;document.domain;document.url;document.referrer;

  5)  特殊集合：document.images;document.anchors;(有name特性的a标签)document.links;(有href的a标签)document.forms;

  6)写方法：write(),writeln();close();open();

  7)测试一致性：document.implementation.hasFeature("dom功能名称","功能版本号");

二 DOM操作技术

    所有的dom操作都是内存和时间开销比较大的一部分，为了性能，要尽量减少DOM操作。

1.获取dom元素。就是document的查找节点方法。

2.操作dom元素。增删改。

3.操作Script和style元素

    script和style是两个比较特殊的元素，浏览器将这两个元素区别对待。

    注意ie中不能直接操作script和style的子节点，如果想要为内嵌script脚本赋值，不能像其他浏览器那样创建一个textNode节点append到script的childNodes中，而只能通过设置script.text进行设置；同理，如果想要为内联style设置样式数据，需要通过style.styleSheet.cssText属性进行设置。

实例代码如下：

function loadInternalScript(code){  var script=document.createElement("script");  script.type='text/javascript';  try{  script.appendChild(document.createTextNode(code));  }catch(ex){  //IE将script节点和link节点都视为特殊的节点，不允许通过js访问其子节点，不能appendChild，script节点通过text可以设置script的代码，link通过styleSheet.cssText来设置样式代码  script.text=code;  }  document.body.appendChild(script);}

function loadInternalStyleSheet(stylies){var css=document.createElement("style");css.type='text/css';var head=document.getElementsByTagName('head')[0];try{css.appendChild(document.createTextNode(stylies));}catch(ex){css.styleSheet.cssText=stylies;}head.appendChild(css);}

4.创建表格

  说实话，第一次看到如此麻烦的创建表格的方法，以前都是直接拼接字符串。

注意：table和tbody，th都需要document.createElement()进行创造。caption thead  tfoot通过table直接creatCaption  createTHead  createTFoot直接创造的，所有的tr都是通过insertRow插入的，所有的td通过insertCell插入的，所有显示的文本都是文本节点，需要通过docuemtn.createTextNode进行创建。还有一个deleteRow方法。代码如下：

   var data='[{"id":"1","name":"zhangsan", "sex":"F","EnglishScore":"78","MathScore": "90"},{ "id": "2", "name": "lisi", "sex":"M","EnglishScore":"99","MathScore":"67"},{"id":"3","name":"wangwu","sex":"F","EnglishScore":"66","MathScore":"45"}]';       function createTableForJsonArray(data){      var arr=JSON.parse(data);      var table=document.createElement("table");      table.border=1;      table.createCaption().appendChild(document.createTextNode("ScoreTable"));      var tHead=table.createTHead().insertRow(0);        var idTh=document.createElement("th");      idTh.appendChild(document.createTextNode("id"))      tHead.appendChild(idTh);      var nameTh=document.createElement("th");      nameTh.appendChild(document.createTextNode("Name"))      tHead.appendChild(nameTh);      var sexTh=document.createElement("th");      sexTh.appendChild(document.createTextNode("Sex"))      tHead.appendChild(sexTh);      var ESTh=document.createElement("th");      ESTh.appendChild(document.createTextNode("EnglishScore"))      tHead.appendChild(ESTh);      var MSTh=document.createElement("th");      MSTh.appendChild(document.createTextNode("MathScore"))      tHead.appendChild(MSTh);          var tbody=document.createElement("tbody");      var tr,o,temptindex;      for(var i=0,len=arr.length;i<len;i++){         o=arr[i];         tr=tbody.insertRow(i);         temptindex=0;         for(var ii in o){            tr.insertCell(temptindex).appendChild(document.createTextNode(o[ii]));            temptindex++;         }      }      table.appendChild(tbody);      document.body.appendChild(table);    }