1. 节点操作
   1. 子节点
      1. childNodes
         1. 元素.childNodes--------元素的所有子节点，包含文本节点，元素节点
         2. 元素.childNodes[0]--------第一个节点，包含文本，元素节点
      2. chiidren
         1. 元素节点的集合，所有浏览器下都是元素节点，有一点需要注意的是：
            1. 标准下包含非法嵌套的元素节点
            2. 非标准下不包含非法嵌套的元素节点
      3. 第一个子节点
         1. firstChild
         2. firstElementChild
         3. 兼容写法
            1. var oFirst=元素.firstElementChild||元素.firstChild;
            2. 举例：给oUl的第一个元素加上红色背景
            3. 注意点：需要判断第一个元素是否存在
      4. 最后一个子节点
         1. lastChild
         2. lastElementChild
         3. 兼容写法
            1. var oLast=元素.lastElementChild||元素.lastChild
            2. 举例：还给oUl的最后一个元素加上共色背景
            3. 注意点：需要判断最后一个元素是否存在
   2. 兄弟节点
      1. 上一个兄弟节点
         1. previousSibling
         2. previousElementSibling
         3. 兼容写法
            1. var oPrev=元素.previousElementSibling||元素.previousSibling
            2. 举例：给上一个元素添加红色背景
            3. 注意点：需要判断上一个元素是否存在
            4. 元素.previousSibling含文本节点，所有oPrev要判断节点类型
      2. 下一个兄弟节点
         1. nextSibling
         2. nextElementSibling
         3. 兼容写法
            1. var oNext=元素.nextElementSibling||元素.nextSibling
            2. 举例：给下一个元素添加红色背景
            3. 注意：需要判断上一个元素是否存在
            4. 元素.nextSibling含文本节点，所有oNext要判断节点类型
   3. 父节点
      1. 普通父节点
         1. parentNode
            1. 注意：元素节点，无兼容问题
      2. 定位父节点
         1. offsetParent
            1. 注意：如果没有定位父级，默认定位父级为body，ie7以下为html
   4. 其他
      1. 常用节点类型三个
         1. 元素节点
            1. 元素.NodeType返回值是1
         2. 属性节点
            1. 元素.NodeType返回值是2
         3. 文本节点
            1. 元素.NodeType返回值是3
      2. nodeType
         1. 元素.nodeType 返回数字，代表节点类型
      3. nodeValue
         1. 元素.nodeValue 节点值
            1. 一般针对文本节点，针对元素节点返回的都是null，举例看备注
      4. nodeName
         1. 元素.nodeName 节点名称
      5. attributes
         1. 元素.attributes 元素的属性列表集合
         2. 元素.attributes[0] 单个属性
            1. 元素.attributes[0].name------代表元素第0个属性的名称
            2. 元素.attributes[0].value------代表元素第0个属性的值
2. 定位属性
   1. offsetLeft、offsetTop
      1. ie7及以下
         1. 如果元素自身无定位，那么元素.offsetLeft/offsetTop是到body的距离
         2. 如果元素自身有定位，那么元素.offsetLeft/offsetTop就是到定位父级的距离，如果没定位父级，就是到html的距离
      2. 其他
         1. 到定位父级的距离
   2. offsetParent
      1. 元素的定位父级节点
   3. 注意：如果上面两个都没有找到定位父级，则
      1. 以上offsetLeft、offsetTop是到html
      2. 以上offsetParent是到body
3. 样式相关
   1. 样式宽高
      1. 元素.style.width
         1. 注意：只能获取行间样式的宽高
         2. 注意：含单位
   2. 可视宽高
      1. 元素.clientWidth
         1. 可视宽=样式宽+padding
         2. 注意：不含单位
   3. 占位宽高
      1. 元素.offsetWidth
         1. 占位宽=样式宽+padding+border=可视宽+border
         2. 注意：不含单位
4. 元素的操作
   1. 创建元素
      1. var oLi=document.creatElement('li')
   2. 添加元素
      1. 从前面添加
         1. 父级.appendChild(要添加的元素)
      2. 从后面添加
         1. 父级.insertBefore(要添加的元素，被插入的元素)
         2. 注意1：这里有两个参数的
         3. 注意2：在IE下，第二个参数的节点不存在会报错，在其他浏览器下，第二个参数的节点不存在，则会以appendChild的形式添加
         4. 兼容版
            1. 被插入的元素?父级.insertBefore(要添加的元素,被插入的元素):父级.appendChild(要添加的元素)
   3. 删除元素
      1. 父级.removeChild(要删除的元素);
   4. 剪切并替换元素
      1. 父级.replaceChild(新节点，被替换的节点)
   5. 克隆节点(元素)
      1. 要克隆的元素.cloneNode(false)
         1. 注意：这个表示只克隆元素本身，不克隆元素里面的内容
         2. 举例：oUl.cloneNode(false),就只克隆<ul></ul>
      2. 要克隆的元素.cloneNode(true)
         1. 注意：这个表示不仅克隆元素本身，还克隆元素内部的内容，克隆的范围类似outerHTML
         2. 举例：oUl.cloneNode(true);克隆的是<ul><li></li>...</ul>
5. 元素属性操作
   1. 获取属性
      1. 获取指定元素的指定属性
         1. 元素.getAttribute(属性名称);
         2. 举例：oText.getAttribute('value')
   2. 设置属性
      1. 给制定元素的属性设置值
         1. 元素.setAttribute(属性名称，属性值)
         2. 举例：oText.setAttribute('value','hello')
   3. 移除属性
      1. 移除制定元素的制定属性
         1. 元素.removeAttribute(属性名称)
         2. 举例：oText.removeAttribute('value')
   4. 注意点：如果有自定义属性 _name_='w3c'
      1. 注意点1：用.和[]无法再标准下操作自定义属性，但是用getAttribute可以操作元素的自定义属性
      2. 注意点2：oImg.src和oImg[src]只可写，不可读，但是oImg.Attribute('src')可读，即可以作为判断条件（ie7以上可读）
   5. class相关
      1. 移除class
      2. 添加class
6. 表单与表格
   1. 表格的五脏六腑
      1. 表格头（只有一个）：tHead
         1. 举例：oTab.tHead.style.background='red';
      2. 表格正文（可以有多个）：tBodies
         1. 举例：oTab.tBodies[0].rows[0].cells[0].innerHTML='1'
      3. 表格尾部（只有一个）：tFoot
         1. 举例：oTab.tFoot.style.background='red';
      4. 表格行列
         1. 行：rows
            1. 举例：oTab.tBodies[0].rows.style.backgroud='red';
            2. 举例：oTab.tBodies[0].rows[0].style.backgroud='red';
         2. 列：cells
            1. 举例：oTab.tBodies[0].cells.style.backgroud='red';
            2. 举例：oTab.tBodies[0].rows[0].style.backgroud='red';
         3. 举例：oTab.tBodies[0].rows[0].cells[0].style.backgroud='red';
   2. 表单的五脏六腑
      1. 表单的操作
         1. 操作一个表单只要操作其name就可以了
         2. 举例：见备注
      2. 表单的事件
         1. onchange事件
            1. 当值发生改变的时候触发
            2. 注意：是焦点离开的时候才会触发
            3. 举例：见备注
         2. onsubmit事件
            1. 点击提交直接跳转到提交页
            2. 阻止提交
            3. 在onsubmit时间中庸return false阻止默认提交，详见备注
            4. 注意点：提交的是oForm，不是oForm.name,注意看备注
         3. 注意点
            1. 注意1：当input为radio单选的时候，name都为同一个，比如说name=‘sex’，这时候oForm.sex是不对的，要用for等遍历所有的sex[I]
            2. select
            3. 注意；详见备注