html dom 元素访问 全选全不选11-24

html dom元素访问

  <button id="btn">按钮</button>
  <button class="c1">按钮</button>
  <button class="c1">按钮</button>
  <button>按钮</button>
  <button name="btn1" class="c1">按钮</button>
  <button name="btn1">按钮</button>

  <script type="text/javascript">
		// 根据指定id信息获取元素对象，返回:对象
		var btn = document.getElementById("btn")
		console.log(btn)
		// 根据指定标签信息获取元素对象的集合 返回:数组
		var button = document.getElementsByTagName("button")
		console.log(button)	
		// 根据指定name信息获取元素对象，返回:数组
		var btn1 = document.getElementsByName("btn1")
		console.log(btn1)	
		// 根据指定class信息获取元素对象，返回:数组
		var c1 = document.getElementsByClassName("c1")
		console.log(c1)
	</script>

点击按钮修改p中内容为hello kitty

  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <button id="button">按钮</button>

  <script type="text/javascript">
	  // 根据id名称获取指定元素button，返回一个button对象
	  var btn = document.getElementById("button")
	  // var btn = document.getElementsByTagName("button")[0]
	  // 根据标签名称获取指定元素p ，返回一个数组 数组中包含多个p对象
	  var p = document.getElementsByTagName("p")
		  // 给btn注册单击事件 
		  btn.onclick = function(){
			  // 当事件触发
			  // 循环遍历数组中的每一个元素 
			  for(var i=0;i < p.length;i++){
				  // console.log(p[i])
				  // 设置元素的内容为 hello kitty
				  p[i].innerHTML = "hello kitty"
			  }
		  }
  </script>

全选与全不选

window.onload = function(){
		// 获取四个多选框
		var items = document.getElementsByName("items")
		console.log(items)
		// 获取多选框 全选全不选
		var checkedAllBox = document.getElementById("checkedAllBox")
		
		/* 
			全选
		 */
		// 获取全选按钮
		var checkedAllBtn = document.getElementById("checkedAllBtn")
		console.log(checkedAllBtn)
		checkedAllBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				items[i].checked = true
			}
			checkedAllBox.checked = true
		}
		/* 
		 全不选
		 */
		// 获取全不选按钮
		var checkedNoBtn = document.getElementById("checkedNoBtn")
		console.log(checkedNoBtn)
		checkedNoBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				items[i].checked = false
			}
			checkedAllBox.checked = false
		}
		
		/* 
		 全选全不选
		 */
		// 给全选全不选多选框注册点击事件
		checkedAllBox.onclick = function(){
			for(var i = 0; i < items.length;i++){
				items[i].checked = this.checked
			}
		}
		
		/*
			提交按钮 ：当点击提交按钮时 选中的都弹窗
		 */
		var sendBtn = document.getElementById("sendBtn")
		console.log(sendBtn)
		sendBtn.onclick = function(){
			for(var i = 0; i < items.length;i++){
				if(items[i].checked){
					alert(items[i].value)
				}
			}
		}
		
		/* 
		 反选
		 */
		// 获取反选按钮
		var checkedRevBtn = document.getElementById("checkedRevBtn")
		checkedRevBtn.onclick = function(){
			checkedAllBox.checked = true
			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;
				if(!items[i].checked){
					checkedAllBox.checked = false
				}
			}
		}
		
		/* 
		 items  
			如果四个多选框都被选中，则checkedAllBox选中
			如果四个多选框都被没选中，则checkedAllBox没选中
		 */
		// 遍历四个爱好多选框 并给其绑定事件
		for(var i = 0 ;i < items.length; i++){
			items[i].onclick = function(){
				checkedAllBox.checked = true
				// 
				for(var j = 0; j < items.length;j++){
					console.log(j)
					/* !true  = false
					!true  = false
					!false = true */
					// 判断如果四个爱好中有一个为false 则全选全不选多选框也为false
					if(!items[j].checked){
						checkedAllBox.checked = false
					}
				}
			}
		}
	}