【读书笔记】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 获取和设置属性

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,因为<p>本身的nodeValue属性是一个空值,包含在<p>元素里的文本是<p>的第一个子节点,因此document.getElementsByTagName("p")[0].childNodes[0].nodeValue才能正确获取<p>的文本。

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规范,浏览器每次从同一个域名中最多只能同时下载两个文件。

尽量把所有<script>标签都放到文档的末尾,</body>标记之前,可以让页面先加载再加载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<length;i++){if(condition) continue},含义是如果符合条件,立刻开始下一次循环。

8.5

两个标签之间存在换行符,有些浏览器会把这个换行符解释为一个文本节点,如

<div>
<p></p>
</div>

</p>和</div>之间存在换行,div元素的lastChild有可能为文本节点而不是p节点。所以需要检查nodeType属性。

array[array.length-1],获取数组最后一个值。

8.6

accesskey属性可以把一个元素与键盘上的某个特定按键关联在一起,如<a href="index.html" accesskey="1">HOME</a>对应着一个“返回到本网站主页”的链接。

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<table.length;i++){
  odd=false;
  for(j=0;j<tr.length;j++){
    if(odd==true){
      tr.style.background="#ccc";
      odd=false;
    }else{
    odd=false;
    }
  }
}

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舍入为与之最接近的整数。

“动画”的含义是随时间变化而改变某个元素在浏览器窗口里的显示位置。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容