逻辑学DOM 看完永不忘记

1. 什么是Web API和DOM

• Web API

• API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能（可以理解成封装好了的函数）
  Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）

• DOM

  • 文档对象模型(Document Object Model),对html文档页面进行编程控制的系列API接口
  • 通过文档对象模型（DOM）可以对 HTML 元素进行添加、移动、改变或移除的方法和属性

2. DOM树

学习Web API 需要从以下几个方面去考虑：
      1.API的作用是什么？
      2.API的参数是什么？
      3.API的返回值是什么？

文档：一个页面就是一个文档，DOM中使用ducument表示

元素：页面中所有标签都是元素，DOM中使用element

节点：网页中所有的内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示

注意：DOM把以上所有内容都看作对象。其中顶级对象是document。

3. 事件

	事件三要素：								//例子 鼠标点击DIV 弹出警示框
        1.触发源：什么触发了事件				// 触发源：DIV
        2.触发事件：如何触发					//触发事件：鼠标点击
        3.事件处理程序：触发后做什么 			//事件处理程序：弹出警示框

4. 获得触发源

        获取触发源的两种方式：
                1.通过获取元素的方法(页面中所有标签都是元素，DOM中使用element)
                2.通过获取节点的方式(网页中所有的内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示)

 获取元素的五种方法：
	 1.通过ID名获取
	 	document.getElementById('ID名称')
	 2.通过标签名获取
	 	document.getElementsByTagName('标签名')
	 3.通过类名获取(此方法为HTML5新增方法)
	 	document.getElementsByClassName('div')
	 4.通过querySelector选择器获取
	 	document.quertSelector('选择器')		//仅获取第一个元素对象 
	 	document.quertSelectorAll('选择器')
	 5.获取特殊元素
	 	document.body						//获取body元素
	 	document.documentElement			//获取HTML元素

• 以上五种获取元素的方式命名规则均为驼峰命名法，即首字母要大写。
• document.getElementsByTagName(‘标签名’) 、document.getElementsByClassName(‘div’)、document.quertSelectorAll(‘选择器’) 返回值均以伪数组的方式储存。

获取节点：
	1.父节点						
		sonNode.parentNode
	2.子节点						
		parentNode.childNodes				//标准，返回值包含了所有节点，包括元素节点、文本节点等
		parentNode.children					//非标准，但返回值只包含元素节点 
	3.兄弟节点（使用较少）
		node.previousSibling					//上一个节点
	    node.nextSibling						//下一个节点

5. 触发事件

常见DOM触发事件一般分为两种：1.鼠标事件   2.键盘事件

1.鼠标事件
		onclick					//鼠标点击左键触发
		onmouseover				//鼠标经过触发
		onmouseout				//鼠标离开触发
		onfocus					//获得鼠标焦点触发
		onblur					//失去鼠标焦点触发
		onmousemove				//鼠标移动触发
		onmouseup				//鼠标弹起触发
		onmousedown				//鼠标按下触发
		oncontextmenu			//阻止鼠标右键菜单(配合阻止默认行为)
		onselectstart			//禁止鼠标选取内容(配合阻止默认行为)
		onselect				//禁止复制(配合阻止默认行为)

注意: 1.onblur、onfocus、onmouseenter、onmouseleave事件是非冒泡事件

2.键盘事件
	keyup				//某个键盘按键松开触发
	keydown				//某个键盘按键按下时触发,只要不松开会一直触发
	keypress			//某个键盘按键按下时触发,不识别功能键(ctrl,上下箭头等),只要不松开会一直触发

注意：1.如果三者同时执行，先执行keydown,再执行keypress,最后执行keyup
           2.三者通过ASCALL对按键进行识别，但是keyup和keydown不识别英文大小写

6. 处理程序的两种方式

       注册处理程序分为传统方式和监听方式两种

//1.传统方式
var div = document.quertSelector('div');		//获取触发源
div.onclick = function() {
	//处理程序
}

//2.监听方式
var div = document.quertSelector('div');		//获取触发源
/*格式：
 *	div.addEvenListener(type, listener[, useCapture])
 *	参数： 
 *		 1.type:事件类型字符串，比如 click、mouseover，注意不要带on
 *       2.listener：事件处理函数，事件发生时，会调用该监听函数
 *       3.useCapture：可选参数，是一个布尔值，默认为false
 */
 div.addEvenListener('click',function () {
 		//处理程序
 },false)

两者区别：
       1.传统注册方法需要带on，监听方法不需要带on
       2.传统注册方式只能给一个触发源绑定一个事件，当绑定多个事件时，后面的事件会覆盖前面的事件
       3.监听方法只支持IE9以上版本，且同一个触发源可以绑定多个事件，且按照绑定顺序执行。
       4.传统方法和监听方法均可以传递参数，且监听方法可以外部调用，调用时不需要加括号（注意）

7. 处理程序

        针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作。

1.创建

 1. document.write
 2. innerHTML
 3. creatElement

2.增

1. parenNode.appendChild(ChildNode)						//插入父元素的最后一位
2. parenNode.insertBefore(ChildNode,指定元素)			//插入到指定元素的前面

3.删

1. removeChild(ChildNode)

4.改

1. 修改元素内容
	element.innerText		//从起始位置到终止位置的内容，但不识别标签，同时会去掉空格和换行
	element.innerHTML		//从起始位置到终止位置的内容，识别标签，保留空格和换行
2. 修改自身属性
	element.属性名			// a.href img.scr等
3. 修改样式属性
	element.style.属性名		//div.style.backgroundColor	
4. 修改表单元素
	对于表单标签，innerHTML和innerText 是无效的，修改方式类似修改自身属性

注意：1.修改样式属性命名规则为驼峰命名法；
           2. 修改style样式操作后，产生的是行内样式，权重：行内>镶嵌>外部调用
           3.实际开发中更多使用element.innerHTML

5.查

1. DOM提供的API方法： getElementByld  getElementsByTagName 古老用法不太推荐
2. H5提供的新方法:    querySelector. querySelectorAll 提倡
3. 节点操作获取元素:  parentNode、 children 、previousElementSibling、nextElementSibling 提倡