【学习笔记】《JavaScript DOM 编程艺术》 ——总结

一、要点阐述

1，程序设计语言分为解释型和编译型两大类，JS属于解释型，在Web浏览器中一边解释一边执行。

2，"//"注释单行，"/*...*/"注释多行。反斜杠"\"对字符进行转义。

3，变量名用下划线，如my_mood，函数名、方法名和对象属性名首选驼峰式，如myFunc。

4，JS作为弱类型语言，字符串和数值的拼接，结果是字符串。

5，对象事例化用new，包括有自主创建的对象，内建对象（如Array,Math,Date）和宿主对象(如Form,Element)。

6，typeof判断操作数是字符串、数值、函数、布尔值还是对象。

7，DOM的工作模式是先加载文档内容，再动态刷新。所以DOM的方法不会改变文档本身的源码。

8，DOM操作分为DOM Core（不专属于JS），HTML-DOM（如.forms,.src,.innerHTML），CSS-DOM（如elem.style.color）。

 

二、DOM Core

1、获取元素

getElementById
getElementsByTagName    //通配符为*
getElementsByClassName  //高版本浏览器支持

//获取节点树关系属性
parentNode
childNodes
firstChild/lastChild
nextSibling

2、节点的属性

//获取节点属性值
nodeType    //1(元素),2(属性),3(文本),8（注释）,9（文档）
nodeName    //元素：标记值；属性：属性名；文本：#text
nodeValue   //元素：null；属性：属性值；文本：文本值

3、元素属性的方法

getAttribute('')
setAttribute('','')  //无则创建，有则更改
removeAttribute('')

4、样式的相关属性

className  //用className去替代style，避免css的加载重绘
elem.style.fontSize等   //CSS-DOM，style对象只包含HTML用style属性声明的样式

5、创建增加元素

//插入大段HTML
document.write()  //需在body内使用<script>标签，应避免使用
innerHTML         //插入或替换HTML代码，HTML-DOM内容

//标准DOM创建
createElement()
appendChild()
creatTextNode()  //创建文本节点
parentElem.insertBefore(newElem,targetElem)
removeChild()

三、WINDOW

//整个页面加载完后执行
window.onload = function(){
　　func1();
　　func2();
　　...
}
//弹出新窗口，要谨慎使用
window.open(url,winName,"width=300,height=400")

四、动画

//interval毫秒后执行
clearTimeoutFunc = setTimeout("function()",interval)
clearTimeout(clearTimeoutFunc)

//每隔一段时间（interval毫秒）执行一次
clearIntervalFunc = setInterval("function()",interval)
clearTimeout(clearIntervalFunc)

附：Web浏览器引擎内核

Webkit        //safari,Chrome等
Gecko         //Firefox
Trident       //IE