JavaScript_纯笔记

1、BOM

ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）
则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。多年来，
缺少事实上的规范导致 BOM 有很多问题，因为浏览器提供商会按照各自的想法随意去扩展它。W3C 为了把浏览器中
JavaScript 最基本的部分标准化，已经将 BOM 的主要方面纳入了 HTML5 的规范中。

①window对象

BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，
它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。
这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问 
isNaN()、isFinite()、parseInt()、parseFloat() 等方法。

②全局变量与windows对象属性的差别

抛开全局变量会成为 window 对象的属性不谈，定义全局变量与在 window 对象上直接定义属性还是有一点差别：
全局变量不能通过 delete 运算符删除，而直接在 window 对象上的定义的属性可以

###window.open()/close方法
open方法的四个参数：可以接收4个参数：要加载的URL、窗口目标、一个特性字符串、
一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
后两个参数有很大的兼容性问题

close() 方法仅适用于通过 window.open() 打开的弹出窗口。对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。

③定时器

// 不建议传递字符串
setTimeout("console.log('Hello world!') ", 1000);

// 推荐的调用方式
setTimeout(function() { 
    console.log("Hello world!"); 
}, 1000);

第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。
JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，
就有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。
setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中(添加的过程是异步的)。
如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

④navigator对象

⑤ location对象

location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是 document 对象的属性；
换句话说，window.location 和 document.location 引用的是同一个对象。

⑥history 对象

2、DOM IDL

①interface description language

c++：
	class 派生类名 : 继承方式  基类名
	{
		派生类的成员
	};
	继承方式：public、private和protected，默认处理是public。

②DOM IDL

DOM的接口定义语言

3、DOM规范

正如W3C所定义的，DOM是独立于平台和语言的接口，该接口为程序和脚本提供了对文档的内容、
结构和样式的动态获取和更新的功能。

DOM的出现来自对动态页面的需求，先有DOM的实现（Netscape DOM0），再有各个厂商对DOM实现规范的需求，
再有了W3C Activity Statement对于DOM发展的规范，然后才有了我们所说的“DOM”。

DOM0：不是W3C规范。
DOM1：开始是W3C规范。专注于HTML文档和XML文档。
DOM2：对DOM1增加了样式表对象模型(DOM2)
DOM3：对DOM2增加了内容模型 (DTD 、Schemas) 和文档验证。

DOM0指的是Necscape3.0和IE3.0提供对于HTML文档功能，实现了包括元素(HTML Element)、表单(Form)、
图像(Image)等的接口和方法。DOM0虽然年代久远，某些实现并不符合新的DOM理念，但为了向后兼容，
很多现代浏览器仍然支持DOM0的某些方法和属性。即便某些方法的实现原理有所不同，但提供了可用性。
DOM0出现后，各厂商意识到DOM的前景，纷纷向W3C建议DOM的规范化。
	于是出现了W3C DOM Activity Statement（DOM的活动清单）以及DOM1、DOM2、DOM3规范(Specification)

DOM1 1.0版本发布于1998年10月1日，是第一个DOM规范。DOM1包含两部分:
	DOM1 Core：定义了DOM最基本的接口，包括Document，Node，NodeList等等。
	DOM1 THML：HTML文档是DOM的一种实现，该规范定义了基于DOM1 Core的HTML文档实现。

DOM2规范在2000年11月13日发布，主要包含6个模块，相比于DOM1，DOM2更加丰富，更加完善，
	目前主流浏览器对DOM2有着良好的支持。
	DOM2 Core: 相比于DOM1 Core，DOM2丰富了Document，Node等接口的功能，
	DOM2 View：View提供的是DOM的表现形式，同一个文档源(document source)，可能有不同的表现形式，
				DOM2 View引入了Abstract View和Document View接口。
	DOM2 Event：DOM 事件处理系统规范，DOM1中并未对DOM的事件模型进行定义，
				在DOM2中规范事件模型(Event Model)主要有两个目的：
					1)设计一套通用的事件系统，实现事件处理程序的注册和注销，描述事件的流动(Event Flow)，
						事件的上下文信息(Contextual Information )等；
					2)提供一套规范子集兼容老版本浏览器DOM0的事件实现。
	DOM2 Style：程序和脚本动态地获取和更新DOM的样式，提供包括Style Sheet, 
				Cascading Style Sheet, CSSRule, CSSStyleDeclaration, getComputedStyle接口。
				DOM2 Style的实现基于DOM2 Core和DOM2 View。
	DOM2 Traverse and Range：DOM2 Traverse是关于文档节点遍历的规范，
				包括Treewalker，NodeIterator和NodeFilter等；
				DOM2 Range是关于DOM片段(Document Fragment)操作的规范，譬如DocumentFragment。
	DOM2 HTML：在DOM1 HTML的基础上结合DOM2 Core推出了一些新的接口和属性

DOM3首次发布于2004年4月，主要包括Core、Load and Save、Validation、XPath、View and Formatting、
	Events和Abstract Schemas7个模块。目前主流浏览器对DOM3的支持比较有限

4、DOM事件

①两种绑定方式

(DOM0)1.obj.onclick = fn;	
	
(DOM2)2.
  ie:obj.attachEvent(事件名称，事件函数);
	1.没有捕获(非标准的ie 标准的ie底下有  ie6到10)
	2.事件名称有on
	3.事件函数执行的顺序：标准ie-》正序   非标准ie-》倒序
	4.this指向window
      标准:obj.addEventListener(事件名称，事件函数，是否捕获);
	1.有捕获
	2.事件名称没有on
	3.事件执行的顺序是正序
	4.this触发该事件的对象
	
	
	document.attachEvent('onclick', fn2);
	document.attachEvent('onclick', function() {
		fn1.call(document);
	});
	
	是否捕获 : 默认是false    false:冒泡 true：捕获
	
	document.addEventListener('click', fn1, false);
	document.addEventListener('click', fn2, false);
		
注意
	ie代表了:非标准ie 和 标准ie
	标准代表了:标准ie 和 chrome Firefox等....

②同步this

function bind(obj, evname, fn) {
	if (obj.addEventListener) {//除ie低版本外都可以进入
		obj.addEventListener(evname, fn, false);
	} else {
		obj.attachEvent('on' + evname, function() {
			fn.call(obj);
		});
	}
}

bind(document, 'click', fn1);

③ 两种绑定方式的区别

取消冒泡的手段:event.cancelBubble = true;
	   	    event.stopPropagation();

第一种:默认冒泡,
第一种:一个元素上只能绑定一个同类事件,如果继续绑定的话,第二个事件函数会覆盖第一个


第二种: 
	  attachEvent
	  			       默认冒泡
	  addEventListener    
				      是否捕获 : 默认是false    
				      第三个参数: false:冒泡
						    true：捕获
第二种:一个元素上可以绑定多个同类事件,它们都会被执行

④事件解绑

DOM0:想解除事件就相当简单了，只需要再注册一次事件，把值设成null
		原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，
			也就解除了事件绑定。
			
DOM0事件模型还涉及到直接写在html中的事件:
		因此不会传入event对象，同时，this指向的是window，不再是触发事件的dom对象。
		
DOM2:removeEventListener
	 	解除事件语法：btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡");
	 detachEvent(ie)

⑤事件流

单击蓝色框后，开始事件捕获阶段：
	从最外层的document对象（浏览器其实是从window对象开始的）向内捕获事件，路过红色框时，查看到红色框有事件，
	但是红色框说：“我是在冒泡阶段执行，现在是捕获阶段，等你回来再说吧。”
	接下来是黄色框：“我在捕获阶段执行，就是现在执行！在控制台输“黄色框”吧~~”
接下来到达目标阶段：
	“DOM2级事件”规范要求捕获阶段不会涉及事件目标即我们点击的那个最具体的元素，
	但IE9、Chrome等浏览器都会在捕获阶段触发事件对象上的事件。执行目标对象的事件函数，控制台输出“蓝色框”。
最后是冒泡阶段：
	由目标对象向外传递，到达黄色框，黄色框说：“我在捕获阶段执行过了，你走吧...”
	然后到达红色框，红色框说：“你终于回来了，现在就执行我的事件！”控制台输出“红色框”。
	然后继续向外传播，直到到达document对象后停止。
其他：更改了元素绑定事件代码的顺序，执行顺序也和上面表现的一致。

⑥总结

onclick形式:冒泡
attachEvent:冒泡
addEventListener:第三个参数(false:冒泡;true:捕获)

DOM细节

1. 节点及其类型:
	1). 元素节点
	2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 
	3). 文本节点: 是元素节点的子节点, 其内容为文本. 
	4).	documnet
	
2. 在 html 文档的什么位置编写 js 代码?
	
	0). 直接在 html 页面中书写代码.
		<button id="button" onclick="alert('hello world');">Click Me!</button>
		缺点: 
			①. js 和 html 强耦合, 不利用代码的维护
			②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦

	1). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成, 
	    获取不到指定的节点:
	
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">
			var cityNode = document.getElementById("city");
			//打印结果为 null.
			alert(cityNode);
		</script>
	</head>
	<body>
	......
	
	2). 可以在整个 html 文档的最后编写类似代码, 但这不符合习惯
	
	3). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,　
	    该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
	    
	    <head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
			<title>Untitled Document</title>
			<script type="text/javascript">
				window.onload = function(){
					var cityNode = document.getElementById("city");
					alert(cityNode);
				};
			</script>
		</head>
		<body>
		......

3. 如何来获取元素节点:

	1). **document.getElementById: 根据 id 属性获取对应的单个节点

	2). **document.getElementsByTagName: 
			根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度

	3). document.getElementsByName: 
		根据节点的 name 属性获取符合条件的节点数组, 
		但 ie 的实现方式和 W3C 标准有差别: 
		在 html 文档中若某节点(li)没有 name 属性,　
		则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以. 

	4). 其它的两个方法,　ie 根本就不支持, 所以不建议使用  
		document.getElementsByClassName();
		document.getElementsByTagNameNS();
	
4. 获取属性节点:
	1). **可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
	
	2). **可以直接通过getAttribute/setAttribute/removeAttribute
				 这样的方式来获取和设置属性节点的值

	3). 通过元素节点的 getAttributeNode 方法来获取属性节点,
	         然后在通过 nodeValue 来读写属性值 
	
5. 获取元素节点的子节点(**只有元素节点才有子节点!!):
	1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点
	的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取. 
	2). firstChild 属性获取第一个子节点
	3). lastChild  属性获取最后一个子节点	
	
	
		获取指定节点的所有子节点.一共有三种方式:
				childNodes属性:
						不实用,会取到文本节点
					children属性: 
						实用,会剔除文本节点
				用该指定节点的getElementsByTagName方法(注意不是document):	
						不实用,虽然会剔除文本节点,但只能取一组相同tagNaem的子节点,无法取全
												
			使用firstChild,lastChild来取一个指定元素节点的第一个和最后一个子节点时
						1.会受到文本子节点的影响
						2.我们通常可以使用firstChild的nodeValue属性来获取文本值(当子节点只有文本节点时)
			
	
6. 获取文本节点:
	1). 步骤: 元素节点 --> 获取元素节点的子节点
	2). 若元素节点只有文本节点一个子节点, 
	例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 
	可以先获取到指定的元素节点 eleNode, 
	然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值		



7. 节点的属性:
	1). nodeName: 代表当前节点的名字. 只读属性. 
	**如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
	2). nodeType：返回一个整数, 这个数值代表着给定节点的类型. 
	只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
    3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性
		①. 元素节点, 返回值是 null.
		②. 属性节点: 返回值是这个属性的值
		③. 文本节点: 返回值是这个文本节点的内容	
		
	    
8. 创建一个元素节点:
	1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
	                     方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
                           **新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
                         
9. 创建一个文本节点:
	1). createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.
	                         方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
	                         
10. 为元素节点添加子节点:
	1). appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
	                      方法的返回值是一个指向新增子节点的引用指针.		    
	                      
11. 节点的替换:
	1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
			var reference = element.replaceChild(newChild,oldChild);
			返回值是一个指向已被替换的那个子节点的引用指针
	2). 该节点除了替换功能以外还有移动的功能.  
	3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
	/**
	 * 互换 aNode 和 bNode
	 * @param {Object} aNode
	 * @param {Object} bNode
	 */
	function replaceEach(aNode, bNode){
		
		if(aNode == bNode){
			return;
		}
		
		var aParentNode = aNode.parentNode;
		//若 aNode 有父节点
		if(aParentNode){
			var bParentNode = bNode.parentNode;
			
			//若 bNode 有父节点	
			if(bParentNode){
				var tempNode = aNode.cloneNode(true);
				bParentNode.replaceChild(tempNode, bNode);
				aParentNode.replaceChild(bNode, aNode);	
			}
		}

	}   
	
12. 插入节点:
	1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
  			var reference =  element.insertBefore(newNode,targetNode);
         节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。	 

    2). 自定义 insertAfter() 方法     
       /**
	 * 将 newChild 插入到 refChild 的后边
	 * @param {Object} newChild
	 * @param {Object} refChild
	 */
	function insertAfter(newChild, refChild){
		var refParentNode = refChild.parentNode;
		
		//判断 refChild 是否存在父节点
		if(refParentNode){
			//判断 refChild 节点是否为其父节点的最后一个子节点
			if(refChild == refParentNode.lastChild){
				refParentNode.appendChild(newChild);
			}else{
				refParentNode.insertBefore(newChild, refChild.nextSibling);
			}	
		}
	}
    
    
13. 删除节点:
	1). removeChild(): 从一个给定元素里删除一个子节点
   			var reference = element.removeChild(node);
		返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除. 
		如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。    
		
14. innerHTML属性:
	1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容	
	
15. 其它属性, 参看 API: nsextSibling, 	previousSibling 等