javascript学习笔记（二）

1.DOM 注释节点

   在FireFox、Safari、Chrome 和 Oprea 中，可以访问Comment类型的构造函数 和 原型。IE8中，注释节点被视为标签名为"!" 的元素，可以使用

getElementsByTagName() 取得注释节点。IE9没有把注释节点当成元素，可以使用HTMLCommentElement的构造函数来表示注释。

2.动态创建脚本

   文本节点技术指定脚本

   var script = document.createElement("script");

   script.type = "text/javascript";

   script.text = "function sayHi(){alert('hi')}";    //兼容IE,使用text属性

   document.body.appendChild(script);

   标准的添加DOM节点的方法  使用 appendChild();

   

function loadScriptString(code)
{
     var script = document.createElement("script");
     script.type = "text/javascript";
     try
     {
          script.appendChild(document.createTextNode(code));
     }
      catch(ex)
     {
          script.text = code;
     }

     document.body.appendChild(script);
}

使用示例：

loadStringScript("function sayHi(){alert('Hi,ketty')}");

 3.创建动态样式

function  loadStyleString(css)
{
    var style = document.createElement("style");
    style.type = "text/css";
    try
   {
        style.appendChild(documet.createTextNode(css));
   }
    catch(ex)
   {
        style.styleSheet.cssText = css;
   }

    var head = document.getElemtsByTagName("head")[0];
    head.appendChild(style);
}

loadStyleString("body{background-color: red}");

针对IE编写代码时，务必小心使用styleSheet.cssText属性，在重用同一个<style>元素并再次设置这个属性 或者 将 cssText属性设置为空字符串时 可能导致IE崩溃。

4.操作表格

5.DOM1级将HTML 和 XML 文档看作一个层次化的节点树，使用javascript操作节点树，进而改变底层文档的外观和结构。

6.区分 NodeList、HTMLCollection 和 NamedNodeMap。

7.对DOM的两个主要拓展是SelectorsAPI 和 HTML5，此外还有 Element Traversal(元素遍历)规范。

  SelectorsAPI Level1的两个主要方法：querySelector() 和 querySelectorAll()。

  在浏览器兼容性方面：

  IE8+,FireFox 3.5+,Safari 3.1+,Chrome,Oprea 10+

  举例：

  a.  querySelector()

//获取body元素
var body = document.querySelector('body');

//获取ID为"myDiv" 的元素
var myDiv = document.querySelector('#myDiv');

//获取类为"selected" 的第一个元素
var selected = document.querySelector('.selected');

//获取类为"button"的第一个图像元素
var  img = document.body.querySelector('img.button');

Tips: 区别 通过Document 类型和 Element 类型调用querySelector()方法获取元素。

 前者调用时，会在文档元素的范围内查找匹配的元素，而后者调用上述方法时，只会在该元素的后代元素的范围内查找匹配的元素。

  b.   querySelectorAll()

  返回值为NodeList的实例。

  能够调用该方法的类型包含：Document、DocumentFragment 和 Element。

8.元素遍历，对于IE9及之前的版本不会返回文本节点，其他浏览器都会返回文本节点。在使用childNodes 和 firstChild 等属性时的行为不一致。

9.  Element Traversal规范

    支持该规范的浏览器有IE9+,FireFox3.5+、Safari4+、Chrome 和 Opera10+。

    Element Traversal API 为DOM元素添加了新属性。

10.getElementByClassName()方法

    retrun  NodeList的实例

    所有返回值为NodeList实例的DOM方法都存在性能问题。

11.classList 属性是新集合类型 DOMTokenList的实例，支持该属性的浏览器有FireFox3.6+ 和 Chrome。

    删除全部类名和重写全部类名需要用到className。

12.HTML5中新增了辅助管理DOM焦点的功能：document.activeElement属性。

     注：元素获取焦点的方式有 页面加载、用户输入（通常是按Tab键） 和 代码中使用 focus()方法。

     判断文档是否获得焦点的方法：document.hasFocus()。

13.查询文档获知哪个元素获得了焦点，以及确定文档是否获得了焦点，这两个功能最重要的用途是提高web应用的无障碍性。

14.IE中，标准模式：document.compatMode的值等于"CSS1Compat", 混杂模式：document.compatMode的值等于 "BackCompat"。