JS-BOM

萧磊y

已于 2022-04-07 21:51:58 修改

阅读量807

点赞数 3

文章标签： javascript 前端

于 2022-04-05 22:06:24 首次发布

本文链接：https://blog.csdn.net/m0_63223374/article/details/123977726

版权

BOM

1.页面元素

1.页面元素

1.1Document对象的常用属性

referrer
返回载入当前文档的文档的URL
URL
返回当前文档的URL

//语法
	document.referrer
	document.URL

1.2Document对象的常用方法

getElementById()
返回对拥有指定id的第一个对象的引用
getElementsByName()
返回带有指定名称的对象的集合
getElementsByTagName()
返回带有指定标签名的对象的集合
write()
向文档写文本、HTML表达式或JavaScript代码

1.3三种访问页面元素的区别

getElementById()
按元素的ID名称来访问
getElementsByName()
按元素的name名称来访问
getElementsByTagName()
按标签来访问

1.3.1语法


//动态改变层、标签中的内容
			//通过id获取组件
			function getEleByid(){
				var da=document.getElementById("da").value;
				console.info("da="+da);
			}

这个是我做的获取组件里的内容的一个小案例这个是通过id获取的，因为id在html标签中是唯一，所以我们通过id获取到的元素也是唯一；这种方法：效率，准确率都很高；不能批量选择元素。

//访问相同name的元素
			//通过name获取组件
			function getEleByName(){
				var nas=document.getElementsByName("na");
				for(var i=0;i<nas.length;i++){
					console.info(nas[i].value);
				}
			}

这里是通过name获取的大家可以看看右边控制台返回的内容
在这里插入图片描述


			//通过标签名获取组件
			function getEleBytagName(){
				var input=document.getElementsByTagName("input");
				for(var i=0;i<input.length;i++){
					console.info(input[i].value);
				}
			}

他所返回的是带有指定标签名的对象集合，这种方法获取到的元素，是一个集合；返回一个由选取到的元素组成的一个类似数组的东西。如果页面中只有一个；那么返回的依然是一个集合，只是集合内的元素个数是1而已；在这里插入图片描述

1.4元素的显示和隐藏

1.4.1visibility属性的值

值：visible
表示元素是可见的
值：hidden
表示元素是不可见的

//语法
object.style.visibility="值"

1.4.2display属性的值

值：none
表示此元素不会被显示
值：block
表示此元素将显示为块级元素，此元素前后会带有换行符

//语法
object.style.display="值"

1.4.3隐藏与显示语法

<script type="text/javascript">
			//隐藏图片
			function fa(){
				//获取img标签
				var da=document.getElementById("da");
				da.style.display="none";//隐藏
			}
			
			//显示图片
			function fb(){
				//获取img标签
				var da=document.getElementById("da");
				da.style.display="block";//显示
			}
			
			//显示隐藏图片按钮合为一体
			function fc(){
				//获取img标签
				var da=document.getElementById("da");
				if(da.style.display=="none"){//如果是隐藏那么就让他显示
					da.style.display="block";//显示
				}else{//如果是显示那么就让他隐藏
					da.style.display="none";//隐藏
				}
			}
		</script>

//body里面写三个按钮和一张图片
		<button type="button" onclick="fa()">隐藏图片</button>
		<button type="button" onclick="fb()">显示图片</button>
		<button type="button" onclick="fc()">显示/隐藏</button>
		<hr >
		<img id="da" src="img/1.gif" >//这里放一张想要隐藏的图片

1.5树形菜单

//使用项目列表制作一个完整的树形菜单
//使用带参数的函数，通过参数来控制显示或隐藏某个列表
		//先在body里写一个有序或无序列表(看个人需求)
		<ul>
			<li>
				<a href="javascript:fa('da')">一.法师</a>
				<ul id="da">
					<li>貂蝉</li>
					<li>妲己</li>
					<li>嬴政</li>
					<li>孔明</li>
				</ul>
			</li>
		</ul>


		//接下来写js代码
		<script type="text/javascript">
			function fa(id) {
				var da = document.getElementById(id);//通过id获取组件
				if (da.style.display == "none") {//隐藏
					da.style.display = "block";//触动的层如果处于隐藏状态，即显示
				} else {//显示
					da.style.display = "none"//触动的层如果处于显示状态，即隐藏
				}
			}
		</script>

1.6复选框

1.6.1复选框的checked属性值

选中：true
未选中：false

1.6.2复选框案例

//复选框全选或者全不选效果
//使用getElementsByName()方法访问同名复选框
//使用document方法分别获取页面中input标签的个数、name为classNo的文本框个数、name为grade的文本框个数
		<script type="text/javascript">
			// 全选
			function qx() {
				// 获取全选复选框
				var qx = document.getElementById("qx");
				// 通过name获取复选框
				var nas = document.getElementsByName("na");
				// 循环遍历nas
				for (var i = 0; nas.length; i++) {
					nas[i].checked = qx.checked;
				}
			}
			// 反选
			function fx() {
				// 通过name获取复选框
				var nas = document.getElementsByName("na");
				// 循环遍历
				for (var i = 0; i < nas.length; i++) {
					nas[i].checked = !nas[i].checked;
				}
			}

			function fd() {
				// 通过name获取复选框
				var nas = document.getElementsByName("na");
				// 循环遍历
				// 第一次循环遍历的目的：给每个复选框添加事件
				for (var i = 0; i < nas.length; i++) {
					nas[i].onclick = function() { // 匿名函数
						// 再次遍历五个复选框：在点击复选框的时候判断其它复选框有没有没被选中
						var f = true; // 其它四个复选框全部选中
						for (var j = 0; j < nas.length; j++) {
							if (nas[j].checked == false) { // 找到了没被选中的复选框
								f = false; // 有没被选中的复选框
								break;
							}
						}
						// 将 f 的值赋给全选复选框的checked属性
						document.getElementById("qx").checked = f;
					}
				}
			}
		</script>
//html代码就是下面代码,body标签里面要调用js代码里的方法
<body onload="fd()">
		<input name="na" type="checkbox" />
		<input name="na" type="checkbox" />
		<input name="na" type="checkbox" />
		<input name="na" type="checkbox" />
		<input name="na" type="checkbox" />
<body/>