花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

JavaScript(Bom编程）_js根据id获取元素

作者：花生_TL007 | 2024-02-19 07:08:27

踩

js根据id获取元素

昨天给大家分享了JS的进阶，今天来继续给大家分享JS的BOM编程。

一，常用的编程元素

style:标签中的style属性(用于设置样式)

h1-h6:标题标签，从大到小排列

b:加粗标签

br:跨行标签

hr:分割线biaoq

font:字体标签

img:图片标签需要先将图片传入html

src:图片地址

width:宽度

height:高度

background:背景

color:颜色

table:表格标签(需要搭配 tr 和td 使用也就是行和列)

ul:无序标签

ol:有序标签 ul和ol都需要搭配li使用

二，获取元素的方法

1.通过id获取元素

document.getElementById() : 通过标签中的id属性来获取元素如果已经知道了id 也可以用id名直接进行下一步操作

优点：精准

缺点：需要一个一个拿，使用时较为麻烦

适用范围：适合需要操作的元素不多时使用

2.通过标签名获取元素

document.getElementsByTagName() : 通过标签名获取元素

优点：方便快捷，一次性拿出多个

缺点：由于拿出的是多个 (一个集合) 导致无法精准到每个元素

适用范围：适合元素较多时使用(可以批量获取元素)

3.通过class属性获取元素

document.getElementsByClassName() : 通过标签中的class属性获取元素

优点：可以在较多元素中，精准锁定某些元素

缺点：和通过id来获取元素的方法一样，需要对应元素，较为繁琐

适用范围：可以搭配通过标签名获得原色==元素的方法一起使用，可以做到在大范围的元素中锁定需要的元素

4.通过name属性获取元素

document.getElementsByName() ：通过标签中的name属性获取元素

优点：也和id一样可以较为精准的对应某些元素但是id是唯一的不能重复但是name可以有重复的值

缺点：有些标签里面是没有name属性的比如：div等

适用范围：在大范围元素中锁定一些有name属性的元素

三，元素中的常用事件

1.点击事件

onclick：点击事件

ondblclick : 双击事件

利用点击事件来切换元素属性（背景颜色）：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Score</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 150px;
                background-color: burlywood;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div id="d1" class="a" ></div>
        <div class="a"></div>
        <div ></div>
        <br>
        <button type="button" onclick="fn1()" name="bb">点我切换颜色</button>
        <button type="button" onclick="fn2()">点我切换颜色（类）</button>
        <button type="button" onclick="fn3()" name="bb">bbb</button>
        
        <script type="text/javascript">
            function fn1(){
                //通过id来调取 也可用 document.getElementById() 来获取id
                //但是这种方法只适用于少量的元素，如果元素过多，则需要定义许多id
                // d1.style.backgroundColor="pink";
                
                //标签选择器 去拿出多个元素 这样比拿出id要方便快捷 但是会拿出多个 所以是一个数组
                var ds=document.getElementsByTagName("div")
                ds.style.backgroundColor="pink";//这里的ds是一个数组，它不能设置标签
                
                //Cannot set properties of undefined
                //不能设置来自未定义的属性（设置background的时候报的错）
                
                //遍历数组
                for(var i=0;i<ds.length;i++){
                    ds[i].style.background="pink";
                }
                
                //foreach 直接遍历数组
                for(let i of ds){
                    //i就是每一个元素
                    i.style.background="pink";
                }
            }
            
            function fn2(){
                var aa=document.getElementsByClassName("a")
                //只要碰到循环(尤其是foreach循环) 就不能用var 用let(定义局部变量)
                for( let i of aa){
                    i.style.background="purple"
                }
            }
            function fn3(){
                var aa=document.getElementsByName("bb")
                //只要碰到循环(尤其是foreach循环) 就不能用var 用let(定义局部变量)
                for( let i of aa){
                    i.style.background="purple"
                }
            }
        </script>
    </body>
</html>

2.焦点事件

onfocus : 获得焦点事件

onblur : 失去焦点事件

利用焦点事件来实现输入框的值的变换


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Score</title>
    </head>
    <body>
        <!-- 30个输入框 -->
        <input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
                type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
                type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
                type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
                type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
                type="text"><input type="text"><input type="text"><input type="text">
    
        <button type="button" onclick="fn1('哈哈')">哈哈</button>
        <button type="button" onclick="fn1('嘻嘻')">嘻嘻</button>
        
    <script type="text/javascript">
    //填充信息的函数
         function fn1(a) {
                //1.拿到所有的输入框
                var is=document.getElementsByTagName("input")
                //2.更改值
                for(var i of is){
                    i.value=a
                }
            }
    //修改信息的函数
        (()=>{
                //1.拿到所有输入框 记住拿出来的是个集合
                var is=document.getElementsByTagName("input")
                //2.更改值 (获得焦点事件，失去焦点事件)
                //碰到循环 不能用var (尤其是foreach循环) 要用let(定义局部变量)
                for(let i of is){
                    //获得焦点事件
                    i.onfocus=()=>{
                        i.value=""
                    }
                    //失去焦点事件
                    i.onblur=()=>{
                        i.value="巴拉巴拉"
                    }
                }
        })();
        
    </script>
    </body>
</html>

3.鼠标移动事件

onmouseover : 鼠标移入

onmouseout : 鼠标移出

也可以用鼠标移动事件来完成输入框文本的替换（需要把焦点事件的函数替换为鼠标移动事件的函数）


(()=>{//鼠标移动事件
				//1.拿到所有输入框 记住拿出来的是个集合
				var is=document.getElementsByTagName("input")
				//2.更改值 （利用鼠标移动事件）
				//碰到循环 不能用var (尤其是foreach循环) 要用let(定义局部变量)
				for(let i of is){
					//鼠标移入事件
					i.onmouseover=()=>{
						i.value=""
					}
					//鼠标移出事件
					i.onmouseout=()=>{
						i.value="巴拉巴拉"
					}
				}
		})();

四，HTML元素的常用属性

textContent : 标签的文本内容(定义的标签不生效即不能识别HTML语句)

InnerHTML : 标签中的html内容(标签会生效能够识别HTML语句)

checked ：表示是否被选中(用于单选框,多选框)

style : 标签中的style属性(用于设置样式)

value : 元素的值(适用具备value属性的元素)

五，元素的显示

1.display

dispaly 元素的显示方法
               1.none:不显示(界面中也不会留有元素原本的位置)
               2.block:以块状元素显示 (会跨行)
               3.inline:以行状元素显示(在一行内)
               4.inline-block 以行内块状元素显示(在行内，又可以跨行)

               if(d1.style.display==="none"){
                   d1.style.display="block";
               }else {
                   d1.style.display="none"
               }

2.visibility

visibility 元素的显示方法,分两种状态
               1.visible:可见
               2.hidden:不可见(但是会占据空间)

               if(d1.style.visibility==="visible"){
                   d1.style.visibility="hidden";
               }else{
                   d1.style.visibility="visible"
               }

3.opacity

opacity:元素的显示方式(主要用于控制元素的透明度,范围是0-1)
               注意:只是设置成了全透明，但是元素仍然存在；

               if(d1.style.opacity==0){
                   d1.style.opacity=1;
               }else{
                   d1.style.opacity=0
               }
           }

六，实验

利用元素显示来实现菜单隐藏功能，（点击菜单可以隐藏子菜单）用的都是今天教大家的知识哦，大家一起来试试吧！

示例代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Score</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: bisque;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<button type="button" onclick="fn1()">点我隐藏</button>
		<!--hr 分割线标签 -->
		<hr >
		<!--ul 无序标签 ol 有序标签  -->
		<ul>
			<li ><i onclick="fn2('u1')">家电</i>
				<ul id="u1">
					<li>冰箱</li>
					<li>电视</li>
					<li>洗衣机</li>
				</ul>
			</li>
			<li><span onclick="fn2('u2')">水果</span>
				<ul id="u2">
					<li>苹果</li>
					<li>香蕉</li>
					<li>菠萝</li>
				</ul>
			</li>
		</ul>
		<hr>
		<table border>
		    <tr>
				<!-- this 的意思就是把自己这个标签传入函数中 checked 是一个属性 表示是否被选中  -->
		        <td><input type="checkbox" onclick="fn3(this.checked)"></td>
		        <td><input type="checkbox"></td>
		        <td><input type="checkbox"></td>
		        <td><input type="checkbox"></td>
		        <td><input type="checkbox"></td>
		        <td><input type="checkbox"></td>
		        <td><input type="checkbox"></td>
		        <td><input type="checkbox"></td>
		        <td><input type="checkbox"></td>
		        <td><input type="checkbox"></td>
		    </tr>
		</table>
		<script type="text/javascript">
			//隐藏元素的函数
			function fn1(){
				//用id来控制元素
				
				//dispaly 元素的显示方法 
				//1.none:不显示(界面中也不会留有元素原本的位置)
				//2.block:以块状元素显示 (会跨行)
				//3.inline:以行状元素显示(在一行内)
				//4.inline-block 以行内块状元素显示(在行内，又可以跨行)
				
				// if(d1.style.display==="none"){
				// 	d1.style.display="block";
				// }else {
				// 	d1.style.display="none"
				// }
				
				//visibility 元素的显示方法,分两种状态
				//1.visible:可见
				//2.hidden:不可见(但是会占据空间)
				
				// if(d1.style.visibility==="visible"){
				// 	d1.style.visibility="hidden";
				// }else{
				// 	d1.style.visibility="visible"
				// }
				
				//opacity:元素的显示方式(主要用于控制元素的透明度,范围是0-1)
				//注意:只是设置成了全透明，但是元素仍然存在；
				
				if(d1.style.opacity==0){
					d1.style.opacity=1;
				}else{
					d1.style.opacity=0
				}
			}
			
			//隐藏菜单的函数
			function fn2(id){
				//根据id拿出对应的元素
				//将对应元素设置为不显示
				var uid=document.getElementById(id);
				if(uid.style.display==="none"){
					uid.style.display="block"
				}else{
					uid.style.display="none";
				}
			}
			
			//实现全选功能的函数
			//拿到是否被选中的状态
			function fn3(status){
				//拿到所有多选框
				//设置选中第一个的多选框的状态 status
				var is=document.getElementsByTagName("input")
				//遍历数组 记得要用let
				for(let i of is){
					//这里的i就是每一个多选框
					i.checked=status;
				}
			}
		</script>
	</body>
</html>

今天的JS分享就到这里啦，精彩下期继续！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/113284