今天学习DOM了，使用dom实现表格换行变色和鼠标悬停变色 DOM对元素属性的操作 1.getAttribute 获取元素属性值 input.getAttribute('type') 1 2.setAttribute 给元素添加属性值（第一个参数是属性名，
今天学习DOM了，使用dom实现表格换行变色和鼠标悬停变色
DOM对元素属性的操作
1.getAttribute
获取元素属性值
input.getAttribute('type')
1
2.setAttribute
给元素添加属性值（第一个参数是属性名，第二个参数是属性的值）必须两个参数
input.setAttribute("yes", "ok") //yes=ok
1
添加属性（一个值）
input.attributes.setNamedItem(disabled)
1
3.createAttribute
创建属性（用变量接收）
var NewAttribute = document.createAttribute('good')
input.setAttribute('good', 'ok')
1
2
4.removeAttribute
删除属性
input.getAttributeNode("type")
换行变色：
第一步 使用document.getElementsByTagName获取行数数组
第二步 便利行数数组，用取余的方式判断奇偶行
第三步 用bgColor给表格行一个颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1" > <tr style="background-color: #999999;"> <th> <input type="checkbox"> </th> <th>商品序号</th> <th>商品名称</th> <th>商品价格</th> <th>操作</th> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>笔记本</td> <td>5000</td> <td>修改 删除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>笔记本</td> <td>5000</td> <td>修改 删除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>笔记本</td> <td>5000</td> <td>修改 删除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>笔记本</td> <td>5000</td> <td>修改 删除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>笔记本</td> <td>5000</td> <td>修改 删除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>笔记本</td> <td>5000</td> <td>修改 删除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>笔记本</td> <td>5000</td> <td>修改 删除</td> </tr> <tr> <td> <input type="checkbox"> </td> <td>01</td> <td>笔记本</td> <td>5000</td> <td>修改 删除</td> </tr> </table> <script> var trs = document.getElementsByTagName("tr"); var color ; for(var i = 1;i<trs.length;i++){ if(i%2==0){ trs[i].bgColor="red"; } else{ trs[i].bgColor="white"; } //鼠标悬浮变色 trs[i].onmouseover = function(){ color = this.bgColor; this.bgColor="green"; } trs[i].onmouseout = function(){ this.bgColor=color; } } </script> </body> </html>