前端笔记05 - js - 好文

<>常用的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>  <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> <>省市联动

热门工具换一换