JavaScript高级（详细总结）

热爱编程的申同学

已于 2022-08-20 09:35:05 修改

阅读量1.5k

点赞数

分类专栏：前端文章标签： javascript 前端 html css

于 2022-08-19 09:50:34 首次发布

本文链接：https://blog.csdn.net/select_myname/article/details/126408834

版权

前端专栏收录该内容

5 篇文章 10 订阅

订阅专栏

2.1.1、getElementById()

2.1.2、getElementsByTagName()

2.1.3、getElementsByName()

2.2、操作内容

2.2.1、相关属性

2.3、常用的事件

2.3.1、案例一（验证手机号码是否正确）

2.3.2、案例二鼠标悬浮切换图片

2.3.3、案例三鼠标按下松开切换背景颜色

2.4、操作节点

2.4.1、appendChild添加子标签

2.4.2、removeChild删除子标签

2.4.3、setAttribute添加属性

2.4.4、removeAttribute删除属性

1、BOM对象

1.1、window对象

1.1.1、frameset

可以把window页面进行分割, 是一个框架标签，把页面引入或者进行割，最大的缺点就不能body一块使用。

<frameset> 分割的标签

<frame> 标签引入其他页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="10%,*">
        <frame src="head.html">
		
		<frameset cols="15%,*">
			  <frame src="left.html">
			  <frame src="right.html">
		</frameset>
	</frameset>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我是头部</h1>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我是侧边栏</h1>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我是主体部</h1>
	</body>
</html>

1.1.2、iframe

可以把window页面进行分割，是一个框架标签，可以和body一块使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="right.html" frameborder="1"></iframe>
		<h1>hello world</h1>
	</body>
</html>

1.1.3、confrim确认框架

confrim两个值确定（true）取消(false) var con = window.confrim(消息); 返回的类型为boolean

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<input type="button" value="删除" id="_delete">
	</body>
	<script>
		 var _delete=document.getElementById("_delete");
		 _delete.onclick=function(){
			if(confirm("你确认要删除我?")){
				alert("删除成功");
			}else{
				alert("谢谢你手下留情");
			}
			 
		 }
	</script>
</html>

1.1.4、时间周期

clearInterval()	取消由setInterval()设置的timeout
clearTimeout()	取消setTimeout()设置的timeout
setInterval()	指定时间周期
setTimeout()	在指定的毫秒数后调期函数或者计算表达式

案例让时间走动，进行开始或者停止控制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<span id="_time"></span>
		<input type="button" onclick="stopTime()" value="暂停时间">
		<input type="button" onclick="startTime()" value="开始时间">
	</body>
	<script>
        //设置时间周期，间隔一秒调用setTime函数
		var set_Time=setInterval("setTime()", 1000);
		window.onload = function() {
			var _time = document.getElementById("_time");
		}
		function setTime() {
			var date = new Date();
            //日期格式转换为字符串格式
			var time = date.toLocaleString();
            //替换内容
			_time.innerHTML = time;
		}
		function stopTime(){
            //消除时间周期
			clearTimeout(set_Time);
		}
		function startTime(){
           //重新设置时间周期
		   set_Time=setInterval("setTime()", 1000);
		}
		
	</script>
</html>

1.1.5、倒计时案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <!--设置倒计时时间-->
		<meta http-equiv="refresh" content="10;https://www.baidu.com">
		<title></title>
		
	</head>
	<body>
		还有<span id="time_m" style="color: orange; font-size: 18px;"></span>秒跳转到<a href="https://www.baidu.com">百度</a>
	</body>
	<script>
		var time_m=document.getElementById("time_m");
		var time=10;
	    window.onload=function(){
			var _time=setInterval("setTime()",1000);
		}	
		function setTime(){
			time_m.innerHTML=--time;
		}
	</script>
</html>

1.1.6、关闭、打开浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open_Browser(){
				window.open("https://www.baidu.com");
			}
			function close_Browser(){
				window.close();
			}
		</script>
	</head>
	<body>
		<input type="button" value="打开浏览器" onclick="open_Browser()">
		<input type="button" value="关闭浏览器" onclick="close_Browser()">
	</body>
</html>

1.2、history对象

history对象包含用户访问过的url, 注意：一定是访问过的历史url

history是window对象的一部份，可以通过window.history属性进行访问

back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载hitory列表中的某一个具体的页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我是a页面</h1>
		<a href="b.html">跳转到b页面</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function backPage() {
				history.back();
			}

			function forwardPage() {
				history.forward();
			}

			function goPage() {
			/* 
			负数是指定上一个页（左边）  
			正数是指定下一个页（右边）  
			*/
				history.go(1)
			}
		</script>
	</head>
	<body>
		<h1>我是b页面</h1>
		<a href="c.html">跳转到c页面</a>
		<input type="button" value="返回上一页" onclick="backPage()">
		<input type="button" value="跳到下一页" onclick="forwardPage()"">
		<input type="button" value="指定跳转" onclick="goPage()">
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function goPage(){
				history.go(-2);//返回a页面
			}
		</script>
	</head>
	<body>
		<h1>我是c页面</h1>
		<input type="button" value="指定跳转" onclick="goPage()"">
	</body>
</html>

1.3、Location对象

Location对象是window对象的一部份，可以通过window.location属性来访问

location表示是当前浏览器的地址对象。浏览器的地址中主要保存的是访问某个网站的url地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
		function skip(){
			location.href="https://www.baidu.com";
		}
		
	</script>
	<body>
		<input type="button" value="跳转百度" onclick="skip()">
	</body>
</html>

2、DOM对象

2.1、document对象

Document对象代表整个html文档，可用来访问页面中的所有元素，快速获取html中的页面的标签对象。

document.getElementById()	返回指定id对象的引用
document.getElementsByName()	返回指定带有名称的对象集合
document.getElementsTagName()	返回指定带有标签名的对象集合
document.getElementsByClassName()	根据Class属性值获取元素对象们，返回值是一个数组
document.querySelector(选择器)	根据选择器，获取元素，适合选择一个（#id .class div）
document.querySelectorAll(css选择器)	根据css选择器获取元素，适合选择多个，返回是一个数组

1、querySelectorAll 是找出所有匹配的节点后，返回对应的元素节点数组.如果没有则返回undefinde。

2、querySelector 是找到一个后立刻返回找到的第一个节点对象，如果没有则返回null。

2.1.1、getElementById()

案例：显示/隐藏密码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		密码：<input type="password" name="pwd" id="pwd_id">
		<input type="button" value="显示/隐藏密码" onclick="changeType()"">
	</body>
	<script>
		var pwd=document.getElementById("pwd_id");
		function changeType(){
			if(pwd.type=="password"){
				pwd.type="text";
			}else if(pwd.type=="text"){
				pwd.type="password";
			}
			
		}
	</script>
</html>

2.1.2、getElementsByTagName()

案例：图片放大缩小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<img src="../img/1.png" alt="" width="400px">
		<input type="button" value="放大" onclick="increate()">
		<input type="button" value="减小" onclick="decreate()">
	</body>
	<script>
        //方式一，返回的是数组
		var imgs=document.getElementsByTagName("img");
        //方式二，querySelectorAll("img") 返回也是数组 可以根据css选择器选中
		function increate(){
            //获取到的是img数组，所以取出数组中第一个图片
			imgs[0].width+=40;
		}
		function decreate(){
			
			imgs[0].width-=40;
		}
	</script>
</html>

2.1.3、getElementsByName()

案例：提交多选框后输出所选内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<input type="checkbox" name="hobby" value="悠悠球" />悠悠球
		<input type="checkbox" name="hobby" value="乒乓球" />乒乓球
		<input type="checkbox" name="hobby" value="足足球" />足足球

		<input type="button" value="提交" onclick="demo()" />
	</body>
	<script>
		
		function demo(){
            //获取到的元素对象是一个数组，所以需要进行遍历
			var hobby=document.getElementsByName("hobby");
			for(var i=0;i<hobby.length;i++){
				if(hobby[i].checked==true){
					console.info(hobby[i].value);
				}
			}
			
		}
	</script>
</html>

2.2、操作内容

2.2.1、相关属性

属性名	描述
element.innerText	获取或者修改元素的纯文本内容
element.innerHTML	获取或者修改元素的html内容
element.outerHTML	获取或者修改包含自身的html内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="myDiv">
			<h4>注释</h4>
			程序猿最讨厌自己写注释，
			同时也最讨厌别人不写注释
		</div>
	</body>
	<script>
		// element.innerText获取或者修改元素的纯文本内容
		// element.innerHTML获取或者修改元素的html内容
		// element.outerHTML获取或者修改包含自身的html内容
		var myDiv = document.getElementById("myDiv");
		console.log(myDiv.innerText);
		console.log(myDiv.innerText += "pppp");

		console.log(myDiv.innerHTML);
		console.log(myDiv.innerHTML += "aaasp");

		console.log(myDiv.outerHTML);
		console.log(myDiv.outerHTML += "pppp");
	</script>
</html>

innerText与innerHTML的区别：（经典面试题）
1、innerText 获取的是纯文本，innerHTML获取的是所有html内容。
2、innerText 设置到页面中的是纯文本，innerHTML设置到页面中的html会展示出外观效果。
3 innerHTML不包含自身，outerHTML包含自身的html内容。

2.3、常用的事件

点击事件

事件	描述
onclick	单击事件
ondblclick	双击事件

焦点事件

事件	描述
onblur	失去焦点
onfocus	元素获得焦点

加载事件

事件	描述
onload	页面加载完成后立即发生

鼠标事件

事件	描述
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开

键盘事件

事件	描述
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

改变事件

事件	描述
onchange	域的内容被改变

表单事件

事件	描述
onsubmit	提交按钮被点击