document对象有很多属性来描述文档信息

• document.doctype
• document.title
• document.characterSet
• document.head
• document.body
• document.images
• document.readyState属性返回当前文档的状态，共有三种可能的值
  • loading：加载HTML代码阶段，尚未完成解析
  • interactive：加载外部资源阶段
  • complete：全部加载完成
• document.location属性返回一个只读对象，提供了当前文档的URL信息
• document.write()写入新内容，覆盖新文档。还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。
  • document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档，重新写入内容
  • document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。

Element对象表示HTML元素。

主要属性

• nodeName：元素标签名，还有个类似的tagName
• nodeType：元素类型
• className：类名
• id：元素id
• children：子元素列表（HTMLCollection）
• childNodes：子元素列表（NodeList）
• firstChild：第一个子元素
• lastChild：最后一个子元素
• nextSibling：下一个兄弟元素
• previousSibling：上一个兄弟元素
• parentNode、parentElement：父元素

查询元素

• getElementById()
• getElementsByClassName() 返回一个类似数组的对象（HTMLCollection类型的对象）
• getElementsByTagName()返回值是一个HTMLCollection对象
• getElementsByName()()选择带name属性的标签，返回一个NodeList格式的对象
• querySelector()
• querySelectorAll()返回的是NodeList类型的对象

创建元素

• createElement()创建元素节点
• createTextNode()创建文本节点
• createDocumentFragment()创建一个存在于DOM内存但不属于当前文档的DocumentFragment对象，对他任何改动都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

var body=document.body
var cearteDiv =body.appendChild(document.createElement("div")).appendChild(document.createTextNode("cearteDiv"))
var cearteFragmentDIV =body.appendChild(document.createDocumentFragment()).appendChild(document.createTextNode("我和上面写法一样，但不存在")) 
// document.createDocumentFragment().appendChild(document.getElementById('lg'))//不存在
var cearteFragmentDIV2=body.appendChild(document.createDocumentFragment().appendChild(document.createTextNode("要这样写才存在")))
                                    

var cearteFragmentObj=document.createDocumentFragment()
cearteFragmentObj.appendChild(document.createTextNode(" lalala"))
body.appendChild(cearteFragmentObj)         

• 修改元素
  • appendChild() 在元素末尾添加元素
  • insertBefore() 在某个元素之前插入元素
  • replaceChild()接受两个参数：要插入的元素和要替换的元素
• 删除元素
  • parentNode.removeChild(childNode);parentNode是删除目标的父元素，childNode是删除目标
• 克隆元素
  • node.cloneNode(true);方法用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身
• 属性操作
  • getAttribute()用于获取元素的attribute值
  • createAttribute()方法生成一个新的属性对象节点，并返回它。
  • setAttribute("","")方法用于设置元素属性
  • removeAttribute()用于删除元素属性
  • innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
  • innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM
• 修改样式
  • dom.style.xxx=""
  • getComputedStyle(dom).XXX //获取样式
  • dom.classList.add('class') //新增 class
  • dom.classList.remove('class') //删除 class
  • dom.classList.toggle('class') //新增/删除切换
  • dom.classList.contains('class') // 判断是否拥有 class
• 页面宽高
  • element.clientHeight 内容高度
  • element.offsetHeight 内容高度包括边框
  • element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条， scrollHeight等于 clientHeight
  • element.scrollTop 滚动的高度
  • window.innerHeight 窗口的高度
  • element.getBoundingClientRect() 获取元素在视窗中的位置
• event对象
  • e.preventDefault() 取消事件默认行为
    • e.cancelable 属性表明该事件是否可以被取消默认行为
  • e.stopPropagation() 取消事件进一步捕获或冒泡
  • e.target 事件的目标元素 常用做事件代理

常用事件 (opens new window)

• click 鼠标单击
• dblclick 鼠标双击
• mousedown 鼠标指针在目标元素上触发(包括子元素)
• mouseout 鼠标指针在目标元素上离开触发(包括子元素)
• mouseenter 鼠标指针在目标元素上触发(除了子元素)
• mouseleave 鼠标指针在目标元素上离开触发(除了子元素)
• focus 元素获取焦点触发
• blur 元素失去焦点触发
• keyup 按下去松开触发
• change 元素失去焦点，并且里面的值发生改变时触发
• input 元素value值发生变化时实时触发，常用于实时更新滑动条type="range"
• 媒体事件
  • playing 当音乐开始播放，暂停后重新开始播放，设置currentTime后开始播放时触发
  • pause 当音乐暂停时和结束时触发
  • ended 当音乐结束时触发
  • timeupdate 当currentTime更新时会触发timeupdate事件,这个事件的触发频率由系统决定
  • volumechange 当音量改变时触发
• DOM元素位置和尺寸大小
  • 高度
    • offsetHeight = content + border + padding = 200 + 2 * 2 + 10 * 2 = 224
    • clientHeight = content + padding = 200 + 2 * 10 = 220
    • window.getComputedStyle(dom).height = css设置的样式
    • dom.getBoundingClientRect()方法获取与元素相关的CSS属性边框集合。 返回对象中共有6个属性。(bottom,right,left,top,height,width)
  • element.scrollTop 滚动的高度
  • window.innerHeight 窗口的高度

动画

优化 requestAnimationFrame()

 document.querySelector('.box').animate([
    {width:'0px'},
    {width:'100px'}
  ],1000)

jQuery (opens new window)

选择器

• .eq 获取指定下标的jQuery对象，与之类似的有.get会jQuery对象转DOM对象
  • .eq(index), .get([index]) get()不写参数把所有对象转为DOM对象返回
• .next / .prev 选择相邻的下一个元素/选择相邻的下一个元素
  • .next([selector])/.prev([selector]) 紧跟着的兄弟元素满足选择器时，才会返回此元素
• .nextAll / .prevAll 选择相邻的下面全部元素/选择相邻的上面全部元素
  • .nextAll([selector]), .prevAll([selector]) 筛选出满足选择器的元素，返回此元素
• .siblings 匹配相邻的所有元素
  • .siblings([selectors]) 筛选出满足选择器的元素，返回此元素
• .parent / .parents 匹配对象的每个父元素/匹配对象的每个祖先元素
  • $('li.item-a').parent()/$('li.item-a').parents('div') 筛选出满足选择器的元素，返回此元素
• .children / .find 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
  • .children([selector])/.find([selector])
• .filter 遍历元素对每个元素进行过滤
  • .filter(selector) / $('li').filter(function(index，node) {return index % 3 == 2;})
• .not 从匹配的元素集合中移除指定的元素，和filter相反
  • .not(selector), .not(function(index))
• .has 筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
  • .has(selector), .has(dom)
• .is 判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象.
  • .is(selector), is(function(index)), is(dom/jqObj) 如果这些元素至少一个匹配给定的参数，那么返回true

DOM操作

• .append() 向对象头部追加内容，可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
  • .append(content[,content]) / .append(function(index,html))
• .prepend() 向对象头部追加内容，用法和append类似，内容添加到最开始
  • .prepend(content[,content]) / .prepend(function(index,html))
• .before() 在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似
  • .before([content][,content]) / .before(function)
• .after() 在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，prepend类似
  • .after([content][,content]) / .after(function（index）)
• .remove() 删除被选元素（及其子元素）
  • .remove([selector]) 可以添加一个可选的选择器参数来过滤匹配的元素
• .empty() 清空被选择元素内所有子元素（不包括被选择元素）
  • $('body').empty();
• .html() 这是一个读写两用的方法，用于获取/修改元素的innerHTML
  • $('div').html() 当没有传递参数的时候，返回元素的innerHTML
  • $('div').html('123') 当传递了一个string参数的时候，修改元素的innerHTML为参数值
• .text() 和html方法类似，操作的是DOM的innerText值
  • $('div').text()

属性操作

• .val() 用来读取或者修改input的value值
  • .val([value])
• .attr() 读取或者修改元素特定属性的值
  • .attr(attributeName) 读取
  • .attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) 修改
• .removeAttr() 为匹配的元素集合中的每个元素中移除一个属性（attribute）
  • $('div').removeAttr('id');
• .prop()主要用来操作元素的property的，property和attibute是非常相似的概念
• .css() 处理元素的css样式
  • 例如 $('.box').css('color','pink')
  • .css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
• .addClass() 给指定元素添加class类名
  • .addClass(className) / .addClass(function(index,currentClass))
• .removeClass() 移除元素单个/多个/所有class
  • removeClass([className]) / ,removeClass(function(index,class))
• .hasClass() 检查元素是否包含某个class，返回true/false
  • $( "#mydiv" ).hasClass( "foo" )
• .toggleClass() 切换类，如果元素对象有这个类名则去除，没有则添加
  • .toggleClass(className)

方法

• .each() 遍历一个jQuery对象，为每个匹配元素执行一个函数 类似元素forEach()
  • $("li").each(function(index,node) {})
• .$.each() 一个通用的迭代函数，它可以用来无缝迭代对象和数组。
  • jQuery.each( collection, callback(indexInArray, valueOfElement) )
• $.extend() 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
  • jQuery.extend([deep,] target [, object1 ] [, objectN ] )
• .clone() 方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点
  • .clone( [withDataAndEvents ] ) //可用于DOM元素的复制
• .index() 从给定集合中查找特定元素index
  • .index() 没参数返回第一个元素index
  • .index(selector)如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
  • .index(element) 如果参数是选择器，返回第一个匹配元素index，没有找到返回-1
• .ready() 当DOM准备就绪时，指定一个函数来执行。与原生DOMContentLoaded类似
  • $(document).ready(handler)和$(handler)完全等价

动画

• hide() 隐藏 display:none
• show() 显示 display:block
• .fadeIn()
• .fadeOut()
• .fadeTo()
• .animate()自定义动画
• 清除动画
  • .clearQueue() 停止当前动画，清除动画队列中未执行的动画
  • .finish()停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
  • .stop(true,true ) 停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
  • .stop(true,true ) 停止当前动画，清除动画队列中未执行的动画