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"。