JS：BOM和DOM

最新推荐文章于 2022-10-13 17:39:14 发布

zlzzlloo

最新推荐文章于 2022-10-13 17:39:14 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/weixin_52166438/article/details/120027062

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

window对象代表浏览器窗口本身，该对象包含的属性和方法被统称为BOM
在这里插入图片描述

例题：打开广告窗口

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打开新网页</title>   
</head>
<body>
<input type="button" value="打开子窗口" onClick="makenewwindow()">
<script>
    function makenewwindow(){
		newwindow=window.open('','new','width=570,height=380');
		//open的第一个参数为空白，就是打开一个空白网页，第二个参数是新网页的名字
		newwindow.document.write("<img src='001.jpg'>");
		//在打开的新网页里添加图片
		newwindow.document.body.style.margin=0;
		//新网页的外边距设为0
		newwindow.document.title="新窗口";
		//新网页的名称设成新窗口
		newwindow.focus();
		newwindow.opener.document.write('这是父窗口');
		//新网页打开后旧网页的内容就变成这是父窗口
	}
</script>
</body>
</html>

弹出及关闭小窗口

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<img src="002.jpg">
<script>
   window.onload=function(){
	   setTimeout("this.close()",8000);
	   //页面打开后8秒后自动关闭，不放循环里就调用一次
   }
</script>
</body>
</html>

页面滚动

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<div>
	<img src="002.jpg">
</div>
<div>
	<img src="002.jpg">
</div>
<div>
	<img src="002.jpg">
</div>
<div>
	<img src="002.jpg">
</div>
<div>
	<img src="002.jpg">
</div>
<script>
   function mywinscroll(){
	   window.scrollBy(0,60);
	   //向下20px
	   setTimeout("mywinscroll()",1000);
	   //每1秒就自己调用自己滚动一次
   }
   mywinscroll();//调用方法
</script>
</body>
</html>

window子对象

window的history属性是一个History对象，该对象表示当前窗口的浏览历史，历史对象常用方法如表所示。
在这里插入图片描述
网址location对象即可用于访问该窗口的URL地址。location对象包括的属性与方法。

在这里插入图片描述

	location="蛋糕.html";
   	window.location.href="蛋糕.html";
	location.href="蛋糕.html";

上面的三个代码是一样的，进入蛋糕页面，这样的可以用用于广告打开后点击关闭后加载出来蛋糕页面
浏览器(navigator)对象
navigator对象提供关于浏览器环境的信息，navigator常用属性。
通常用于检测浏览器与操作系统的版本。

在这里插入图片描述
判断浏览器是否是主流浏览器

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<script>
	var uagent=navigator.userAgent;
	var Brname="不是享用的主流浏览器";
	if(uagent.indexOf("firefox">-1))
	//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
		Brname="firefox";
	if(uagent.indexOf("Chrome">-1))
		Brname="Chrome";
	if(uagent.indexOf("MSIE">-1)&&uagent.indexOf("Trident">-1))
		Brname="IE(8-10)";
	document.write('浏览器：'+Brname+"<br>");
	document.write('userAgent'+uagent+"<br>");
</script>
</body>
</html>

screen对象在加载HTML文档时自动创建，用于存储浏览者系统的显示信息，screen对象的常用属性。

DOM（文档对象模型）

在这里插入图片描述

在这里插入图片描述
例子

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<label><input type="radio" name="sex" value="男" checked="checked">男</label>
<label><input type="radio" name="sex" value="女">女</label>
<input type="button" value="提交" onclick="show()">
<script>
	function show(){
		var sex=document.getElementsByName('sex');
	if(sex[0].checked)
		alert(sex[0].value);
	else
		alert(sex[1].value);
	}	
</script>
</body>
</html>

在这里插入图片描述
例子

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<div class="keke" name="nam" id="ke">柯柯</div>
<script>
	var a1=document.getElementsByClassName('keke')[0];
	var a2=document.getElementsByName('nam')[0];
	var a3=document.getElementById('ke');
	var a4=document.getElementsByTagName('div')[0];
	alert(a1.innerHTML);
	alert(a2.innerHTML);
	alert(a3.innerHTML);
	alert(a4.innerHTML);
</script>
</body>
</html>

在这里插入图片描述
例子

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<div id="test"><span>text1</span>text2</div>
<script>
	function show(){
	var t=document.getElementById('test');
	alert("t.innerHTML"+t.innerHTML);//含id里面的所有东西，但不含这个id
	alert("t.innerText"+t.innerText);//含id里面的文本，不含这个id
	alert("t.outerHTML"+t.outerHTML);//含id里面的所有东西，包括id
	alert("t.outerText"+t.outerText);//含id里面的文本，含这个id
	}
	show();
</script>
</body>
</html>

DOM对象

通过document内置对象（也是DOM顶层对象）的方法创建不同类型DOM节点对象。针对前面介绍的最常用节点类型完成节点的创建。
createElement方法
createElement(element)方法创建新的元素节点，返回对新节点的对象引用。其中element参数为新节点的标签名，例如超链接标签a
createTextNode方法
createTextNode(string)方法，创建新的文本节点，返回对新节点的对象引用。其中string参数为新节点的文本
createAttribute方法
createAttribute(name)方法，创建新的属性节点，返回对新节点的对象引用。其中name参数为新节点的属性名
添加结点
appendChild方法
appendChild (newChild)方法，添加新节点到方法所属节点的尾部。其中newChild参数为新加子节点对象。appendChild方法适合于元素节点、文本节点等节点的添加，不适合属性节点的添加。
setAttributeNode方法
setAttributeNode(newChild)方法，添加新属性节点到方法所属节点的属性集合中。
在这里插入图片描述
insertBefore方法
insertBefore(newElement, targetElement)方法是将新节点newElement插入到相对节点
targetElement的前面，作为方法所属节点的子节点，newElement与targetElement相邻的兄弟节点，它们的父节点可以通过targetElement. parentNode得到，在方法前面加节点对象就显得多余了，有必要定义一个全局方法，减少多余的节点对象指定。

DOM例子

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<h2>创建并添加结点</h2>
<ul id="nav">
	<li><a href="#">办公系统</a></li>
	<li></li>
	<li><a href="#">科研系统</a></li>
</ul>
<script>
	//创建第二个li
	var navli=document.getElementById('nav').getElementsByTagName('li');
	var a1=document.createElement("a");//创建一个a标签
	var atext = document.createTextNode('百度网站');//创建一个文本
	var ahref=document.createAttribute('href');//创建一个属性结点
	ahref.value="http://baidu.com";//给属性赋值
	a1.setAttributeNode(ahref);//给a1添加属性
	a1.appendChild(atext);//给a1添加文本
	navli[1].appendChild(a1);//把a1放第二个li里
	//创建hr
	var hr=document.createElement('hr');
	var hrcolor=document.createAttribute('color');
	hrcolor.value='red';
	hr.setAttributeNode(hrcolor);
	document.body.appendChild(hr);
	//把hr放h2标签的下面
	var nav=document.getElementById('nav');
	document.body.insertBefore(hr,nav);
</script>
</body>
</html>

DOM结点的删除、替换、复制

删除节点
removeChild(node)方法是删除节点node。该方法的所属节点对象是node的父节点。语法:element.removeChild(node);
删除第二个li

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<ul id="nav">
	<li><a href="#">办公系统</a></li>
	<li>教务系统</li>
	<li><a href="#">科研系统</a></li>
</ul>
<script>
	var nav=document.getElementById('nav');
	var navli=document.getElementsByTagName('li');
	nav.removeChild(navli[1]);
</script>
</body>
</html>

替换结点
replaceChild(newChild,oldChild)方法是新节点newChild替换原节点oldChild。该方法的所属节点对象是node的父节点。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<ul id="nav">
	<li><a href="#">办公系统</a></li>
	<li>教务系统</li>
	<li><a href="#">科研系统</a></li>
</ul>
<script>
	var nav=document.getElementById('nav');
	var navli=document.getElementsByTagName('li');
	nav.replaceChild(navli[1],navli[2]);
	//第三个li会被第二个代替，第三个li会消失
</script>
</body>
</html>

复制结点
cloneNode(bool)方法赋值一个节点，返回复制后的节点引用。bool参数为布尔值，true/false表示是/否克隆该节点所有子节点。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
</head>
<body>
<ul id="nav">
	<li><a href="#">办公系统</a></li>
	<li>教务系统</li>
	<li><a href="#">科研系统</a></li>
</ul>
<script>
	var nav=document.getElementById('nav');
	var navli=document.getElementsByTagName('li');
	var newnode=navli[1].cloneNode(true);
	nav.appendChild(newnode);
</script>
</body>
</html>

在这里插入图片描述

zlzzlloo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS：BOM和DOM

window对象代表浏览器窗口本身，该对象包含的属性和方法被统称为BOM例题：打开广告窗口<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>打开新网页</title> </head><body><input type="butt
复制链接

扫一扫