JavaScript的组成结构梳理

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根节点开始遍历，由以上两种方法确定方向向下遍历。

    
Hello world!
    

        
list item 1
        
list item 2
        
list item 3
    

//想要遍历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事件处理程序：

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()方法。