关于JavaScript DOM 编程艺术这本书

本人在大约接近一年的时间以前购买了关于JavaScript的一些书籍，包括比较有名的《JavaScript高级程序设计》以及《JavaScript DOM 编程艺术》，还有其他的一些！
刚刚看完这本《JavaScript DOM 编程艺术》寻思写点儿东西，给想要购买的小伙伴们一些建议！
在这里插入图片描述
这本书适合刚刚入门DOM操作的人，是一本比较详细和基础的入门书。自己看完感觉还是不错的，但是这本书的出版时间是2011年3月，时间上看已经比较久远了，所以很多的方法都有些过时，但是作者谨慎的编程方式，滴水不漏的写法还是让人感觉很棒！
里面的一些重点我也整理成了文档，下面就是个人的一些小笔记！

DOM（document object model）文档对象模型

JavaScript嵌入HTML文档中的方法主要是三种
1.直接添加到head标签中的script标签内
2.使用外部文件的方式，在head标签的script标签内添加src指向特定的js文件
3.使用script标签将外部文件/直接代码嵌入到HTML中body标签的最下面

对象分为内建对象和宿主对象：
内建对象：直接使用new操作符进行声明，创造出的对象
宿主对象：是在JavaScript脚本中预先定义好的对象，比如from、image等

节点分为多种：
文本节点：也就是包含文本的标签引出的节点
元素节点：标签的名字就是元素的名字，也就是标签
属性节点：在标签中，存在着各种的属性，这也可以被获得

获取节点的方式：
getElementById( ); 使用该方法获取到给定id的节点
getELementsByTagName( ); 获取到文档中某一个标签节点的全部
getElementsByClassName( ); 获取到给定class的节点
childNodes( ); 获取一个节点的所有子节点
firstChild( ); 获取第一个子节点
lastChild( ); 获取最后一个子节点

设置节点的属性：
object.getAttribute(“attribute”); 获取到object节点类型的attribute属性
Object.setAttribute( “attribute”, “value”); 改变object节点内attribute属性的value值
nodeType; 获取节点的类型，元素节点:1、属性节点:2、文本节点:3
nodeValue; 获取文本节点的值，但是注意获取的对象需要精确到该文本内
innerHTML; 可以读/写给定元素内的HTML内容

创建节点的属性：
document.createElement(“nodeName”); 创建一个nodeName节点元素
document.createTextNode(“txt”); 创建一个文本节点

插入节点：
object.appedChild(object); 将一个节点插入到另一个节点的子节点上
Object.insertBefore(newElement, tagetElement); 将新节点插入到旧节点的前面

object.insertAfter(newElement, tagetElement){  //获取新节点和原有节点
	var parent = targetElement.pargetNode;     //获取原有节点的父节点
	if(parent.lastChild == targetElement){     //判断父节点的最后一个子节点是不是原有节点
		parent.appenChild(newElement);         //是就直接插入最后
	}else{
		parent.insertBefore(newElement, targetElement.nextSibing);  
	}                                          //不是就将新节点插入原节点的下一个兄弟节点的前面
}

自定义insertAfter( ); 将新节点插入到旧节点的后面

事件处理函数：
onmouseover事件：鼠标悬停在元素上时触发
onclick事件：鼠标点击时触发的事件
Onmouseout事件：鼠标离开时触发的事件

JavaScript兼容写法，注意支持“平稳退化”功能，也就是当浏览器不支持JavaScript脚本时，也能正常浏览网站。
很多时候需要判断一个对象是否存在，然后再对该对象进行操作

function a(){
	if( document.getElementById ){             //判断浏览器是否支持JavaScript
    	if( document.getElementById(“div”) ){  //判断是否存在该节点
        //操作
		}
	}
}

出于性能考虑的因素，当js代码中需要访问DOM结构时，尽量将该节点元素放置在一个变量上，调用时也仅调用该变量。循环调用DOM对于浏览器性能要求极高，每次调用DOM，浏览器都会搜索整个DOM数。
代码压缩工具：
Douglas crockford 的JSMin ( http://www.crockford.com/javascript/jsmin.html )

文档中的每一个元素节点都存在一个style属性，该属性可以在DOM层面改变前面CSS层设置的属性。
Style属性只能获取和修改HTML层内嵌的style属性，对于外部文件的CSS和head中style标签获取不到！
当需要引用CSS中带有中间连接线的属性是，DOM推荐采用驼峰写法，有些浏览器在DOM层使用连接线写法无法识别。

CSS中overflow属性：visible(不裁剪溢出)、hidden(裁剪溢出)、scroll(隐藏溢出，并添加滚动条)、auto(自适应)

onload事件：(书中比较经典的一个封装方法)

function onload( func ){  						  //加载到即触发
	   var oldonload = window.onload;             //获取到window内的onload方法
	   if( typeof window.onload != ‘function’ ){  //判断处理函数有没有绑定函数
	   		 window.onload = func;                //没有就直接添加进去
		}else{
  			window.onload = function( ) {         //有就添加进现有指令的末尾
  			oldonload( );
  			func( );
		}
	}
}

除了上面写的onload事件意外，书中还有一些封装好的方法，但是鉴于现在有了更新的方法使用，所以个人就不一一都打出来了，有兴趣的朋友可以找来这本书看看！

关于JavaScript DOM 编程艺术这本书

猜你喜欢