常用的HTML DOM属性和方法
- 一些常用的HTML DOM 方法
getElementById()返回对拥有指定 id 的第一个对象的引用。
getElementsByName()返回带有指定名称的对象集合。
getElementsByTagName()返回带有指定标签名的对象集合。
appendChild()向元素添加新的子节点，作为最后一个子节点。
removeChild()从元素中移除子节点。
- 一些常用的HTML DOM 属性
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>
省市联动
本文地址：http://www.45fan.com/a/luyou/100134.html