javascript DOM 编程（读书笔记）

最新推荐文章于 2023-05-27 15:34:11 发布

aaa333qwe

最新推荐文章于 2023-05-27 15:34:11 发布

阅读量287

点赞数

分类专栏： JavaScript学习目录

本文链接：https://blog.csdn.net/aaa333qwe/article/details/68945545

版权

JavaScript学习目录专栏收录该内容

72 篇文章 1 订阅

订阅专栏

第二章 js的语法

1、变量为字符串时，如果字符串中有单引号或者双引号，可以通过 \ (反斜线)对字符串中的引号进行转义。

2、布尔类型不是字符串，不能用引号括起来。

3、存放数据的首选的方式：将数据保存到对象中。关联数组类似于创建了Array对象的属性。不推荐这种方式。

4、用对象代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们。这大大提高了脚本的可读性。

5、数值可以通过 + 和字符串进行拼接，拼接后的数据类型是字符串。

6、比较 false == ""; 结果为true。因为相等运算符认为 false 和空字符串所表示的意义是相同的。只有通过全等运算符才可以，比较变量的类型。

7、while 与 if 的唯一的区别是：只要给定的条件的求值结果为真，while 后面的花括号中的代码就会反复的执行下去。

8、函数就是一段多次使用的代码脚本。函数不仅能够（以参数的形式）接收数据，还能够返回数据。函数的真正的价值在于我们可以把它当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量。

9、变量和函数的命名：在命名变量的时候，用下划线来分隔各个单词；在命名函数的时候采用驼峰命名法。

10、记住无论何时使用变量都要先进行定义。

11、如果在一个函数中使用了var 定义一个变量，那么这个变量就是局部变量；反之不用var声明会被当做全局变量！

12、对象就是由一些属性和方法组合在一起构成的数据实体。

13、宿主对象：不是由javascript语言本身提供的，而是由它的运行环境所提供的。具体到web应用，就是浏览器所提供的一些预定义的对象。

14、javascript中的节点包含了元素节点、文本节点、属性节点。

15、文档中的所有的元素的数据类型就是对象。例如 ul 、li、等等...

16、可以通过 document.getElementsByTagName("*")来获取页面中的所有的元素。

17、getElementsByClassName(" XX XX XX") 同一个元素包含多个类名的时候用空格分隔多个元素。

18、getAttribute() 方法不属于document对象，不能通过document对象进行调用，它只能通过元素节点进行调用。

19、当判断数据是否为null可以等价为是否存在，因此，可以 if( something != null ) 等价于 if( something ).

20、setAttrbute 所作出的修改不会反映在文档本身的源代码中，这种“表里不一”的现象源于DOM的工作模式：先加载静态资源，然后在动态刷新，动态刷新不会影响文档的静态内容。

21、“第一级DOM”的优势：可以不必费心记那些元素的那些属性可以用之前的老方法去设置；可移植性比较好，DOM是一种适用于多种环境和多种程序语言的通用型API。

22、在HTML页面中的javascript代码需要包含在引号中，只要各条语句之间用分号隔开就可以了。

第五章最佳实践

1、在网页编写中的原则：

<1> 平稳退化,确保网页在没有Javascript的情况下也能正常地工作。图片库特别适合这样。

eg: <a href="http://www.baidu,com/"

οnclick="popUp(this.getAttribute('href');

return false;">Example</a>

备注：在此实例中，即使javascript 不起作用，也可以顺利地执行，主要是针对那些禁用了javascript的搜索机器人。

<2> 分离javascript

<3> 向后兼容

实现方法：对象的检测，通过不理解返回false eg: if(!method) false；浏览器嗅觉技术,由于浏览器的造假以及浏览器嗅探脚本的越来越复杂，因此正逐渐被淘汰。

<4> 性能的考虑：尽量减少访问DOM节点和HTML中的标签的嵌套层级；合并和放置脚本，可以减少加载页面时发送的请求的数量。位于<head>块中的脚本会导致浏览器无法并行加载其他的文件（如图像和其他的脚本）。一般来说，根据HTTP规范，浏览器每次从同一个域名下最多只能同时下载两个文件，把所有的<script>标签放在文档的末尾，在</body>之前，可以让页面变得更快。最后压缩脚本，例如删除不必要字节，变量名短些，空格注释删掉。

代码压缩工具：

2、标记良好的内容就是网站的一切。

3、如果想用javascript给某个网页添加一些行为，就让javascript代码对这个网页的结构不存在任何的依赖。

4、如果一个函数有多个出口，只要这些出口集中出现在函数的开头就可以。

5、最好不要使用onkeypress 事件处理函数。 onclick 事件处理函数已经能够满足。虽然它是“ onclick ” 但是它对键盘访问的支持也相当的完美。

6、浏览器在呈现正宗的XHTML文档的时候会直接忽略掉innerHTML属性的。 innerHTML属于HTML的专有的属性。

7、无论何时使用creatElement方法，就应该把新创建的元素赋给一个变量。

第七章重回图片库

1、原生js写insertAfter() m方法

// DOM没有提供insertAfter()方法
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
// 如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.appendChild(newElement);
}
else {
parent.insertBefore(newElement, targetElement.nextSibling);
// 如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面
}

}

2、在为onreadystatechange 指定函数引用的时候，不能在函数名的后面加括号。因为加括号表示立即调用函数，而我们在此只是想把函数自身的引用赋值给 onreadystate-change 属性。这里的Ajax请求注意同源策略。

3、目前，各大搜索引擎网站的搜索机器人，还几乎不支持javascript。

4、缩略语标签 <addr title="Hypertext Markup Language "> HTML </addr>

5、在使用lastChild属性的时候，有些浏览器会把换行符解释为一个文本节点

6、谨记：javascript脚本只应该用于充实文档的内容，要避免使用DOM技术创建核心的内容。

7、每一个标签都是一个对象，有许多相对应的属性，style属性是一个对象。

8、当你要在javascript中引用一个中间带减号的CSS属性的时候，应该采用驼峰命名法，例如 font-family 变为 DOM属性 fontFamily.

9、只有把CSS style 属性插入到标记里，才可以用DOM style属性查询这些信息。在外部样式表中声明的样式不会进入到style 对象，在文档的<head>部分声明的样式也是如此。并且 style 对象的属性值永远是一个字符串。

10、

function addLoadEvent(func){
var oldonLoad = window.onload;
if(typeof window.onload!='function'){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}

addLoadEvent函数主要是完成如下的操作：

1、把现有的window.onload事件处理函数的值存入到oldonload中。

2、如果在这个处理函数上还没有绑定任何函数，就将该函数添加给它。

3、如果在这个处理函数上已经绑定了一些函数，就把该函数追加到现有指定的末尾。

通过addLoadEvent函数，只需要调用该函数就可以进行绑定了。

11、与其使用DOM直接改变某个元素的样式，不如通过javascript代码去更新这个元素的class属性。简单来说就是更新className的属性， className的属性是一个可读可写的属性，凡是元素节点都有这个属性。但有一点不足是设置某个元素的class属性的时候将替换该元素原有的class 设置。

第十章用javascript实现动画效果

1、setTimeout 能够让某一个函数在经过一段预定的时间之后才开始执行。

2、可以用clearTimeout函数清除积累在setTimeout队列里的事件。

3、javascript允许我们为元素创建属性，像创建一个变量，但区别是这个变量专属于某个特定的元素。eg: element.property = value; element.foo = "far";