关于JavaScript DOM 编程艺术这本书

本人在大约接近一年的时间以前购买了关于JavaScript的一些书籍,包括比较有名的《JavaScript高级程序设计》以及《JavaScript DOM 编程艺术》,还有其他的一些!
刚刚看完这本《JavaScript DOM 编程艺术》寻思写点儿东西,给想要购买的小伙伴们一些建议!
关于JavaScript DOM 编程艺术这本书_第1张图片
这本书适合刚刚入门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,编程书籍)