JavaScript基础回顾知识点记录5-事件使用和dom操作（介绍基本使用）

js 中事件和dom

onload事件，在页面加载完成之后才会触发。（一般放在js执行之前）

点击事件示例

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1、属性内触发点击事件 -->
		<!-- <button id="btn" onclick="alert('我是点击事件')">我是一个按钮!</button> -->
		<!-- 2、js绑定点击事件（推荐） -->
		<button id="btn">我是一个按钮!</button>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			//获取到点击对象
			var btn = document.getElementById("btn");
			var html = btn.innerHTML;
			console.log(html);
			btn.onclick = function() {
				alert("我是回调");
			}
		}
	</script>
</html>

获取元素节点方法（通过document对象调用）
- getElementById():通过id属性获取一个元素节点对象
- getElementsByTagName():通过标签名获取一组元素节点对象
- getElementsByName():通过name属性获取一组元素节点对象

使用事件和操作dom实现图片切换

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="notice">

		</div>
		<img src="img/1.png" alt="暂无">
		<div class="btn_style">
			<button type="button" id="prev">上一张</button>
			<button type="button" id="next">下一张</button>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var img = document.getElementsByTagName("img")[0];
			var prev = document.getElementById("prev");
			var next = document.getElementById("next");
			var index = 0;
			var img_arr = ["img/1.png", "img/2.png", "img/3.png", "img/4.png", "img/5.png", "img/6.png", "img/7.png",
				"img/8.png"
			];
			var notice = document.getElementById("notice");
			notice.innerHTML = `一共${img_arr.length}张，当前第${index+1}张！`
			console.log(img_arr.length);
			prev.onclick = function() {
				index--;
				if (index < 0) {
					index = img_arr.length - 1;
				}
				notice.innerHTML = `一共${img_arr.length}张，当前第${index+1}张！`
				img.src = img_arr[index];

			}
			next.onclick = function() {
				index++;
				if (index > img_arr.length - 1) {
					index = 0;
				}
				notice.innerHTML = `一共${img_arr.length}张，当前第${index+1}张！`
				img.src = img_arr[index];
			}

		}
	</script>
</html>

获取元素节点的子节点（通过具体的元素节点调用）
- getElementsByTagName():返回当前节点的指定标签名后代节点（方法）
- childNodes：表示当前节点的所以子节点，包含文本节点，标签之间各一行也算一个节点。（属性）
- firstChild：表示当前节点的第一个节点（属性）
- lastChild: 表示当前节点的最后一个节点（属性）
- childNodes：在IE8及以下，不会计算文本节点。
获取父节点和兄弟节点
- parentNode: 表示当前节点的父节点
- previousSibling: 表示当前节点的前一个兄弟节点
- nextSibling: 表示当前节点的后一个兄弟节点

节点操作

creatElement(element)：创建一个新的元素节点
appendChild()：在节点列表后添加一个新的子节点

removeChild()：从一个给定元素中删除子节点

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">点我添加</button>
		<ul id="u1">
			<li><a href="javascript:;" class="link">点我1</a></li>
			<li><a href="javascript:;" class="link">点我2</a></li>
			<li><a href="javascript:;" class="link">点我3</a></li>
		</ul>
		<button id="btn2">点我两下删除最后一个</button>
	</body>
	<script type="text/javascript">
		var btn = document.getElementById('btn');
		var btn2 = document.getElementByID('btn2');
		var ul = document.getElementById('u1');
		btn.onclick = function() {
			var li = document.createElement('li');
			li.innerHTML = "<a href='javascript:;' class='link'>点我</a>";
			ul.appendChild(li);
		}
		btn2.onclick = function() {
		  //标签之间的换行也算一个节点，所以删除最后一个节点是先删了标签换行那个节点。
		  //需要删除文本节点，实际需要点击两下删除
		  ul.removeChild(ul.lastChild);
		}
	</script>
</html>

js 实现点击全选/反选/全不选操作

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form method="post" action="">
			你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
			<br />
			<input type="checkbox" name="items" value="足球">足球
			<input type="checkbox" name="items" value="篮球">篮球
			<input type="checkbox" name="items" value="羽毛球">羽毛球
			<input type="checkbox" name="items" value="乒乓球">乒乓球
			<br />
			<input type="button" id="checkedAllBtn" value="全选">
			<input type="button" id="checkedNoBtn" value="全不选">
			<input type="button" id="checkedRevBtn" value="反选">
			<input type="button" id="sendBtn" value="提交">
		</form>
	</body>
	<script type="text/javascript">
		var checkedAllBox = document.getElementById("checkedAllBox");
		var checkedAllBtn = document.getElementById("checkedAllBtn");
		var checkedNoBtn = document.getElementById("checkedNoBtn");
		var checkedRevBtn = document.getElementById("checkedRevBtn");
		var items = document.getElementsByName("items");
		checkedAllBox.onclick = function() {
			for (var i = 0; i < items.length; i++) {
				items[i].checked = checkedAllBox.checked;
			}
		}
		checkedAllBtn.onclick = function() {
			for (var i = 0; i < items.length; i++) {
				items[i].checked = true;
				checkedAllBox.checked = true;
			}
		}
		checkedNoBtn.onclick = function() {
			for (var i = 0; i < items.length; i++) {
				items[i].checked = false;
				checkedAllBox.checked = false;
			}
		}
		checkedRevBtn.onclick = function() {
			for (var i = 0; i < items.length; i++) {
				// if (items[i].checked) {
				// 	items[i].checked = false;
				// } else {
				// 	items[i].checked = true;
				// }
				items[i].checked = !items[i].checked;
			}
			checkedAllBox.checked = !checkedAllBox.checked;
		}
		for (var i = 0; i < items.length; i++) {
			items[i].onclick = function() {
				checkedAllBox.checked = true;
				for (var j = 0; j < items.length; j++) {
					if (!items[j].checked) {
						checkedAllBox.checked = false;
						break;
					}
				}
			}
		}
	</script>
</html>