DOM

1 节点

每个节点基本都有四个属性
nodeName
元素的标签名，以大写形式表示，只读

nodeValue
Text节点或者Comment节点的文本内容可以读写
文本节点 & 注释节点

nodeType
该节点的类型，只读

attributes
element节点的属性集合
** 节点的一个方法**
Node.hasChildNodes()
返回布尔值，判断此元素是否有子节点 （包括文本/注释等节点，包括空格回车换行）

节点类型nodeType

• 元素节点 1
• 属性节点 2
• 文本节点 3
• 注释节点 8
• document 9
• DocumentFragment 11

	<div> 
    // 文本节点
    <strong>// 元素节点
      <span>1span>
    strong>
     // 文本节点
    <span> // 元素节点
    span> // 文本节点
    <em>// 元素节点
    em> // 文本节点
  div>
  // 7个节点

  <div> 
    // 文本节点
     // 注释节点
     // 文本节点
    <span> // 元素节点
    span> // 文本节点
    <em>// 元素节点
    em> // 文本节点
  div>
	// 7个节点

---

## 对节点的增删改查

查

遍历节点树

• parentNode -> 父节点（最顶端的parentNode为#document）
• childNodes -> 子节点们
• firstChild -> 第一个子节点
• lastChild-> 最后一个子节点
• nextSibling ->后一个兄弟节点
• previousSibling -> 前一个兄弟结点

基于元素节点数的遍历

• parentElement -> 返回当前元素的父节点（ie不兼容）
• children -> 只返回当前元素的子节点
• node.childElementCount === node.children.length
  当前元素节点的子元素节点
• firstElementChild -> 返回的是第一个元素节点 (IE不兼容)
• lastElementChild -> 返回最后一个元素节点 (IE不兼容)
• nextElementSibling/previousElementSibling
  返回有一个/前一个兄弟元素节点

// 手动写children 方法
    function getElementChild(node) {
      var temp = {
        length: 0,
        push: Array.prototype.push,
        splice: Array.prototype.splice
      }
      var child = node.childNodes;
      var len = child.length;
      for (var i = 0; i < len; i++) {
        if (child[i].nodeType === 1) {
          temp.push(child[i])
        }
      }
      return temp;
    }

//  根据传入参数返回前一个或者后一个兄弟元素节点
   function retSibling(e, n) {
      while (e && n) {
        if (n > 0) {
          if (e && e.nextElementSibling) {
            e = e.nextElementSibling
          } else {
            for (e = nextSibling; e && e.nodeType != 1;e = nextSibling);
          }
          n--
        } else {
         if(e && e.previouseElement) {
         	e = e.previousElementSibiling
         } else {
			for (e = e.previousSibling; e && e.nodeType != 1; e = e.previousSibling)
		}
          n++
        }
        return e
      }
    }
  }

2元素

DOM 查找

• document 代表文档
• document.getElementById("") // ie8一下 id不区分大写小
• document.getElementsByTagName("") // 标签名
• document.getElementsByClassName("")// 类名
• document.getElementByName("") // Name名
• dcoument.querySelector("") // css选择器， ie8一下没有
• document.querySelectorAll("") // css选择器

querySelector,querySelector内容不是实时改变

增

• doucment.createElement(); 增加元素节点
• document.createTextNode(); 增加文本节点
• document.createComment(); 增加注释节点
• document.createDocumentFragment()

插入节点

• PRAENTNODE.appChild() // 括号里写节点 在父元素追加节点
• PRAENTNODE .insertBefore(a,b)// insert(a),before(b)插入于b节点之前

// appChild()
//
`
 var div = document.getElementsByTagName("div")[0];
    var text = document.createTextNode("阿里巴巴");
    var span = document.createElement('span')
    div.appendChild(text);
    div.appendChild(span)
    var text1 = document.createTextNode('发家致富');
    span.appendChild(text1)
    span.appendChild(text)     // append是剪切操作 ，会把div里的节点拿出来
    /*

    	 
    	“阿里巴巴”
    	"发家致富"
    	
   	
   	*/

删除

• preant.removeChild() // 父节点删除子节点
  把元素剪切出来了，返回被删掉的节点
• child.remove() 无返回值

替换
parentNode.replaceChild(new,origin) 新元素替换老元素

元素的属性
innerHTML = “” // 可读可写 可以添加html文档
innerText = “” //可读可写 取只能取到文本而不是标签 ，写入也只是文本
inntext 火狐不兼容，火狐是textContent

div.innerHTML = "123"
div.innerHTML+="456"  // 123456

Element节点的一些方法

• ele.setAttribute(name , value) // 设置属性值
• ele.getAttribute(name) // 获取该元素属性值

3窗口属性

滚动条

• window.pageXOffset /pageYOffset 纵向/横向滚动条 滚动的距离
  // ie不兼容
  当滚动条滚动400px 则离顶端400+首屏像素

ie的方法 ↓

• document.body/documentElement .scrollLeft/scrollTop
  // 兼容性比较魂断，同时取两个值互加，总有一个有值一个是0
  // document.body.scrollLeft+documentElement.scrollLeft

封装成双兼容方法
    if (window.pageXOffset) {
      return {
        x: window.pageXOffset,
        y: window.pageYOffset
      }
    } else {
      return {
        x: document.body.scrollLeft + document.documentElement.scrollLeft,
        y: document.body.scrollTop + document.documentElement.scrollRight
      }
    }

可视区域视口尺寸
可视区域视口相当于首屏尺寸

• window.innerWidth /innerHeight // 网页宽度 /高度
  ie8不兼容
• document.documentElement.clientWidth/clientHeight
  标准模式下，任意浏览器都兼容
• document.body.clientWidth/clientHeight
  适用于怪异模式下的浏览器

怪异模式：为了迎合老版本浏览器api 将标签去掉即可
document.compatMode -> BackCompat 怪异模式

// 求视口大小
    function getViewportOffset() {
     if (window.innerWidth) {
       return {
         w: window.innerWidth,
         h: window.innerHeight
       }
     } else if (document.compatMode === "BackCompat") {
       return {
         w: document.body.clientWdith,
         h: document.body.clientHeight
       }
     } else {
       return {
         w: document.documentElement.clientWidth,
         h: document.documentElement.clientHeight
       }
     }
   }

查看元素的几何尺寸

• domEle.getBoundingClientRect() 任何元素都可以使用
  返回一个对象，包含了距离属性
  left,top代表左上角在x,y轴的距离，right,bottom代表右下角在x,y轴的距离
  不是实时的
• dom.offsetWidth,dom.offsetHeight
  视觉尺寸，不包含margin

查看元素的位置

• dom.offsetLeft,dom.offsetRight
  忽略自身是否是定位元素，返回自身和有定位的父级元素的距离
  对于无定位的父级元素，返回相对文档的坐标
• dom.offsetParent
  返回最近有定位的父级元素，如果没有，返回body;body.offsetParent为null

让滚动条滚动
window上有三个方法

• scroll(x,y)
  x： 让x轴滚动的距离，y：让y轴滚动的距离
• scrollTo(x,y)
  同上
• scrollBy(x,y)
  在原基础上累计滚动

3 操作css

• 操作行间样式 dom.style.prop

可读可写 行间样式表 没有兼容性问题
碰到float这样的保留字属性，前面应加 css
写入的形式必须是字符串型式
复合属性必须拆解，中划线变小驼峰式写法
div.style.backgroundColor = “grb(0,0,0)”、
div.style.cssFloat

• 查询计算样式 window.getComputedStyle(div,null)

获取当前元素所展示出的一切css现实值，只读不可写
window.getComputedStyle(div,null).width
当遇到百分比的值获取的是计算的后的像素、rgb等
ie不兼容 IE: ele.currentStyle.width

• 获取伪元素的样式：window.getComputedStyle(div,’:after/:before’)

跟上面的方法一样，把null换成’:after/:before’

封装一个获取样式的方法

function getStyle(elem,prop){
  if(window.getComputedStyle){
    return window.getComputedStyle(elem,null)[prop]
  } else {
    return  elem.currentStyle[prop]
  }
}

4事件

如何绑定一个事件

• div.on+事件类型 兼容性好

可以写句柄，直接写执行函数

• obj.addEventLister(事件类型，处理函数，false)

ie 不兼容 w3c标准，第三个参数用于冒泡
能给同一个对象的同一个时间绑定多个处理函数，当函数引用地址相同时，不能绑定多次

• obj.attachEvent(时间，处理函数)

ie独有 可以多次绑定同一个函数
这个方法this不指向自己

var div = document.getElementsByTagName('div')[0]
div.attachEvent('onclick',function(){
  handle.call(div)  
})

function handle() {
  // 事件处理程序
  // 这个this指向div
}

封装一个最终的事件和处理函数

    function addEvent(elem, type, handle) {
      if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
      } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function () {
          handle.call(elem)
        });
      } else {
        elem['on' + type] = handle
      }
    }

解除事件

• elem.onclick = null ；

想让事件只执行一次 在函数末尾写elem.onclick = null

• elem.removeEventListener (‘click’, fn, false)
• elem.deatchEvent(‘on’+type,fn)

上面两条的fn必须是引用一样的函数

---

## 5 事件处理模型 ##

事件冒泡
结构上嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向木元素（自底向上）

事件捕获
结构上嵌套关系的元素，会存在事件捕获功能，即同一事件，自氟元素捕获至子元素(事件源元素)（自顶向下）

从父级元素到子级级元素
只有谷歌浏览器可以用
elem.addEventListener(type, handle, true) 把false改成true
还有一种事件捕获 ：事件处理过程，防止鼠标检测帧频比事件监听快，拖拽容易失去目标
div.setCapture() div.releaveCaptrue()

一个对象的一个事件类型绑定两个处理函数的执行顺序:
先捕获后冒泡，但是到最后一个元素会按照函数的执行顺序执行
focus,blur,change,submit,resat不能冒泡

如何阻止冒泡
div.οnclick= function(e){
// e是事件处理对象
}

• e.stopPropagation() ie9一下不支持
• e.canceBubble = true IE独有
  封装一个函数阻止冒泡

    function stopBubble(e) {
      if (e.stopPropgation) {
        e.stopPropgation
      } else {
        e.cancelBubble = true
      }
    }
    div.onclick= function(e){
	stopBubble(e)
}

阻止默认事件

• return false
  比如 右键出菜单事件 浏览器自带
  document.oncontextmenu = function(){}
  必须以句柄的方式绑定的事件

• e.preventDefault() W3C标准，ie9一下不兼容

• ereturnValue = false 兼容IE
  封装阻止默认事件函数

    function cancelHandler(e){
      if(e.preventDefalut){
        e.preventDefalut
      } else {
        e.returnValue = false
      }
    }

可也以取消a标签的默认事件

事件原对象
function(e){} 浏览器会打包成事件对象
ie浏览器这是window.event
兼容性写法： var event = e|| window.event
如何找到是谁触发的事件（事件源）

• event.target 火狐只有这个
• event.srcElment IE只有和这个
• chrome两个都有
  兼容性写法 var target= event.target|| event.srcElement
  可以实现事件委托

鼠标事件

• click ：down->up 组成一个click
• mousedown/mouseup
• mousemove
• contextmenu 阻止右键菜单
• mouseover/mouseleave
• 用button区分鼠标的按键 0/1/2

DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

// 判断鼠事件
    document.onmousedown = function (e) {
      if (e.button == 2) {
        console.log("right");
      } else if (e.button == 0) {
        console.log("left");
      }
    }

// 区分拖拽和点击
    var firstTime = 0;
    var lastTime = 0;
    var key = false
    document.onmousedown = function () {
      firstTime = new Date().getTime();
    }
    document.onmouseup = function () {
      lastTime = new Date().getTime();
      if (lastTime - firstTime < 300) {
        key = true
      }
    }
    document.onclick = function () {
      if (key) {
        console.log("click");
      }
    }

键盘事件

• keydown keyup keypress
• keydown -> keypress -> keyup
  keydown 和 keypress的区别
  keydown可以响应任意键盘按键，keypress只可以响应子字符类键盘按键
  keypress返回ASCⅡ码 ，可以转换成相应字符
  A keydown charcode是0
  A keypress charcode 是 97 字符类按键监听

文本类事件

• input 输入一次出发一次
• change 聚焦和失去焦点的两个状态发生改变
• focus 聚焦出发
• blur 失去焦点触发

窗口事件

• scroll 滚动条滚动触发
• load 等待所有资源全都加载完执行