DOM以及事件

DOM:

• 1、Node类型:
  1.1节点类型：nodeType
  12种，常见的是元素节点Node.ELEMENT_NODE(1)和文本节点TEXT_NODE(3)
  1.2节点关系：
  访问子节点：
  （1）node.childNodes:保存着一个NodeList对象,可以用node.childNodes[0]或者node.childNodes.item(0)来访问子节点
  （2）node.firstChild和node.lastChild: 访问第一个和最后一个子节点，不存在则为null
  访问父和祖先节点：
  （1）node.parentNode（父）
  （2）node.ownerDocument:表示整个文档的文档节点
  访问同胞节点：
  （1）node.previousSibling和node.nextSibling,不存在则为null
  确定是否包含子节点的方法：node.hasChildNodes();返回值是boolean
  1.3操作节点:
  (1)node.appendChild(newNode);如果newNode是新的节点，那么放在原来的NodeList中的最后一个位置；如果是NodeList原有的节点，则将这个节点移动至最后一个节点。返回newNode。
  (2)node.insertBefore(newNode, canzhaoNode);将新节点插入到canzhaoNode的前面。如果canzhaoNode是null，则和appendChild()一样将newNode放在最后。
  (3)node.replaceChild(newNode, oldNode);将oldNode移除，使用newNode来替换。返回值是被移除的节点。
  (4)node.removeChild(oldNode);将oldNode节点移除，返回值是被移除的oldNode。
  (5)node.cloneNode(ifDeepClone);参数是布尔值，表示深浅复制，如果是深复制，则会把节点的子节点一同复制；不然只会复制当前节点。不会把js事件处理复制过来。一般复制之后，可以通过上面的appendChild()等方法进行操作。

• 2、Document类型：值9 nodeName:"#document" nodeValue:null
  原型链如下：document-HTMLDocument-Document-Node-EventTarget-Object
  document.documentElement、document.body可以直接指向html和body。一般来说，document包含的子节点有html\doctype\注释comment；注释没有太大的用处
  document.title:取得并更改文档标题
  document.URL:当前页面的全部链接；不可设置
  document.domain:当前页面的域名；可以设置，不同子域名间页面通信时，要检查domain是否一致，可以将domain设置为松散型，这样就可以不同子域名进行通信。
  document.referrer:跳转至当前页面的页面的链接；不可设置
  查找元素：
  document.getElementById(“id”);
  document.getElementsByTagName(“tabname”);返回HTMLCollection，标签的集合。引用可以使用doc[0]或者doc[“name”]。name是标记中的name属性。
  document.getElementsByName(“name”);
  特殊的集合（返回的都是HTMLCollection对象）：document.anchors、document.links：所有带有name属性的a标签、所有带有href属性的a标签document.images、document.forms: 所有img标签的集合、所有form的集合
  文档写入：
  document.write(“str”);页面被加载的时候，可以动态的向文档中写指定的字符串。 如果页面已经加载完成后，再写入，则会重写整个页面。也可以动态加载script文件。

• 3、Element类型：值1 nodeName是标签名 nodeValue:null

 var x = document.getElementById("div"); 

(1)访问特性可以通过x.id和x.getAttribute(“id”);一般情况只有访问自定义属性才使用后者;
(2)设置特性:x.setAttribute(“id”, “myId”);或者x.id = “myId”;如果属性已经存在,则替换.不存在则创建.
(3)attributes属性:某个元素节点的所有特性的集合,x.attributes[“id”].nodeValue指的就是id的值myId. attributes.length就是某元素特性的个数.
(4)document.createElement(“div”);创建之后,会被指定ownerDocument,可以指定它的特性.当对其使用appendChild()时,则会立即渲染到浏览器上.
(5)遍历特性的时候,使用for循环,attributes.length
(6)element也可以使用getElementById的方法:x.getElementsByTagName();

• 文档类型: 值3 nodeName:"#text"

nodeValue\data属性:文本内容
节点方法:appendData(text):将text文本加到节点的末尾;
deleteData(offset, count):删除从offset开始的count个文本
insertData(offset, text):在offset的地方加入text文本
replaceData(offset, count, text):替换文本
splitText(offset):分成两个文本节点
subStringData(offset, count):提取指定的文本
length:文本的长度
document.createTextNode(text);创建一个文本节点,以便appendChild
合并同胞文本节点:父元素上使用normalize()方法
分割文本节点:splitText(offset);

• DocumentFragment类型: 文档片段 值11 nodeName:"#document-fragment"

  最大的用处是可以创建一个文档片段,之后将这个片段直接加入到dom树中,无需每次都渲染

 <ul id="list"></ul>  
var frag = document.createDocumentFragment();
var ul = document.getElementById("list");
for(var i=0;i<3;i++>) {
   var li = document.createElement("li");
   li.appendChild(document.createTextNode("item:" + i));
   frag.appendChild(li);
}
    ul.appendChild(frag);   

• DocumentType类型:值10 nodeName:doctype的值

  document.doctype来访问

• DOM操作技术:

（1）动态脚本:(script.src引入外部js文件)

 var script = document.createElement("script");
        script.type = "text/javasript";
        script.appendChild(document.createTextNode("alert(\"请弹出我来!\")"));//或者使用script.text
        document.body.appendChild(script);

（2）动态样式:link可以引入外部样式 style可以直接写css代码
注意:link需要使用href来引入外部css文件.在ie中不能操作style时,可以使用style.styleSheet.cssText
需要在head里面动态加载.
（3）减少DOM操作的次数,因为这样很消耗性能.

DOM扩展:

x是document类型、Element类型、DocumentFragment类型

• 选择符API:

1、x.querySelector(选择符)选择符可以是id\class\element\element+class,返回匹配的第一个元素
2、x.querySelectorAll(选择符):返回一个符合条件的NodeList
3、元素遍历：为了不把空格和文本节点当作是一个child，规定了如下几个属性：
childElementCount:非文本和注释的子元素的个数
firstElementChild、lastElementChild、previousElementSibling、nextElementSibling

• HTML5：

（1）与类相关的getElementsByClassName(“class1 class2”),参数是一个或者多个类名字符串，返回的是一个NodeList
（2） classList属性：div.classList是一个集合类型，可以通过它来添加、删除、替换类型。无需使用className重置类名。
（3）操作类名的方法：
add(value):添加类名
remove(value):移除类名
contains(value):判断是否包含类名，返回boolean
toggle(value):如果类名value存在，则删除；如果不存在，则添加
（4） 焦点管理：
document.activeElement:引用获得了焦点的元素
document.hasFocus():返回boolean,检测文档是否获得了焦点
document.readyState:有两个值，1：onloading表示页面正在加载 2：complete页面加载完成
document.compatMode:有两个值，1：CSS1Compat表示严格模式；2：BackCompat:表示混杂模式
document.head:对head头部的引用，类似于document.body. var head = document.head || document.getElementsByTagName(“head”)[0];
（5）字符集：document.charset用于获取和设置文档字符集；document.defaultCharset用于获取根据浏览器和操作系统的设置默认应该是什么字符集
（6）自定义数据属性："data-"前缀,dom.dataset是这些自定义属性的集合。添加不可见的数据进行其他处理，比如跳转页面时确定来自于那个页面

<div id="myId" data-name="lyn" data-age=32></div>
var div = document.getElementById("myId");
div.dataset.name; //"lyn"
div.dataset.age = 21;//修改自定义属性的值

（7） 插入标记：
innerHTML:读写dom子树，插入script、style标签时，要在前面加上有作用域的节点，_<script>、"<input type=“hidden”><script>",之后再removeChild(firstChild);
window.toStaticHTML(“text”);检查要插入的文本，去掉事件处理程序属性以及脚本节点。
outerHTML 替换的元素包括调用outerHTML的本身
insertAdjacentHTML 指定位置插入html代码
dom.scrollIntoView(),滚动时显示dom节点，参数：true(默认):顶部与视口对齐，false:尽可能底部与视口对齐

• 专有扩展：
  children属性：只包含元素，在没有空白符的情况下，和childNodes一样
  dom.contains(dom1):确定节点的包含关系
  dom.innerText: 读写dom的内部的文本，写：删除dom子节点，替换为文本

DOM2和DOM3:

…

事件：

• 事件流：页面中接收事件的顺序

DOM2级规范的事件流：事件捕获阶段、处于目标阶段、事件冒泡阶段
事件处理程序：
（1）HTML事件处理程序：在html标签中写js代码οnclick=“alert(‘输出我’);” 这个事件处理程序中，event可以直接使用，是事件对象。this指的是当前节点。
缺点：时差问题，页面一显示就点击按钮，但是此时事件处理程序还不具备执行条件；js和html紧密耦合。
（2）DOM0级事件处理程序：

var btn = document.getElementById("e");//事件流的冒泡阶段被处理
btn.onclick = function() {this.id}
btn.onclick = null;   //删除事件处理程序属性

（3）DOM2级事件处理程序：addEventListener();和removeEventListener();
接收三个参数，事件名、函数、布尔值（true:捕获阶段执行；false:冒泡阶段执行）
作用域是当前DOM环境
好处是可以绑定多个事件处理程序
删除事件处理程序的时候，第二个参数必须是相同的函数名，匿名函数无法删除
一般来说，都是在冒泡阶段调用事件处理程序，如果需要截获事件，才在捕获阶段执行

btn.addEventListener("click", handle, false); //handle是函数名

支持的浏览器：Opera,safari,chrome,IE9,firefox
（4）IE事件处理程序：attachEvent(“onclick”, handle)和detachEvent().只在冒泡阶段执行，接收两个参数，注意第一个参数是onclick不是click
作用域是window !!!
也可以绑定多个事件，事件执行的顺序是相反的
移除事件的注意事项和DOM2一样
支持的浏览器：IE,Opera
(5)跨浏览器事件处理程序：检测dom是否存在addEventListener等

• 事件对象：

包含着与事件有关的信息event，事件处理程序执行期间event才存在，执行后被立即销毁
DOM事件对象：
type:事件类型
this始终等于currentTarget,target是目标对象
event.preventDefault();可以阻止默认行为，比如写在onclick中，阻止<a>点击之后跳转到href
event.propagation();可以立即停止事件在DOM层次中的传播
event.eventPhase:用于确定事件流正处于事件的哪个阶段。1：捕获，2：处于目标对象，3：冒泡
IE事件对象：
与创建事件处理程序的方式有关，attachEvent注册：需使用window.event来初始化event变量
returnValue:false取消默认行为
srcElement:等同于dom中的target
cancelBubble:取消事件冒泡
跨浏览器事件对象：整合eventUtil对象，判断相应的属性是否存在

• 事件类型：

  UI事件：用户界面发生的事件
  1: load:加载完成后执行的事件
  (1)使用js添加onload事件：window.addEventListener(“load”, func, false);
  (2) 在html中为dom指定事件属性：onload = “func()”
  image方面，给新图像注册事件时，顺序：创建图像-注册事件处理程序-(放到dom树)-指定src;重要的是要在指定src之前先指定事件,因为指定src后就开始下载图像
  script、link:指定src以及放到文档后，才开始下载文件；可以在文件下载完成后，指定要执行的事件
  2:unload:
  页面完全卸载之后执行的事件
  error:
  resize: 浏览器窗口发生大小变化发生事件，最大化和最小化也会执行，注意不要加入计算量大的代码，因为可能会频繁执行
  abort:加载中断事件
  select:
  scroll: scrollTop和scrollLeft，同resize
  (3)焦点事件:
  focus获得焦点发生；blur失去焦点发生；均不冒泡。focusin\focusout都冒泡。
  (4)鼠标、滚轮事件：
  click:单击或者按下enter键
  dblclick:双击
  mousedown:用户按下了任意的鼠标，不能通过键盘触发
  mouseenter:光标从元素外部首次进入元素内部，不冒泡，并且光标移动到后代元素上不回触发
  mouseleave:光标从元素内部移动到外部，不冒泡，并且光标移动到后代元素上不回触发
  mousemove:鼠标在元素内部移动时重复触发
  mouseover:光标从此元素移动到另一个元素
  mouseout: 光标从此元素移出到另一个元素
  mouseup：释放鼠标按钮时触发
  客户区坐标位置：click事件的event对象中：
  视口的鼠标点击位置：clientX,clientY
  页面的鼠标点击位置：pageX,pageY；clientX+scrollLeft=pageX
  屏幕坐标位置：screenX, screenY
  修改键：event.shiftKey\ctrlKey\altKey\metaKey，如果为true,那么就是按下鼠标的同时，也按下了相应的键
  对于mousedown，按下了哪个按钮（鼠标左键、右键、中间的滚轮），有event.button属性的值来表示；
  mousewheel事件：event.wheelDelta的正负确定滚轮方向，120的倍数，opera正负相反；火狐是3的倍数。
  触摸设备：不支持双击事件dblclick，只会放大页面并无法更改回来；
  两手指放在屏幕移动，触发scroll,mousewheel事件
  (5)键盘事件、文本事件：
  keydown:按下任意键触发，会重复触发
  keypress:按下字符键触发，会重复触发
  keyup:释放键盘上的键触发，会重复触发
  textInput:将文本插入到文本框前触发。更容易拦截文本
  (6)变动事件：
  删除节点和插入节点等，会触发变动事件。DOM结构发生变化
  (7)html5事件：
  beforeunload:卸载页面前，执行的操作。比如弹出“你确定要关闭此页面吗？”
  DOMContentLoaded:文档dom树加载好后直接触发，不等待js\image\css等文件加载完成。
  readystatechange:文档加载状态的事件？？

• 内存和性能：

  事件委托：
  只指定一个事件处理程序，就可以管理一类的所有事件，利用事件冒泡机制，可以使用target.id来区分目标。处理“事件处理程序过多”的问题，从而减少内存，减少dom访问次数
  移除事件处理程序：使用innerHTML替换带有事件属性的节点（执行之后事件属性置为null）、卸载页面包括页面切换以及页面刷新（unload清除事件处理程序，事件委托的话，清除就更加容易）

• 模拟事件(…)