BOM编程与DOM编程

最新推荐文章于 2024-10-31 21:09:10 发布

oh_妙笔生花

最新推荐文章于 2024-10-31 21:09:10 发布

阅读量506

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/qq_36598571/article/details/87946948

JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了BOM编程，包括window、history、screen、location、document和navigator等六大类对象的功能，如close()、open()、alert()、confirm()、moveBy()、moveTo()以及location和history的使用。此外，还探讨了DOM编程，讲解了如何通过id、标签名获取DOM对象，以及如何操作DOM对象的内容（innerText、textContent和innerHTML）和属性、样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                           BOM编程与DOM编程

1.BOM编程
BOM(browser object model)主要分为六大类，window(窗口)、history(浏览历史)、screen（分辨率）、location（地址栏）、document（页面可见部分）、navigator(封装浏览器内容信息)。
(1) close()

<script>
			function myClosed(){
				if (window.confirm("你确定要关闭该页面吗？")){
					window.close();
				}
</script>

在这里插入图片描述
(2) open()

function openGame(){
				window.open("http://www.4399.com","_blank","fullscreen=yes,menubar=yes")
			}

在这里插入图片描述
(3)alert()

		alert("你好世界！")

在这里插入图片描述
(4)confirm()

window.confirm("你确定要关闭该页面吗？")

在这里插入图片描述
（5）moveBy和moveTo

function moving(){
				window.moveBy(80,80);
				 // window.moveTo(200,200);
			}

兼容IE低版本
(5)location

	<script>
			console.info(screen.height)
			console.log(screen.width)//电脑分辨率
			console.info(screen.availHeight)
			console.info(screen.availWidth) //不带任务栏
			// navigator 封装的是浏览器的内核信息
			//userAgent用户代理对象
			console.info(navigator.userAgent)
		</script>

在这里插入图片描述
（6）history

	<script>
			function goBack(){
				//后退一步
				// history.back();
				history.go(-1);
			}
			function goforward(){
				//前进一步
				// history.forward();
				history.go(1);
			}
		</script>

在这里插入图片描述
2.DOM
（1）获取DOM对象的方式
通过id获取

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>


<button type="button" id="myHeader" onclick="getValue()">点我一下</button>

</body>
</html>

在这里插入图片描述
通过标签名称来获取页面上的所有该标签

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="how many?" />

</body>
</html>

在这里插入图片描述
操作DOM对象的内容
innerText：仅操作标签及其子标签文本内容
textContent：w3c规范的操作文本的属性
innerHTML:返回元素的HTML结构

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">

	<title></title>
	<script type="text/javascript">
			/**
			 * window.onload事件，表示页面加载完成后触发
			 */
			window.onload = function() {
				
				var _show = document.getElementById("show");
				_show.innerHTML = "<h1>这个是内容</h1>"
				console.info(_show.innerText)
				// innerText仅仅操作标签及其子标签文本内容
				// innerText 非w3c规范
//				_show.innerText = "<h1>这个是内容</h1>";
				
				// w3c规范操作文本的属性
//				_show.textContent = "<h1>这个是内容</h1>";
				}
	</script>
</head>
<body>
	<div id="show">
		<p>这个是p标签</p>
		这个是div
	</div>
</body>
</html>

操作DOM对象的属性

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.show,.show2{
			width: 200px;
			height: 200px;
			text-align: center;
			font-size:18px;
			line-height: 200px;
			background: palegreen;
			color: whhite;
		}
		.show2{
			background: peachpuff;
		}
	</style>
	<script type="text/javascript">
		window.onload = init;
		function init(){
			var _msg = document.getElementById("msg");
			_msg.setAttribute("title","这个是title新值！！！")
		}
		function change(){
			var _msg = document.getElementById("msg");
			if (_msg.className == "show2"){
				_msg.className = "show"
			}else{
				_msg.className = "show2"
			} 
		}
	</script>
</head>
<body>
	<div id="msg" title="这个是标题" class="show">这个是一个div</div>
	<button onclick="change()">点击换掉背景颜色</button>
</body>
</html>

在这里插入图片描述
操作DOM对象的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#show {
				height: 300px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div style="width: 300px;" id="show" onclick="scale()">这个是一个div</div>
		
		<script>
			
			
			function scale() {
				
				var _show = document.getElementById("show");
				
				console.log(_show.offsetHeight, _show.offsetWidth)
				console.log(_show.clientHeight, _show.clientWidth)
				
				_show.style.height = _show.offsetHeight + 10 + "px";
				_show.style.width = _show.offsetWidth + 10 + "px";
			}
			
			
			var _show = document.getElementById("show");
			console.log(getComputedStyle(_show).height)
			console.info(getComputedStyle(_show).width)
			
			
		</script>
	</body>
</html>

在这里插入图片描述