JavaScript 之——BOM编程-百木园

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>

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

来源：https://blog.csdn.net/weixin_65975275/article/details/123209493
本站部分图文来源于网络，如有侵权请联系删除。

JavaScript 之——BOM编程