【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记_javascript.dom编程艺术非扫描-CSDN博客

本文链接：https://blog.csdn.net/Creabine/article/details/50300591

经过前一段时间HTML&CSS的学习，感觉视频加读书是一个比较不错的学习方法，两者相辅相成，互相补充，所以也准备看看关于JavaScript的书。

2015年12月14日，之前使用韩顺平老师的教学视频学习了JavaScript，复习了之前的学习笔记后，我发现看视频理解虽然没问题，但是很多细节，关键词，都没能记住，而且对于对象，DOM变成的理解都不够深入，只是简单的知道它们能够实现什么而已。所以决定看看书，边读边记梳理一下学过的JavaScript知识。

阅读了3天之后，发现这本书似乎看的太早了，其中讲了许多DOM变成的思想，能感觉到作者的编程方式十分严谨，提出了内容、样式、行为完全分离；渐进增强；平稳退化等思想，还有一些比较重要的常用函数。

但是这本书作为入门书籍，看到后边发现越来越难以理解，第一本JavaScript书看这个感觉不太合适，到第八章的时候已经很多地方看不懂了，所以先看到第八章为止。改看【head first Javascript】这本，把这本看完之后，应该能比较全面的了解JavaScript，到时候再回过头来看这本书好了。

1.在HTML中引入JavaScript时，最好的做法是把<script>标签方式HTML文档的最后，</body>标签之前：

注意：这个例子中的<script>标签中没有包含传统的 type="texy/java script"属性。因为脚本默认是JavaScript，所以没必要再指定这个属性。

2.JavaScript与HTML注释方式不用，建议最好使用//单行和/**/多行注释。

3.好的编程习惯：命名变量时用_下划线来分隔单词，命名函数时用驼峰法（大写字母）来分隔单词。

4.JavaScript中有三种方法可以获取元素节点：

1）.getElementById（）返回对象

2）.getElementsByTagName（）它将返回一个对象数组数组

这里的TagName是元素名，可以通过.length获得元素个数；还可以使用.getElementsByTagName（）[i]来取得其中的第i+1个元素；若用通配符“*”号，则会返回HTML文档中所有的元素。

3）. getElementsByClassName（）返回对象数组

HTML5中新增的功能，可以通过class属性中的类名来访问元素，比较新的方法，某些DOM实现中可能还没有。

注意：此方法还可以用来查找使用了多个类的元素，查找时，不同的类名之间用空格分隔即可，顺序无所谓。

5.getAttribute（）对象名.getAttribute（属性名）

它将返回该对象该属性的值

setAttribute（）对象名.setAttribute（属性名，目标值）

它将把该对象该属性的值修改为目标值；若原先没有这个属性，则先创建该属性再设置为目标值。

通过上边五个方法，使用DOM可以获得并且修改文档中任何元素的任何属性。

6.检查某个数据是否为null：

7.第四章讲了如何制作简单的图片库，通过点击链接显示不用的图片与文本描述，以后会用得到。几个新的DOM属性：

8.平稳退化：在制作网页的时候，要考虑若用户使用的浏览器不支持，或者禁用了JavaScript的时候，如何让网页的功能不受影响。为此，要学习css，将JavaScript与HTML文档分离。

9.为了让脚本有良好的向后兼容性，即保证较老的浏览器也能够正常浏览网页，要在JavaScript中加入对象检测：再使用特定的属性和方法之前，先确定它是否存在。

1）测试方法是否存在：

if(!document.getElementsByTagName){

return false;

}

if(!document.getElementById){

return false;

}

2）同时，在JavaScript脚本中，最好加入元素存在性测试，加入这个测试的好处在于，如果以后该元素不在了，JavaScript也不会出错。测试元素是否存在：

if(!document.getElementById("元素ID")){

return false;

}

10.Web的性能优化：

1）尽量减少访问DOM：

例如：

if(document.getElementsByTagName("a").length>0){

var links=document.getElementsByTagName("a");

for(var i=0;i<links.length;i++){

//对每个链接进行处理

}

上边这段代码，获取了所有的a元素，看是否大于0，然后再获取了所有的a元素，再遍历处理，这里重复了两次获取所有a元素的操作，浪费了一次搜索，虽然能执行但不是最优性能。最好简化如下：

var links=document.getElementsByTagName("a");

if(links.length>0){

for(var i=0;i<links.length;i++){

//对每个链接进行处理

}

2)尽量减少标记，不要白白增加DOM树的规模，这样会增加遍历查找特定元素的时间。

3）尽量将脚本合并在同一个js文件中，引用太多js文件会增加加载页面时发送的请求数量。

4）将<script>标签放在文档最后，</body>标签之前，这样页面会先加载显示，最后再加载脚本，给用户的感觉是页面出现的速度更快了。

5）压缩脚本：在最后上线之前，把脚本中不必要的字节，如空格，注释等全部删除，从而减小整体文件的大小。压缩案例：

11.将JavaScript脚本完全从HTML文件分离之后，需要在网页加载完成时调用函数，此时可以使用window.onload事件，在网页加载完毕后调用所需的函数，但是如果需要调用的函数比较多，就需要共享onload事件，使用下边的函数来调用网页加载完成时需要调用的函数即可。详见第六章，100页。据说这个函数很实用，贴在这里以便以后查看：

function addLoadEvent(func){

var oldοnlοad=window.onload;

if(typeof window.onload!="function"){

window.οnlοad=func;

}else{

window.οnlοad=function(){

oldonload();

func();

}

12.理想情况下JavaScript脚本不应该对HTML的内容和结构做太多的假设，所以很多地方需要最好做检查。但是在实际工作中，可以根据HTML文档是否在你的掌控范围之内，来自行决定是否做这些检查。

13.通过DOM方法动态的创建元素，将页面看做一个DOM节点树，想要增加HTML标记，就是给DOM树增加节点，并放在合适的地方：

1）创建一个新元素

使用document.createElement("元素名");

2）创建了新元素之后，要把它引入DOM

将新元素赋值给一个变量是个好习惯：var para=doucment.createElement("元素名")

要插入DOM树，简单的方法是让这个节点成为DOM树现有节点的某个子节点。这里使用：parent.appendChild("child"); 其中child已经赋值给了para，parent还没有，使用DOM方法得到想插入的那个位置的父节点就好了。

14.书中用上边的例子创建了一个P元素，我们还要在P元素里边加入文本，才有意义。这里使用：document.createTextNode("text");创建了一个文本之后同样使用parent.appendChild("child")来确定位置，这时的父元素就是刚才的P元素了。

15.13和14两点完成了：1.创建P 2.P放入HTML 3.创建text 4.text加入HTML。因为parent.appendChild("child")能够用来连接尚未成为文档树的一部分的节点，这里的顺序还可以优化为：1.创建P和text 2.使用parent.appendChild("child")把text绑给P 3.把P放入HTML。例如：