前端笔记05 - js

最新推荐文章于 2024-11-01 13:37:40 发布

czc448969530

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量5.9k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/czc448969530/article/details/88763786

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

常用的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>