JavaScript 之——BOM编程

2022-11-08 08:58:26

Hello! 大家好，我们又见面啦~接下来让我们学习今天的小知识吧~

一.如何在JS中获取HTML元素？

详细讲解：

1.通过标签中的id属性

document.getElementById();

eg:

<1>.首先我们来定义一个按钮和div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
		
		div{
			width: 100px;
			height: 50px;
			background: skyblue;
			display: inline-block;
		}
		</style>
	</head>
	<body>
		<button>更改颜色</button>
		<div id="d1" ></div>
  </body>
</html>

<2>.然后在body里写一个script标检，然后在script标检中写一个函数

<script>
		 function f(){
			 //Element 元素标检
			 //id选择器 
			var d= document.getElementById("d1")
			 d.style.background="yellow";
		  //还有一种直接使用id(虽然直接使用id会更方便,但是在某些低版本是用不了的,所以使用id选择器比较保险)
		 // d1.style.background="pink";
		 }
</script>

<3>.然后再按钮中写一个调用就可以了

<body>
		<button onclick="f()">更改颜色</button>
		<div id="d1" ></div>
  </body>

2.通过标签名

document.getElementsByTagName();

这是大概的使用的方法：


	
	<body>
		<button onclick="f1()">更改颜色</button>
        	<div id="d2"></div>
	<script>

		 function f1(){
			 //标检选择器  会拿出多个元素
			 var ds=document.getElementsByTagName("div");
		  
         //Cannot set properties of undefined(setting 'background')
		//不能   设置  属性 来自 未定义 (设置 'background' 的时候报的错) 
			//用foreach
			for(let i of ds){
			//i就是每一个元素
				i.style.background="purple";	
			}
		 }
   </script>
</body>

3.通过标检中的class属性

document.getElementsByClassName();

<1>.首先在body里面定义一个div，给它定义一个class名

       <div id="d1" class="a"></div>
		<div id="d2" class="a"></div>

<2>.然后在script标检中写一个函数

function f2(){
			 //类选择器 
			 //在选择器中,因为class是关键字,所以一般class就叫做 ClassName
			 var s=document.getElementsByClassName("a")
			 for( var i of s){
				 i.style.background="red";
			 }
		 }

<3>.最后定义一个按钮调用那个函数

<button onclick="f2()">更改颜色</button>

4.通过标签中的name属性

document.getElementsByName();

二.HTML元素上的常用事件

HTML元素上的常用事件
onclick	点击事件
ondblclick	双击事件
onfocus	获得焦点事件
onblur	失去焦点事件
onmouseover	鼠标移入
onmouseout	鼠标移出

1.eg:(获得焦点事件和失去焦点事件)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>上课代码04</title>
	</head>
	<body>
		<!-- <input type="text" onfocus="" onblur=""> -->
		<!-- value 只能用在输入框和哪些 只能那具备了value属性的值 -->
		
		<!-- style:标检中的style属性 -->
		
		<!-- 怎么给元素赋值 -->
		
		<!-- 在遍历元素时怎么不报错 -->
		<input  type="text">
		<input  type="text">
		<input  type="text">
		<input  type="text">
		<input  type="text">
		
		<button onclick="ff('嘿嘿')">嘿嘿</button>
		<button onclick="ff('咳咳')">咳咳</button>
		
		
		<script>
		
		function ff(a){
			//拿到值
	     var d=document.getElementsByTagName("input");
			
			//遍历元素
			for(let i of d){
				i.value=a;
			}	
		}
		
		//找到页面中所有的输入框
		//给所有的输入框赋值(失去焦点事件,获得焦点事件)
       (()=>{ //匿名函数
		var d1=document.getElementsByTagName("input");
		//只要碰到foreach循环 不能用 var  使用let(定义局部变量)
		 for(let i of d1){
			 //给元素的获得焦点事件赋值
			 i.onfocus=()=>{ i.value="" };
			 
			 //给元素的失去焦点事件赋值
			 i.onblur=()=>{ i.value="你吃baba"};
		 }
		})();
			   
		</script>
	</body>
</html>

三.HTML元素上的常用属性

HTML元素上的常用属性
textContent	标签的文本内容（定义的标签不生效）
innerHTML	标签中的html内容(标签会生效)
value	元素的值（适用具备value属性的元素）
checked	是否被选中（适用于单选框和多选框）
style	标签中的style属性（用于设置样式）

四.控制元素的显示

display
none	不显示（页面不会有空间）
block	以块状元素显示
inline	以行内元素显示
inline-block	以行块显示

大概使用方法：

<script>
		function c(){
			//如果隐藏,那么显示
			if(d5.style.display==="none"){
				d5.style.display="block";
			}else{//如果显示,那么隐藏
				d5.style.display="none";
			}
		}
</script>

visibility
visible	可见
hidden	不可见（会占据页面空间）

opacity
0~1之间的值
用于控制元素的透明度

eg:

function c1(){
			//如果透明度为0,那么把它调成1  0为透明  1为不透明
			if(d5.style.opacity==0){
				d5.style.opacity=1;
			}else{//如果显示,那么隐藏
				d5.style.opacity=0;
			}
		}

五. 案例：（实现表格中的全选按钮功能）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例1</title>
	</head>
	<body>
		
		<table>
			<tr>
				<td><input type="checkbox"  onclick="n(this.checked)"></td>
				
			</tr>
			
			<tr>
				<td><input type="checkbox"></td>
				
			</tr>
			
			<tr>
				<td><input type="checkbox"></td>
				
			</tr>
			
			<tr>
				<td><input type="checkbox"></td>
				
			</tr>
			
			<tr>
				<td><input type="checkbox"></td>
				
			</tr>
			
			<tr>
				<td><input type="checkbox"></td>
				
			</tr>
			
		</table>
		
	<script>
		//checked 检查当前是否被选中
		function n(zt){
		 //接收当前的状态
		 var is=document.getElementsByTagName("input");
		
		 //拿到所有的多选框
		 //给多选框的状态:以第一个框为标准	
		   for(let i of is){
		   			 //i就是每一个多选框
		    i.checked=zt;
		   }
		}

		</script>
	</body>
</html>

六.使用js制作图片自动切换效果

<1>.导入三张图片，分别取名叫a0.jpg; a1.jpg; a2.jpg

<2>.然后看下面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		 div{
			 width: 500px;
			 height: 400px;
			 background: url(images/a0.jpg) ;
			
		 }
		
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<img id="m1" src="images/a0.jpg" width="300px">
		
		<button onclick="f1()">点我更新图片</button>
		
		<script>
		var b=1;
		setInterval(()=>{
			d1.style.backgroundImage='url("images/a'+(b%3)+'.jpg")'
			b++;
		},1000);
		
		function f1(){
			m1.src="images/a1.jpg";
		}
		
		</script>
	</body>
</html>

好啦，今天我们的小课堂已经到此为止啦~ 下次会越来越精彩的！对啦，送大家一句话，很现实也很坚定：每条路都很难走，但是一旦选择了，就一定要走下去，加油！家人们，期待你们，也期待我们以后的蜕变！

码农公寓