常用的HTML DOM属性和方法
getElementById()返回对拥有指定 id 的第一个对象的引用。
getElementsByName()返回带有指定名称的对象集合。
getElementsByTagName()返回带有指定标签名的对象集合。
appendChild()向元素添加新的子节点，作为最后一个子节点。
removeChild()从元素中移除子节点。
element.innerHTML设置或返回元素的内容。
element.parentNode返回元素的父节点。
element.childNodes返回元素子节点的 NodeList。
element.attributes返回元素属性的 NamedNodeMap。
getElementById()返回对拥有指定 id 的第一个对象的引用。
getElementsByName()返回带有指定名称的对象集合。
getElementsByTagName()返回带有指定标签名的对象集合。
getElementsByClassName()返回带有指定class的对象集合。
createAttribute()创建一个属性节点
createElement()创建元素节点。
.createTextNode()创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点
element.appendChild()为元素添加一个新的子元素
removeChild()删除子节点
replaceChild()替换子节点
setAttribute()修改属性
setAttributeNode()修改属性节点
表格的隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1、确定事件：文档加载完成 onLoad
2.事件要触发的元素
3.函数：操作页面的元素
要操作表格中的每一行
动态的修改行的背景颜色
-->
<script>
function init(){
var table1 = document.getElementById("table1");
// h获取表格的所有行
var rows = table1.rows;
// 遍历所有的行,奇数行改变颜色
for (var i =0 ; i<rows.length;i++) {
var row = rows[i];
if(i%2 == 0 ){
row.bgColor = "red";
}else{
row.bgColor = "yellow";
}
if(i == 0){
row.bgColor = "";
}
}
}
function checkAll(){
var check0 = document.getElementById("check0");
var checked0 = check0.checked;
// 得到所有的check
var checks = document.getElementsByTagName("input");
for (var i = 1 ; i<checks.length ; i++) {
var check = checks[i];
check.checked = checked0;
}
}
</script>
</head>
<body "init()">
<table id="table1" border="1px red solid" width="400px">
<tr height="30px" >
<td >
<input type="checkbox" id="check0" onclick="checkAll()"/>
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr >
<td >
<input class="" type="checkbox" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为</td>
<td>手机</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr >
<td >
<input type="checkbox" />
</td>
<td>2</td>
<td>电视</td>
<td>华为</td>
<td>手机</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr >
<td >
<input type="checkbox" />
</td>
<td>3</td>
<td>冰箱</td>
<td>华为</td>
<td>手机</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr >
<td >
<input type="checkbox" />
</td>
<td>4</td>
<td>酒水</td>
<td>华为</td>
<td>手机</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr >
<td >
<input type="checkbox" />
</td>
<td>5</td>
<td>超市</td>
<td>华为</td>
<td>手机</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
省市联动