document&遗留DOM&相互关系查询&元素节点&属性节点&CSS样式&绑定事件
什么是DOM
DOM全称Document Object Model文章对象模型
作用：使JavaScript有了访问HTML的能力
浏览器会自动加：thead；tbody
document.
getElementById(元素id)
单个dom对象
getElementsByTagName(标签名)
包含dom对象的数组
getElementsByClassName(类名)
包含dom对象的数组
IE8+
getElementsByName(元素的name属性)
包含dom对象的数组
querySelector(css选择器)
单个dom对象
IE7+
querySelectorAll(css选择器)
包含dom对象的数组
IE7+
遗留DOM
document.body
返回body节点
document.forms[0]
返回表单数组
document.formName.name
返回单个表单项或数组
document.anchors
返回锚点数组
document.links
返回链接数组
document.images
返回图片数组
document.all
返回所有的元素数组
相互关系查询
父节点.children
返回所有元素类型的子节点数组
父节点.childNodes
返回所有子节点，包括文本节点数组
父节点.firstChild
返回第一个子节点，包括文本节点的单个对象
父节点.firstElementChild
返回第一个子节点，不包括文本节点的单个对象
IE8+
父节点.lastChild
返回最后一个子节点，包括文本节点的单个对象
父节点.lastElementChild
返回最后一个子节点，不包括文本节点的单个对象
IE8+
父节点.getElementBy....()
返回继续调用getEle...系列方法查询子节点的数组/对象
子节点.parentNode
返回父节点的单个对象
兄弟.previousSibling
返回上一个兄弟，包括文本节点的单个对象
兄弟.previousElementSibling
返回上一个兄弟，不包括文本节点的单个对象
IE8+
兄弟.nextSibling
返回下一个兄弟，包括文本节点的单个对象
兄弟.nextElementSibling
返回下一个兄弟，不包括文本节点的单个对象
IE8+
元素节点
增
创建文本节点：document.createTextNode('文本值');
创建元素节点：document.createElement('标签名');
方法一：父节点.appendChild(子节点);
方法二：父节点.insertBefore(新节点, 参照的节点);
克隆
原来的节点.cloneNode([true]);
替换
父节点.replaceChild(新节点, 待替换的节点);
删除
父节点.removeChild(子节点);
属性节点
获取
元素节点.attributes
获取元素的所有属性
元素节点.getAttribute(属性名)
获取指定属性的值
元素节点.属性名
获取指定属性的值
添加/修改
元素节点.setAttribute(属性名，属性值)
元素节点.属性名 = 值
删除
元素节点.removeAttribute(属性名) //删除一个属性
判断元素是否存在某属性
elementNode.hasAttribute(属性名) 检测是否有某个属性，有返回true，没有返回false
设置/获取css样式
设置
elementNode.style.css样式 = 值
获取
node.currentStyle.样式名称
IE支持
getComputedStyle(node).样式
非IE支持
1.可以获取行内样式
2.可以获取js已经设置过的样式
3.不可以获取没有设置过的样式
4.不可以获取内联样式
事件和事件对象
事件
事件绑定
dom对象.事件名 = 处理函数;
页面事件
onload ：当页面载入完毕（页面中的标签和外部资源）后触发
焦点事件
onfocus ：当获取焦点时触发
onblur ：当失去焦点时触发
鼠标事件
onmouseover ：当鼠标悬浮时触发
onmouseout ：当鼠标离开时触发
键盘事件
onkeypress ：当键盘按下时触发（如果按住某个键不松开，会一直触发press事件）
onkeydown ：当键盘按下时触发
onkeyup ：当键盘弹起时触发
其他事件
onchange ：内容改变时会触发，常用于select>option。
onsubmit ：表单提交时触发，这个事件要给form绑定而不是给提交按钮绑定
onresize ： 页面窗口改变大小时会触发
onscroll ：滚动条滚动时触发
事件处理函数中的this 表示绑定事件的那个对象。换句话说，点击的是谁，this就表示谁
事件对象
获取
window.event;
IE
传递给事件处理函数的形参
非IE
keyCode：表示键盘上的键对应的数值。
altKey：表示是否按了alt键，按了结果为true，没按结果为false（组合按键的时候，才会有作用）
shiftKey：表示是否按了shift键，按了结果为true，没按结果为false（组合按键的时候，才会有作用）
ctrlKey：表示是否按了ctrl键，按了结果为true，没按结果为false（组合按键的时候，才会有作用）
pageX: 鼠标距离页面左边的距离
pageY: 鼠标距离页面上面的距离
screenX: 鼠标距离屏幕左边的距离
screenY: 鼠标距离屏幕上面的距离