JavaScript的外部对象

最新推荐文章于 2020-10-07 22:23:42 发布

linsa_pursuer

最新推荐文章于 2020-10-07 22:23:42 发布

阅读量361

点赞数

分类专栏： JSP基础文章标签： javascript

本文链接：https://blog.csdn.net/linsa_pursuer/article/details/78524332

版权

JSP基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一.外部对象分为BOM和DOM
1.BOM（浏览器对象模型）window对象里模型，其中document跟DOM连接
2.DOM（文档对象模型）document对象，html根元素，元素，文本，属性

二.window对象——BOM
1.常用属性：
（1）document（窗口中显示的HTML文档对象）

（2）history（浏览过窗口的历史记录对象）
属性：length（URL数量）
方法：back(),forward(),go(num)

（3）location（窗口文件地址对象）
属性：href（当前窗口正在浏览的网页地址）
方法：reload()（重新载入当前网址，同按下刷新按钮）

（4）screen（当前屏幕对象）
常用属性：width/height（总宽高）,availWidth/availHeight（可用的宽高）
（5）navigator（浏览器相关信息）——navigator.userAgent

2.常用方法：
（1）alert(str);——提示对话框，显示str字符串内容
（2）confirm(str);——确定对话框，显示str字符串内容（按“确定”按钮返回true，否则false）
（3）setTimeout(exp，time);——一次性触发代码exp（返回已经启动的定时器）
（4）clearTimeout(id);——停止启动的定时器对象
（5）setInterval(exp，time);——周期性定时器，周期性触发代码exp
（6）clearInterval(id);——停止启动的定时器对象

三.document对象——DOM
1.节点信息：文档节点、元素节点、注释节点、文本节点、属性节点
nodeName（节点名称）：文本节点#text，文档节点#document
nodeType（节点类型）：元素节点返回1，属性节点返回2，文本节点返回3，
注释节点返回8，文档节点返回9
2.节点内容：innerText（标签里文本）,innerHTML（标签里的标签和文本）
3.节点属性：getAttribute()方法——获取属性值，setAttribute()，removeAttribute()
4.元素节点的样式：className属性：node.className = "hide",node.className = ""
style属性：node.style.color,node.style.fontSize

5.查询节点：
根据id查询：document.getElementById();
根据name查询：document.getElementByName();
根据标签名查询：document.getElementByTagName();
根据层次查询节点：parentNode,childNodes

6.增加节点：
var newNode = document.createElement(elementName);
newNode.innerHTML = ;
var parentNode = document.getElementById("city");
parentNode.appendChild(newNode);

7.插入节点：
var newNode = document.createElement(elementName);
newNode.innerHTML = content;
var parentNode = document.getElementById(elementName);
var refNode = document.getElementById(elementName);
parentNode.insertBefore(newNode,refNode);——>插入refNode节点之前

8.删除节点：
var parentNode = document.getElementById(elementName);
var childNode = document.getElementById(elementName);
parentNode.removeChild(childNode);

BOM常用属性demo1：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
	function f1(){
		var b=confirm("您确定要离开本网站吗？");
		if(b){
			location.href="http://www.baidu.com";
		}
	}
	function f2(){
		location.reload();
	}
	function f3(){
		history.forward();
	}
	
	//页面加载之初，获取屏幕的尺寸
	console.log(screen.width);
	console.log(screen.height);
	console.log(screen.availWidth);
	console.log(screen.availHeight);
	
	//页面加载时，获取浏览器的版本信息
	console.log(navigator.userAgent);
</script>
</head>
<body>
	<input type="button" value="百度" οnclick="f1();">
	<input type="button" value="刷新" οnclick="f2();">
	<input type="button" value="前进" οnclick="f3();">
</body>
</html>

定时器demo2：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script>
	//周期性定时器
	function f1(){
		var n =5;
		//启动周期性定时器：
		//每隔1000毫秒，让浏览器调用一次函数。
		//返回值是定时器的id，用于停止定时器。
		var id = setInterval(function(){
			console.log(n--);
			if(n<0){
				//停止定时器
				clearInterval(id);
				console.log("炸！");
			}
		} ,1000);
		//启动的定时器类似于一个子线程，
		//当前的方法f1类似于主线程（main），
		//二者并发执行，即主线程启动完子线程后，
		//立刻输出BOOM，而子线程却在1秒后执行第一次。
		console.log("BOOM!");
	}
	//一次性定时器
	var id;
	function f2(){
		//启动一次性定时器：
		//在5000毫秒后，让浏览器调用函数。
		//调用完成后，定时器会自动结束。
		//也可以在未调用前，手动结束。
		id = setTimeout(function(){
			console.log("预备！");
		},5000);
	}
	function f3(){
		clearTimeout(id);
	}
</script>
</head>
<body>
	<input type="button" value="倒数" οnclick="f1();">
	<input type="button" value="预备" οnclick="f2();">
	<input type="button" value="取消" οnclick="f3();">
</body>
</html>

时钟demo3：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时钟</title>
<style>
	#screen{
		border: 1px solid red;
		width: 200px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 20px;
	}
</style>
<script>
	var id;
	function start(){
		//若id非空，表示定时器已启动，不要再次启动
		if(id){
			return;
		}
		id = setInterval(function(){
			var date = new Date();
			var time = date.toLocaleTimeString();
			var p = document.getElementById("screen");
			p.innerHTML=time;
		} ,1000);
	}
	function stop(){
		clearInterval(id);
		//清空id，以便于下次启动
		id=null;
	}
</script>
</head>
<body>
	<input type="button" value="开始" οnclick="start();">
	<input type="button" value="停止" οnclick="stop();">
	<p id="screen"></p>
</body>
</html>

发送邮件demo4:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发邮件</title>
<style>
	#screen{
		width: 200px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 20px;
		background-color: orange;
	}
</style>
<script>
	var id;
	function send(){
		//定时器已启动，不要再次启动
		if(id){
			return;
		}
		var p = document.getElementById("screen");
		p.innerHTML="正在发送";
		id = setTimeout(function(){
			p.innerHTML="已发送";
			//停止定时器时，清空id
			id=null;
		} ,3000);
	}
	function cancel(){
		if(id){
			clearTimeout(id);
			var p = document.getElementById("screen");
			p.innerHTML="已撤回";
			//停止定时器时，清空id
			id=null;
		}
	}
</script>
</head>
<body>
	<input type="button" value="发邮件" οnclick="send();">
	<input type="button" value="撤回" οnclick="cancel();">
	<p id="screen"></p>
</body>
</html>

DOM操作demo5：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读写节点</title>
<script>
	//onload是页面加载事件，在页面加载完成后自动触发。
	window.onload = function(){
		//1.读取节点的类型和名称
		var p1 = document.getElementById("p1");
		console.log(p1.nodeType);
		console.log(document.nodeType);
		console.log(p1.nodeName);
		console.log(document.nodeName);
		
		//2.读写节点的内容
		//双标签中间的文本叫内容
		//innerHTML
		var p2 = document.getElementById("p2");
		console.log(p2.innerHTML);
		p2.innerHTML = "DOM操作包括<u>查询</u>节点";
		//innerText
		var p3 = document.getElementById("p3");
		console.log(p2.innerText);
		p3.innerText = "DOM操作包括<u>增删</u>节点";
		
		//3.读写节点的值
		//表单控件中的数据叫值。
		var b1 = document.getElementById("b1");
		console.log(b1.value);
		b1.value = "BBB";
		
		//4.读写节点的属性
		//通过get,set方法进行读写
		var i1 = document.getElementById("i1");
		console.log(i1.getAttribute("src"));
		i1.setAttribute("src","../images/02.jpg");
		//通过属性名进行读写
		//id,className,style
		var a1 = document.getElementById("a1");
		console.log(a1.style.color);
		a1.style.color = "blue";
	}
</script>
</head>
<body>
	<p id="p1">DOM操作包括<b>读写</b>节点</p>
	<p id="p2">DOM操作包括<b>查询</b>节点</p>
	<p id="p3">DOM操作包括<b>增删</b>节点</p>
	<p>
		<input type="button" value="AAA" id="b1">
	</p>
	<p>
		<img src="../images/01.jpg" id="i1">
	</p>
	<p>
		<a href="#" style="color:red;" id="a1">登录</a>
	</p>
</body>
</html>

查询节点demo6：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询节点</title>
<script>
	window.οnlοad=function(){
		//根据name查询节点
		var radios = document.getElementsByName("sex");
		console.log(radios);
		//根据标签名查询节点
		var lis = document.getElementsByTagName("li");
		console.log(lis);
		//根据层次查询节点
		//查询节点的父亲
		var gz = document.getElementById("gz");
		var ul = gz.parentNode;
		console.log(ul);
		//查询节点的孩子
		console.log(ul.childNodes);
		lis = ul.getElementsByTagName("li");
		console.log(lis);
		//查询节点的兄弟
		//节点.父亲.孩子们[i]
		var sh = gz.parentNode.getElementsByTagName("li")[1];
		console.log(sh);
	}
</script>
</head>
<body>
	<p>
		<input type="radio" name="sex">男
		<input type="radio" name="sex">女
	</p>
	<ul id="city">
		<li>北京</li>
		<li>上海</li>
		<li id="gz">广州</li>
		<li>深圳</li>
		<li>杭州</li>
	</ul>
	<ol>
		<li>河北省</li>
		<li>山东省</li>
		<li>江苏省</li>
	</ol>
</body>
</html>

图片轮播demo7：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
	div {
		width: 218px;
		height: 218px;
		border: 1px solid red;
		margin: 30px auto;
	}
	.hide {
		display: none;
	}
</style>
<script>
	window.οnlοad=function(){
		start();
	}
	var id;
	function start(){
		//轮播次数
		var n = 0;
		id = setInterval(function(){
			n++;
			var imgs = document.getElementsByTagName("img");
			//将所有图片先隐藏
			for(var i=0;i<imgs.length;i++){
				imgs[i].className = "hide";
			}
			//将下一个图片显示
			var next = n % imgs.length;
			imgs[next].className = "";
		},2000);
	}
	function stop(){
		clearInterval(id);
	}
</script>
</head>
<body>
	<!-- hover:伪类选择器
		  onmouseover:鼠标悬停事件
		  onmouseout:鼠标离开事件 -->
	<div οnmοuseοver="stop();" οnmοuseοut="start();">
		<img src="../images/f1.jpg">
		<img src="../images/f2.jpg" class="hide">
		<img src="../images/f3.jpg" class="hide">
	</div>
</body>
</html>

增删节点demo8：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增删节点</title>
<script>
	function f1(){
		//创建新节点
		var li = document.createElement("li");
		li.innerHTML = "雄安";
		//追加此节点
		var ul = document.getElementById("city");
		ul.appendChild(li);
	}
	function f2(){
		//创建新节点
		var li = document.createElement("li");
		li.innerHTML = "香港";
		//插入此节点
		var ul = document.getElementById("city");
		var gz = document.getElementById("gz");
		ul.insertBefore(li,gz)
	}
	function f3(){
		var ul = document.getElementById("city");
		var gz = document.getElementById("gz");
		ul.removeChild(gz);
	}
</script>
</head>
<body>
	<p>
		<input type="button" value="增加" οnclick="f1();">
		<input type="button" value="插入" οnclick="f2();">
		<input type="button" value="删除" οnclick="f3();">
	</p>
	<ul id="city">
		<li>北京</li>
		<li>上海</li>
		<li id="gz">广州</li>
		<li>深圳</li>
		<li>杭州</li>
	</ul>
</body>
</html>