JavaScript BOM编程

時宜

已于 2022-03-02 23:25:02 修改

阅读量360

点赞数 9

文章标签： javascript

于 2022-03-01 17:23:42 首次发布

本文链接：https://blog.csdn.net/weixin_62270300/article/details/123210850

版权

1.document.getElementById() : 通过标签中的id属性

2.document.getElementsByTagName() : 通过标签名

3.document.getElementsByClassName() : 通过标签中的class属性

一、DOM和BOM的区别

1.BOM

浏览器对象模型，用来获取或设置浏览器的属性、行为。例如：新建窗口、获取屏幕分辨率等

2.DOM

文档对象模型，用来获取或设置文档中标签的属性，例如：获取或者设置input表单的value值

二、如何在JS中获取HTML元素

1.document.getElementById() : 通过标签中的id属性

注：通过id获取元素返回的不是数组，而是单个值

2.document.getElementsByTagName() : 通过标签名

注：getElementsByTagName(“标签名”) ；函数返回的是一个数组类型的值

3.document.getElementsByClassName() : 通过标签中的class属性

注：函数返回的是一个数组类型的值

代码如下;


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200PX;//宽度
				height: 300PX;//长度
				background: pink;//背景颜色
				display:inline-block ;//行内块状
			}
		</style>
	</head>
	<body>
		<div id="d1" class="a"></div>
		<div id="d2" class="a"></div>
		<div id="d3"></div>
		<br>
		<button onclick="fn1()">id更改颜色</button>
		<button onclick="fn2()">标签更改颜色</button>
		<button onclick="fn3()">类更改颜色</button>
		
		<script type="text/javascript">
       
           //document.getElementById() : 通过标签中的id属性
         
			function fn1(){
				//直接使用id
			// 	d1.style.background="purple"
			//Element 元素(标签)
			var d=document.getElementsById("d1")
			d.style.background="purple"
			}
			//Cannot set properties of undefined (setting 'background')
			//不能设置属性来自未定义对象（设置background的时候报的错）

            //document.getElementsByTagName() : 通过标签名

			function fn2(){
			//Element 元素(标签)
			//标签选择器 会拿出多个元素
			var ds=document.getElementsByTagName("div")
			//数组中放的是不是标签？
			//遍历数组
			// for(var i=0;i<ds.length;i++){
			// 	ds[i].style.background="purple"
			// }
			for(var i of ds){
				//i就是每一个元素
				i.style.background="purple"
			}
			}
			
           //document.getElementsByClassName() : 通过标签中的class属性
			function fn3(){
			//Element 元素(标签)
			//类选择器 会拿出多个元素
			var ds=document.getElementsByClassName("a")//a为类名
			
			for(var i of ds){
				//i就是每一个元素
				i.style.background="skyblue"
			}
			}
		</script>
	</body>
</html>

三、元素的显示和隐藏

控制元素的显示（style）

visibility属性的值

值	描述
visible	表示元素是可见的
hidden	表示元素是不可见的（会占据页面空间）

display属性的值

值	描述
none	表示此元素不会被显示（页面不会有空间）
block/inline/inline-block	表示该元素为块/行内/行块元素

opacity

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

隐藏和显示图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: pink;
				
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<button onclick="fn1()">点我隐藏display</button>
		
		<button onclick="fn2()">点我隐藏opacity</button>
		<script>
			function fn1(){
				//如果显示 那么隐藏
				//如果隐藏 那么显示
				if(d1.style.display==="none"){
					d1.style.display="block"
				}else{
					d1.style.display="none"
				}
			}
			function fn2(){
				if(d1.style.opacity==0){
					d1.style.opacity=1
				}else{
					d1.style.opacity=0
				}
				}
		</script>
	</body>
</html>

显示如下

点我隐藏display的效果如下

点我隐藏opacity的效果如下

四、HTML元素上的常用事件

onclick : 点击事件 ondblclick : 双击事件 onfocus : 获得焦点事件

onblur : 失去焦点事件 onmouseover : 鼠标移入 onmouseout : 鼠标移出

五、HTML元素上的常用属性

textContent : 标签的文本内容(定义的标签不生效)

InnerHTML : 标签中的html内容(标签会生效)

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

checked ：是否被选中(单选框,多选框)

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

六、例题

关于输入框

1. 不同按钮点击的时候为当前界面中的input赋上不同的值
2. 当input获得焦点时清空他的值，失去焦点的时候显示巴拉巴拉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    //定10个输入框
		<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 onclick="fn1('哈哈')">哈哈</button>
		<button onclick="fn2('嘻嘻')">嘻嘻</button>
		<script>
			function fn1(a){
				//1.拿到所有的输入框
				var is=document.getElementsByTagName("input")
				//2.更改值
				for(var i of is){
					i.value=a
				}
			}
			//找到页面中所有的输入框
			//给所有的输入框赋值（失去焦点事件，获得焦点事件）
			(()=>{
				var is=document.getElementsByTagName("input")
				//只要碰到循环不能用var
				//使用let 定义局部变量
				for(let i of is){
					//给元素获得焦点事件赋值
					i.onfocus=()=>{
						i.value=""
					}
					//给元素失去焦点事件赋值
					i.onblur=()=>{
						i.value="巴拉巴拉"
					}				
					}
			})();
				</script>
	</body>
</html>

注：遇到循环不要用var 用let（定义局部变量）

实现左侧菜单功能

要求：点击家电或水果各隐藏下面的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<ul>
			<li><span onclick="fn3('u1')">家电</span>
			<ul id="u1">
				<li>冰箱</li>
				<li>电视</li>
				<li>洗衣机</li>
			</ul>
			</li>
			
			<li> <span onclick="fn3('u2')">水果</span>
			<ul id="u2">
				<li>苹果</li>
				<li>菠萝</li>
				<li>西瓜</li>
			</ul>
			</li>
		</ul>
		<script>
				function fn3(id){
					//根据id拿出对应的元素
					var li= document.getElementById(id)
					if(li.style.display==="none"){
						li.style.display="block"
					}else{
						li.style.display="none"
					}
				}
		</script>
	</body>
</html>

效果如下

点击后的效果如下：

实现表格中的全选按钮功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border>
			<tr>
				<td><input type="checkbox" onclick="fn4(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>
				<tr><td><input type="checkbox"></td>
			</tr>
		</table>
		<script>
				function fn4(status){
					//拿到所有的多选框					
					//设置选中为第一个多选框的状态
					var is=document.getElementsByTagName("input")
					for(let i of is){
						i.checked=status
					}
				}
		</script>
	</body>
</html>

效果如下：

总结：

以上就是关于JavaScript BOM编程的一些内容之后还会更新更多关于JavaScript的其他内容

欢迎大家关注

時宜

关注

9
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript BOM编程

目录一、DOM和BOM的区别1.BOM2.DOM二、如何在JS中获取HTML元素1.document.getElementById() : 通过标签中的id属性2.document.getElementsByTagName() : 通过标签名3.document.getElementsByClassName() : 通过标签中的class属性三、元素的显示和隐藏控制元素的显示（style）visibility属性的值display属性的值opacity..
复制链接

扫一扫