《JavaScript Dom 编程艺术》: 优美 DOM 编程

                                         Web 的无所不在是它的魅力。保证任何人都能无障碍地使用它，是一个最基本的原则。

     我非前端人员，后端才是我真正的目标，然而，在师兄的威逼之下，不得已要开始一个后端人员的前端之路....首先第一步是买了这本《Javascript DOM 编程艺术》，然后抽着时间一个星期看完了它。好吧，我承认我跳过了第十二章 ... = = 感觉有编程基础，特别是 C/C++ 基础看起来还是不太费劲的， Javascript 的语法很类似于 C/C++，而且宽松得多， 所以学起来比较顺利。而 DOM 编程主要是在脑海中建立起 DOM 的概念，学会用 DOM 的编程方法去操作文档。JavaScript 确实是很强大的，各种 DOM 操作将网页从静态向着动态转变，带来更好的用户体验，但写起来会比较啰嗦，如果使用了库，比如 Jquery，那真是简洁得令人泪流满面。

     这本书对于  Javascript  编程基础讲得还是不错的，能够循序渐进，每部分都有例子（其实大部分是对同一个例子的不断改进...），对网页设计里面的一些原则都会提到，而且十分强调两个方面，一个是尽量地使用 DOM 方法编程，DOM 方法是更为通用和标准的操作，习惯了 DOM  的编程后一些 DOM 技巧还可以运用在 Web 浏览器之外的应用程序中，第二个是不用 Javascript 写网页的主要内容，Javascript 所做的应该是对原始内容的包裹和用户体验的增强，这不仅是为了考虑禁用 Javascript 或使用低版本的用户，更是为了网页在搜索引擎的评分，让搜索引擎找得到你的内容（搜索引擎看不到 JavaScript 的内容）。这样的多次强调和演示对于新手一开始的编程理念确实有不错的正面影响。不过大量的错误检查确实会让人崩溃，这就体现出库的优秀了。

   总的来说，这本书适合想学 Javascript 的前端新手，也适合想简单了解 Javascript 和 DOM 的后端人员。而后端人员确实应该掌握一些前端知识，以前一涉及一点动态的内容就用 PHP 页面，看了这本书我才意识到大量的行为可以用 Javascript 来完成，比如网页的部分刷新，表单验证等等，用 Javascript 来写这些也可以提高网站性能和改善用户体验。Javascript 确实是个好东西。

下面简单记录从这本书提取的一些信息：

网页抽象为三个层：

（1）结构层

（2）表示层

（3）行为层

三层对应不同的技术：

（1）超文本标记语言（HTML）

（2）层叠样式表（CSS）

（3）JavaScript 和文档对象模型（DOM）

DOM （D: document ,  O: object ,  M: Model 或 Map）

    DOM 是一套对文档内容进行抽象和概念化的方法，把一份文档表示为一棵树。W3C 的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。” 所以 DOM 是一种适用于多种环境和多种程序设计语言的通用型 API，DOM 的技巧可以运用在 Web 浏览器之外的应用环境中。

DOM 三种类型的节点：

元素节点（Element Node）：是 DOM 的“原子”，nodeType 值为 1

文本节点（text node）：文本节点总是包含在元素节点的内部，nodeType 值为 2

属性节点（attribute node）：对元素做更具体的描述，nodeType 值为 3

DOM 获取元素：

//从 elem 开始通过 id 获取元素节点
elem.getElementById(id);

//从 elem 开始通过 tag 获取元素节点
elem.getElementByTagName(tag);

//从 elem 开始通过 class 获取元素节点
elem.getElementByClassName(class);

DOM 获取和设置属性：

//获取对象的 attribute 属性
object.getAttribute(attribute);

//设置对象的 attribute 属性为 value
object.setAttribute(attribute,value);

DOM 动态创建标记：

//创建元素节点
doucument.createElement(nodename);

//将节点添加到某个父亲节点
parent.appendChild(child);

//创建文本节点
doucument.createTextNode(text);

//将新元素 newElement 插入到目标元素 targetElement 的后面，parentElement 是目标元素的父元素
parentElement.insertBefore(newElement,targetElement);

DOM 只能获取内嵌样式，所以采用 Javascript 获取元素的 style 进行设置局限性很大，但你可以用 DOM 设置样式，就可以用 DOM 再把它们找出来。采用赋值操作更新样式：

//将 element 的 CSS property 属性设置为 value
element.style.property = value;

// 向 element 追加一个新的 class
function addClass(element,value){
	if(!element.className){
		element.className = value;
	} else {
		newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

觉得不错的编程技巧或编程思想：

变量命名：在适当位置用下划线隔开，如 my_varivable

函数或方法命名：采用驼峰格式，删除中间的下划线，后面每个新单词改用大写字母开头。如 function convertToDecimal(x) ....

养成这样的命名习惯有利于自己一眼区分出变量和函数。

平稳退化（graceful degradation）：

大意是做出的网页即使某些功能无法使用了，但最基本的操作仍能顺利完成。这是考虑某些用户禁用 JavaScript 的情况，或是使用低版本浏览器根本无法支持时，为了用户在失去某些功能时仍能以较差的用户体验完成所需功能。

渐进增强：用一些额外的信息去包裹原始数据。为了达到平稳退化效果而采用的设计原则。网页设计应该从基础内容写起，比如先用 HTML 标记原始数据，然后在用 CSS 完成基本页面风格设计，接着使用 JavaScript  在行为层改善用户体验，最后你可能发现某个 HTML5 的内容刚好符合你的需求，于是在自己的网页上做了一定升级，用 HTML5 增加一些东西。这样用户浏览器不支持 HTML5 时，至少还能感受到 Javascript 带来的体验，如果他禁用了 Javascript ，那网页基本样式也能看到，基本功能可以使用，如果不支持 CSS，恩，这一定是搜索引擎来了，好吧，它还能看到你网页的标记内容呢，这样才会把你加入某个搜索结果中嘛。

几个 Javascript 的基本函数：

//以毫秒为单位设定多长时间执行函数
setTimeout("function",interval);

//取消保存着某个 setTimeout 函数调用返回值的变量
clearTimeout(variable);

//将字符串里的整数信息提取出来
parseInt(string);

//将字符串里的浮点数信息提取出来
parseFloat(string);

//将数字上取整
Math.ceil(number);

//将数字下取整
Math.floor(number);

//将数字四舍五入
Math.round(number);

可以收藏到函数库的几个函数：

//从 node 开始通过 classname, 获取元素节点，使新老浏览器都能支持
function getElementsByClassName(node,classname)
{
	if(node.getElementsByClassName){
		return node.getElementsByClassName(classname);
	}
	else 
	{
		var results = new Array();
		var elems = node.getElementsByTagName("*");
		for(var i = 0;i < elems.length;i++)
		{
			if(elem[i].classname.indexOf(classname) != -1)
			{
				results[results.length] = elems[i];
			}
		}
		return results;
	}
}

// 将 func 设置为页面加载完毕时执行的函数
function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != ‘function‘){
		window.onload = func;
	} else {
		window.onload = function(){
			oldonload();
			func();
		}
	}
}

//在目标元素之后插入新元素
function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}else {
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}

//获取元素的下一个元素节点
function getNextElement(node){
	return nextElement(node.nextSibling);
}


function nextElement(node){
	if(node.nodeType == 1){
		return node;
	}
	if(node.nextSibling){
		return nextElement(node.nextSibling);
	}
	return null;
}

// 向 element 追加一个新的 class
function addClass(element,value){
	if(!element.className){
		element.className = value;
	} else {
		newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

//检查浏览器是否支持某种类型的输入控件
function inputSupportsType(type){
	if(!doucument.createElement) return false;
	var input = doucument.createElement(‘input‘);
	input.setAttribute(‘type‘,type);
	if(input.type == ‘text‘ && type != ‘text‘){
		return false;
	} else {
		return true;
	}
}

//检查某种属性是否支持
function elementSupportsAttribute(elementName,attribute){
	if(!doucument.createElement) return false;
	var temp = doucument.createElement(elementName);
	return (attribute in test);
}

《JavaScript Dom 编程艺术》: 优美 DOM 编程,古老的榕树,5-wow.com