JavaScript阅历了严酷的合作，至今已统治了web天下，如今体系梳理一下相干的学问。
JavaScript能够分为三部份：ECMAScript、DOM和BOM。
一、ECMAScript是JavaScript的中心,划定了这门言语的数据、语法、构造等基本概念。
Global是ECMAScript最顶级的对象(兜底对象),但体如今代码中它是不存在的。在JavaScript剧本中运用此对象,会报错(not defined),然则ECMAScript划定Number、Boolean、Object、NaN、Math等对象都是Global对象的属性，对应的语法在此不做睁开。
二、DOM是文档对象模子,是ECMAScript操纵HTML的API。
DOM
DOM运用节点来把HTML以及XML文档形貌成一个多层次的节点构造。
节点具有的通用属性和要领：nodeType nodeName nodeValue childNodes parentNode previousSibling nextSibling fistChild lastChild ownerDocument ||要领 hasChildNodes() appendChild() insertBefore() replaceChild() cloneNode()
经常使用的节点范例：Document(9)、Element(1)、Text(3)、Doctype(10)范例。
Document范例：document对象是其实例对象，是window的属性，示意全部HTML页面。
document对象的特有属性：documentElement(html节点) body(body节点) title URL(当前地址栏显现的url) domain(当前页面的域名) referrer(连接到当前页面的url)
document对象特有要领：getElementById() getElementByTagName() getElementByName(含有name属性值)
Element范例：一切的经常使用标签，<html>、<head>、<div>等标签。
特别属性和要领：id、class等，getAttribute() setAttribute() removeAttribute() createElement()–建立一个元素节点。
Text范例：示意能够按字面意义诠释的纯文本内容，能够是转义后的HTML字符，不能包含HTML代码。
特别属性和要领：createTextNode() normalize()–去除空的文本节点以及兼并两个相邻的文本节点 splitText(num)–将一个文本节点根据传入的位置值分隔成两个文本节点
DOM的扩大：(SelectorsAPI和HTML5两部份)
SelectorsAPI部份
querySelector()和querySelectorAll()要领：Document和Element范例节点挪用。
eg.var target = document.querySelector(‘.abc/#abc/div’);//querySelectorAll()获得的是鸠合。
HTML5部份
getElementsByClassName()要领、scrollIntoView()要领（相当于锚点定位）
DOM2和DOM3(在DOM1基础上引入了更多的交互才能)：
DOM2级款式部份
①经由历程style对象接见css属性(经由历程style标签在HTML中定义的属性)，属性含中划线改成驼峰
document.getElementById(“abc”).style.width = “100px”;
document.getElementById(“abc”).style.backgroundColor = “red”;
②cssText属性：设置多项属性变化最快速的体式格局
document.getElementById(“abc”).style.cssText = “width: 10px; height: 20px; color: red;……”
③getComputedStyle()要领：(三种定义体式格局)盘算后的款式的取值
var testItem = document.getElementById(“abc”)
document.defaultView.getComputedStyle(“testItem”).width//只读属性，不可变动设置。
④元素大小
偏移量：offsetHeight(元素可见高度+高低边框高度+程度转动条宽度)、offsetWidth、offsetLeft(元素左边框间隔其父元素的间隔)、offsetRight【都为只读属性，每次接见从新盘算】
客户区大小：clientWidth(元素内容宽度+摆布边框宽度)、clientHeight【都为只读属性，每次接见从新盘算】
转动大小：scrollHeight(元素可见+转动掉的+隐蔽掉的的高度)、scrollWidth、scrollLeft(向左转动掉的间隔)、scrollTop
getBoundingClientRect()要领：该要领返回一个对象，包含四个属性left、right、top、bottom，示意相对视口的位置（当前浏览器时刻的左上角为(0,0)）
DOM2级遍历
NodeIterator范例和TreeWalker范例
document.createNodeIterator(root, whatToShow, filter, false)要领建立NodeIterator实例,个中root为遍历的出发点，whatToShow为显现的节点范例(特定值)，filter为显现节点的过滤器函数(自定义)，末了一个参数可疏忽。
NodeIterator范例有个要领：nextNode()和previousNode(),示意深度遍历的方向(向前、向后)
遍历的历程：从给定的root根节点最先遍历，由以上两种要领肯定方向向下遍历。
<div id="test">
<p><b>Hello</b> world!</p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
//想要遍历div元素中的一切元素
var testItem = document.getElementById("test");
var iterator = document.createNodeIterator(testItem, NodeFilter.SHOW_ELEMENT, null, false);
var node = iterator.nextNode();
while(node!=null){
alert(node.tagName);
node = iterator.nextNode();
}
//输入 DIV P B UL LI LI LI
//若只想输出li标签，可经由历程定义过滤器函数完成
var filter = function(node) {
return node.tagName.toLowerCase() == 'li'? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_SKIP;
}
//NodeFilter.FILTER_ACCEPT示意接收该节点，NodeFilter.FILTER_SKIP示意跳过该节点TreeWalker范例包含了NodeIterator范例的功用，更壮大的是遍历方向的多样性
parentNode()、firstChild()、lastChild()、nextSibling()、previousSibling()
过滤器的属性，增添一个NodeFilter.FILTER_REJECT示意跳过该节点包含该节点的全部子树。
DOM2局限掌握(略)
DOM事宜（JavaScript与HTML交互的桥梁）
DOM2级事宜划定：事宜流—事宜捕捉阶段->目的阶段–>事宜冒泡阶段（可在一、三阶段操纵事宜）
事宜处置惩罚顺序:
①HTML事宜处置惩罚顺序：
<div id="test" onclick="alert('hellow world')"></div>
<div id="test" onclick="sayHi()"></div>
function sayHi(){
alert("hellow world")
}
//瑕玷，js和HTML耦合度高，加载HTML代码时js代码未加载（时差），作用域能够差别②DOM0级事宜处置惩罚顺序：
var testItem = document.getElementById("test");
testItem.onclick = function() {
alert("hellow world")
};
//移除事宜处置惩罚顺序 testItem.onclick = null;③DOM2级事宜处置惩罚顺序：
testItem.addEventListener("click", function(){
alert("hellow world")
},false);
//三参true示意捕捉阶段处置惩罚事宜，false冒泡阶段处置惩罚，经由历程removeEventListener()移除事（仅限定名函数）IE事宜处置惩罚顺序：
testItem.attachEvent("onclick", function(){});事宜对象（event对象）
触发某个DOM事宜时，会发作一个event对象，内里纪录著一切与事宜有关的信息。
event经常使用属性：currentTarget(当前元素)、target(事宜目的)==>无事宜托付时currentTarget=target=this，发作托付时==>currentTarget=this=事宜注册元素(平常父元素)，target=事宜目的元素(子元素)
阻挠特定事宜的默许行动：在event.cancelable == true时，用event.preventDefault()要领
阻挠事宜的冒泡行动：事前检察event.bubbles == true,示意支撑冒泡，用event.stopPropagation()。
事宜范例（待续）
①window对象下的团体事宜：
load(可发作在img、script标签上，重要发作在window对喜欢谁人上)、unload、resize、scroll
②核心事宜：blur、focus(均不支撑冒泡)
③鼠标和滚轮事宜:
9个鼠标事宜mousedown、mouseup、click、dbclick、mouseenter、mouseover、mouseleave、mouseout、mousemove，一个滚轮事宜mousewheel。
鼠标的位置信息：event中的clientX、clientY肯定鼠标的视窗位置，pageX，pageY肯定鼠标的页面位置(包含发作转动的部份)，screenX、screenY肯定鼠标的物理屏幕位置。
click事宜历程：mousedown->mouseup->click
dbclick事宜历程：mousedown->mouseup->click->mousedown->mouseup->dbclick
Android和iOS装备：不支撑dbclick事宜，轻击触发mousemove事宜。
无障碍性（略）
④键盘事宜
keydown（按恣意键触发），keypress（按恣意可影响输入字符键触发）、keyup（开释按键触发）–以上可取到哦输入的键码，如ASCII码。
textInput事宜：相当于keypress事宜，差别的是前者需可编辑地区触发，后者核心事宜触发，前者需现实字符键触发，后者删除键也能够，对象中有data属性，保留输入的字符的字符串示意。
⑤触摸和手势事宜
触摸事宜：touchstart、touchmove（手指滑动时触发，此事宜默许转动，可在此阻挠转动事宜-preventDefault()）、touchend.
在挪动端触摸屏幕发作的事宜依次为：touchstart->mouseover->mousemove->mousedown->mouseup->click->touchend.
手势事宜：两只手指触摸屏幕时(统一元素)会发作手势，gesturestart(一个手指在屏幕上，另一只手指触屏时发作)、gesturechange(两只手指在屏幕上，任何一个手指挪动时触发)、gestureend(任何一个手指从屏幕移开时触发)
事宜托付：基于事宜的冒泡机制，把子元素的事宜托付给上级元素处置惩罚，减少了冗余代码，增强了页面机能。（对一类事宜起码可定义一次，比方全部文档在最外层定义一个click事宜）
三、BOM是浏览器对象模子,是ECMAScript操纵浏览器的API。
window是BOM的中心对象，示意一个浏览器实例。它还充当着ECMAScript中的Global对象，因而网页中定义的变量、对象、函数等都是它的属性。
window对象浏览器相干的属性和要领：
screenLeft和screenTop示意窗口相对屏幕的位置(moveTo()和moveBy()示意挪动窗口的要领)。
innerWidth和innerHeight示意视窗的大小(resizeTo()和resizeBy()示意转变视窗的要领)。
open()和close()要领示意翻开和封闭某一URL的要领。
setTimeout()和setInterval()示意延时挪用和间歇挪用要领(毫秒数示意此毫秒后将使命添加到使命行列)。
alert()、confirm()和prompt()为体系弹出提示框要领。
对象：
location对象：是window的属性，也是document的属性，即为运用统一属性。
https://test.com.cn:8080/search/#info?wd=javascript(protocol「https：」、host「test.com.cn:8080」、hostname「test.com.cn」、port『8080』、pathname「search」、hash『info』、search「?wd=javascript」、href『完全url』和assign()、replace()、reload(),八个属性三个要领)。
navigation对象：纪录浏览器相干参数。
screen对象：纪录显现器相干参数。
history对象：go()、back()、forward()要领。
