JavaScript(Bom编程）

已于 2022-11-28 17:02:21 修改
阅读量2.8k 收藏 5
点赞数 8
文章标签： javascript 前端 css3
于 2022-03-01 18:05:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65474399/article/details/123210920
版权

昨天给大家分享了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分享就到这里啦，精彩下期继续！

xiongᥫᩣ
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
[DOM]获取元素：根据ID、标签名、HTML5新增的方法、特殊元素获取
「 虚幻私塾」
09-11 2349
目录*+++
js（基础九）{获取元素 BOM DOM 定时器}
gleaner_的博客
09-05 276
BOM(Browser Object Model浏览器对象模型) BOM是JS中的一个组成部分，用于操作浏览器 BOM 可以做的事情有很多很多 获取浏览器的视口尺寸 修改浏览器的地址栏 通过BOM可以操作历史记录 可以关闭页面 可以设置定时器 延时器 可以获取浏览器的信息 …… 获取浏览器的尺寸 console.log(window.innerWidth); // 输出浏览器视口宽度 ...
JavaScript DOM / BOM （查询获取元素对象【增、删、改、查】 ）以及常见鼠标事件
前端、python爱好者
06-01 420
1、获取元素 1.1、根据ID获取 document.getElementById(‘id’); 1.2、根据标签名获取1（使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。） element.getElementsByTagName(‘标签名’); 注意： 1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。 2. 得到元素对象是动态的 3. 如果获取不到元素,则返回为空的伪数组(因为获取不到对象) 1.3、根据标签名获取2 （获取某个元
JavaScript学习笔记 07、BOM元素
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-07 605
文章目录前言一、认识BOM二、介绍window对象2.1、全局变量是window的属性(以及一些内置函数)2.2、窗口尺寸相关属性2.3、窗口改变大小事件(onresize)2.4、卷动高度与卷动事件(onscroll)三、document相关事件3.1、切换屏幕(onvisibilitychange)四、navigator对象五、history对象六、location(含案例)七、BOM制作特效7.1、认识offsetTop属性案例1：返回顶部按钮案例2：楼层导航小效果 前言 本篇博客是关于javascr
BOM事件 定时器的使用 元素获取的方法 计算器，数组对象表格在网页显示
qq_45675879的博客
09-25 161
BOM事件 1.onload事件 会在页面全部加载完之后才会执行 window.onload = function(){ console.log("页面全部加载完才执行"); } console.log("页面还在加载"); 2.resize 事件 window.onresize = function(){ console.log("页面尺寸发生了改变"); } ...
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
唯恋殊雨的博客
09-24 2503
Web API Web API介绍 API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log()) We...
JavaScript语言编程规范.docx
03-05
JavaScript语言编程规范旨在确保开发团队遵循一致的代码风格，提高代码质量、可读性和可维护性。这份规范涵盖了多个方面，包括文件组织、编码格式、排版规则、命名规范等。 1. **文件组织** - JavaScript代码应当...
JavaScript面向对象编程指南.pdf
06-19
面向对象编程的基础知识及其在JavaScript中的运用；数据类型、操作符以及流程控制语句；函数、闭包、对象和原型等概念，以代码重用为目的的继承模式；BOM、DOM、浏览器事件、AJAX和JSON；如何实现JavaScript中缺失的...
JavaScript中BOM对象原理与用法分析
12-11
JavaScript中的BOM（Browser Object Model）是用于描述浏览器窗口与用户交互的一种模型，它提供了一系列的对象，使得开发者可以通过...通过不断实践和深入学习，可以更好地利用JavaScript与BOM进行高效的浏览器编程。
js中利用tagname和id获取元素的方法
11-24
本文分享了js中利用tagname和id获取元素的3种方法，供大家参考，具体内容如下 方法一：整体法，先获取所有的元素，再通过ai+-b的方法来算出需要的元素 方法二：数组法，在全局环境下建立空数组，遇到需要循环的结构时，在循环中获取元素，并放入数组 方法三：函数法，遇到相同的几组元素时，只操作一组元素，并用函数传参来实现所有的效果 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3种用tagname和id获取元素的方法</title> <style> body{ margin
js 用ID获取元素
m0_49040755的博客
07-26 2713
var x=document.getElementById() 在括号中输入元素的ID即可获得 例如 <button class="bot" id="s"> 触摸 </button> var lise=document.getElementById("s") console.log(lise)
元素获取的六种方式
qq_52654932的博客
03-22 1271
querySlectorAll():获取指定选择器的所有元素，参数就是选择器的名称。querySlector():获取指定选择器的第一个元素，参数就是选择器的名称。
JavaScript DOM中获取元素、事件基础、操作元素、节点操作
11-17 1763
JavaScript DOM中获取元素、事件基础、操作元素、节点操作
js获取元素的方法
最新发布
zybijiso666的博客
08-01 4447
getElementsByClassName()方法返回一个包含了所有指定类名的子元素的类数组对象，作为nodeList对象。documentElement是整个节点树的根节点，即html标签 HTML文档返回对象为HTML元素。getElementsByTagName()方法返回一个动态的包含所有指定标签名的元素的。(documentElement是一个会返回文档对象的根元素的只读属性)documentElement属性以一个元素对象返回一个文档的文档元素。如果HTML元素缺失，返回值为null。
JS根据id获取元素值
热门推荐
Zoriah的博客
07-16 1万+
1、$("#id").val() 2、document.getElementById(“id”).value
介绍获取元素的几种常见方式
m0_55679692的博客
06-28 357
1.根据id获取元素 document.getElementById("id属性的值"); 返回值是一个元素对象 2.根据标签名字获取元素 document.getElementsByTagName("标签的名字"); 返回值是一个伪数组 3.根据name属性的值获取元素 document.getElementsByName("name属性的值"); 返回值是一个伪数组 4.根据类样式的名字获取元素 document.getElementsByClassName("类样式的名字"); 返回值是一个伪数组 .
DOM获取元素
m0_73903826的博客
02-24 245
DOM获取元素

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值