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

 1 function loadScriptString(code)
 2 {
 3      var script = document.createElement("script");
 4      script.type = "text/javascript";
 5      try
 6      {
 7           script.appendChild(document.createTextNode(code));
 8      }
 9       catch(ex)
10      {
11           script.text = code;
12      }
13 
14      document.body.appendChild(script);
15 }
16 
17 使用示例：
18 
19 loadStringScript("function sayHi(){alert('Hi,ketty')}");

3.创建动态样式

 1 function  loadStyleString(css)
 2 {
 3     var style = document.createElement("style");
 4     style.type = "text/css";
 5     try
 6    {
 7         style.appendChild(documet.createTextNode(css));
 8    }
 9     catch(ex)
10    {
11         style.styleSheet.cssText = css;
12    }
13 
14     var head = document.getElemtsByTagName("head")[0];
15     head.appendChild(style);
16 }
17 
18 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()

 1 //获取body元素
 2 var body = document.querySelector('body');
 3 
 4 //获取ID为"myDiv" 的元素
 5 var myDiv = document.querySelector('#myDiv');
 6 
 7 //获取类为"selected" 的第一个元素
 8 var selected = document.querySelector('.selected');
 9 
10 //获取类为"button"的第一个图像元素
11 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"。