DOM编程及应用示例

table标签示例

DOM编程：
1.定义界面：
通过html的标签将数据进行封装
2.定义一些静态样式：
通过css
3.需要动态的完成和用户的交互：
a.先明确事件源
b.明确事件将事件注册到事件源上
c.通过javascript的函数对象事件进行处理

d.在处理过程中需要明确被处理的区域

一.在页面上通过按钮创建一个表格。
思路：
1.创建一个table节点，document。createElement（“table”）；
2.通过table节点的insertRow（）方法创建表格的行对象并添加到rows集合中
3.通过行对象的insertCell（）方法创建单元格对象，并添加到cells集合中
4.给单元格添加数据
a.创建一个节点如文本节点，document。createTextNode("文本内容")，通过单元格对象appendChild方法将文本节点添加到单元格的尾部
b.可以通过单元格的innerHTML，添加单元格中的元素。e: tdNode.innerHTML = "<img src '1.png' alt='图片说明信息'/>"
5.建立好表格节点，添加到DOM树中，也就是页面的指定位置

二.如何删除表格中的行或列。
思路：
1.删除行：获取表格对象，通过表格对象中deleteRow方法，将指定的行索引传入deleteRow方法中
2.删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作。获取所有行对象，并进行遍历，通过行对象的deleteCell方法将指定的单元格删除。

三.对表格中的数据进行排序。
思路：
1.获取表格中的所有对象
2.定义临时存储，将需要进行排序的行对象存入到数组中
3.对数组进行排序，通过比较每一行对象中指定单元格中的数据，如果是整数要通过parseInt转换
4.将排序后的数组通过遍历，将每一个行对象重新添加回表格，通过tbody节点的appendChild方法
5.其实排序就是每一个行对象的引用取出

四.表格的行颜色间隔显示，并在鼠标指定的行上高亮。
思路：
1.获取所有行对象，将需要间隔颜色显示的行对象进行动态className属性指定，那么前提是：先定义好类选择器
2.为了完成高亮，需要用到两个事件，onmouseover(鼠标进入)和onmouseout(鼠标移出)
3.为了方便可以在遍历行对象时，将每一个行对象都进行两个事件属性的指定，并通过匿名函数完成该事件的处理
4.高亮的原理就是将鼠标进入时的指定颜色改变，改变前先记录原来行对象的样式，这样在鼠标离开时可以将原样式还原
5.该样式需要在页面加载完后直接显示，所有使用window.onload事件来完成

五.制作大小写切换界面
通过DOM编程步骤实现.

六.表单中的组件
单选框，复选框
这两个组件都一个属性来表示器选中与否的状态，checked

七.获取鼠标的坐标，让指定区域随着鼠标移动
获取鼠标坐标：event.x,event.y
指定区域随鼠标移动其实就是改变了指定区域的left top属性的值

这里需要用到的时间：body对象onmouseover事件；css样式，直接定义页面，所以区域在同一层次，为了对某一区域进行定位，将该区域分离到另一个层次，用到css中的position属性