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

时间:2021-03-22 05:04:43

一、要点阐述

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