【读书笔记】JavaScript|【读书笔记】JavaScript DOM编程艺术 (第2版)

第2章 2.4.1 比较操作符
1、大于(>)
2、小于(<)
3、大于或等于(>=)
4、小于或等于(<=)
判断是否在某一范围的比较,顺序无要求,如

if( num >= 5 && num <= 10 ) 与 if( num <= 10 && num >= 5 ) 写法都可

5、等于(==)
==(等于)容易与=(赋值)混淆,if(a=false)结果为false
==操作符并不严格相等,如:if(false=="")结果为true
6、不等于(!=)
7、全等(===)
8、不全等(!==)
第3章 3.4 节点
文本节点总是被包含在元素节点的内部。
getElementById(id),id值必须放在‘’(单引号)或“”(双引号)里,返回一个对象,特定元素节点。
typeof操作符可以判断类型(对象、方法、字符串、数值等)。
getElementsByTagName(tag),tag值必须放在‘’(单引号)或“”(双引号)里,返回一个数组,一组特定元素节点,注意拼写,加s。
getElementsByClassName(class),HTML5 DOM新增,返回一个数组,一组特定元素节点,注意拼写,加s。
3.5 获取和设置属性
【【读书笔记】JavaScript|【读书笔记】JavaScript DOM编程艺术 (第2版)】getAttribute(attribute),只能通过元素节点对象调用,如果没有该属性,返回null值。
setAttribute(attribute,value),attribute、value值必须放在‘’(单引号)或“”(双引号)里。
第4章 4.4 节点
element.childNodes,返回数组,包含所有类型的节点(元素、文本、属性等)。
node.nodeType,获取该节点类型,1为元素节点,2为属性节点,3为文本节点。
node.nodeValue,获取节点的值,注意:document.getElementsByTagName("p")[0].nodeValue的值为null,因为本身的nodeValue属性是一个空值,包含在元素里的文本是的第一个子节点,因此document.getElementsByTagName("p")[0].childNodes[0].nodeValue才能正确获取的文本。
node.firstChild,等价于node.childNodes[0]。
node.lastChild,等价于node.childNodes[node.childNodes.length-1]。
第5章 5.4 分离JavaScript
可以通过element.event=action使事件脱离HTML文档,如
document.getElementById("a").onlick=function(){...};

5.5 向后兼容
使用对象检测方法时,一定要删掉方法名后的圆括号,如果不删掉,检测的是调用该方法得到的结果,无论方法是否存在。如
function sum(){var a=2,b=3; var sum=a+b; return sum; }

if(sum)表示检测方法sum是否存在,if(sum())则等价于if(5)。
5.6 性能考虑
把所有js脚本合并成一个脚本,可以减少加载页面时发送的请求数量。
根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件。
尽量把所有标签都放到文档的末尾,标记之前,可以让页面先加载再加载js脚本。
第6章 6.3
结构化程序设计:函数应该只有一个入口和一个出口。
但如果一个函数有多个出口,只要这些出口集中出现在函数的开头部分,就是可以接受的。
多个函数同时直接绑定到window.onload事件上时,只有最后一个绑定的函数会被执行。
第7章 7.1
innerHTML属性可以用来读、写某给定元素里的HTML内容,在需要把大段HTML内容插入网页时更适合。不过innerHTML不会返回任何对刚插入的内容的引用。innerHTML与document.write方法都属于HTML DOM,浏览器显示XHTML文档时会忽略innerHTML属性。
7.2 DOM 方法
document.createElement(nodeName),创建元素。
parent.appendChild(child),创建子节点。
document.createTextNode(text),创建文本节点。
7.3
parentElement.insertBefore(newElement,targetElement),parentElement相当于targetElement.parentNode
element.nextSibling,element的下一个兄弟元素。
7.4 Ajax
Ajax,异步加载页面内容,优势是不需要刷新页面就能改变显示内容,减少重复加载页面的次数,核心是XMLHttpRequest对象。
Hijax,渐进增强地使用Ajax。
第8章 8.4
for(variable in array)的含义是对于array数组中每个下标,赋值给variable,因此variable是包含array数组所有下标的数组。例如
var myArr=new Array(); myArr[aa]=a; myArr[bb]=b; myArr[cc]=c; myArr[dd]=d; var key;

for(key in myArr)的得到key={aa,bb,cc,dd},for(key in myArr){var Arr2=myArr[key]; },数组Arr2的结果就是Arr2={a,b,c,d}。
for(i=0; i 8.5
两个标签之间存在换行符,有些浏览器会把这个换行符解释为一个文本节点,如



和之间存在换行,div元素的lastChild有可能为文本节点而不是p节点。所以需要检查nodeType属性。
array[array.length-1],获取数组最后一个值。
8.6
accesskey属性可以把一个元素与键盘上的某个特定按键关联在一起,如HOME对应着一个“返回到本网站主页”的链接。
Windows系统浏览器,快捷键为同时按下Alt+特定按键;Mac系统浏览器,快捷键为同时按下Ctrl+特定按键。
8.7 检索和添加信息
JavaScript只应该用来充实文档的内容,避免使用DOM技术来创建核心内容。
第9章 9.2 style属性
element.style.property,文档的每个元素节点都有一个style属性,style属性包含元素样式,这个属性是一个对象,样式都存放在style对象的属性里。
减号和加号属于保留操作符,不允许出现在函数或变量的名字里。因此element.style.font-family的写法是错误的,要使用驼峰命名法,即element.style.fontFamily,element.style.backgroundColor等。
style属性只能返回内嵌样式,即只有把css style属性插入到html标记里才能使用DOM style属性查询。
style对象的各个属性都是可读写的。
style对象的属性值必须放在引号里,否则认为是个变量。
node.nextSibling,文档中的下一个节点。
9.3
为表格添加斑马线效果:
for(i=0; i

odd相当于开关,此行为false,下一行则为true。
onmouseover/onmousout,鼠标悬停、离开。
element.className,可读写属性。可利用字符串拼接。
9.5
style属性的最大限制是它不支持获取外部CSS设置的样式。
只要有可能,优先选择更新className属性,而不是直接更新style对象的有关属性。
第10章 10.1
variable=setTimeout("function()",interval),setTimeout函数能够让某个函数在经过一段预定时间后才开始执行。第一个参数为字符串,通常为要执行函数的名字,第二个参数是一个数值,以毫秒为单位,设定经过多长时间才开始执行第一个参数给出的函数。通常把setTimeout赋值给一个变量。
clearTimeout(variable),取消“等待执行”队列里的某个函数,需要一个参数,即保存setTimeout调用返回值的变量。
parseInt(string),返回一个整数。
parseFloat(string),返回一个浮点数。
10.2
为避免用户操作时积累setTimeout队列里的事件,先判断setTimeout函数的调用返回值,判断该值是否存在,如果存在则使用clearTimeout清除。
if(elem.t){ clearTimeout(elem.t); //复位 } //执行事件代码 elem.t=setTimeout("function()",interval);

Math.ceil(number),把number向“大于”方向舍入为与之最接近的整数。
Math.floor(number),把number向“小于”方向舍入为与之最接近的整数。
Math.round(number),把number舍入为与之最接近的整数。
“动画”的含义是随时间变化而改变某个元素在浏览器窗口里的显示位置。

    推荐阅读