DOM、BOM

已于 2024-07-04 14:55:26 修改
阅读量803 收藏 25
点赞数 30
分类专栏： 从零开始的Java学习 文章标签： html5 java-ee
于 2024-06-03 19:02:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67496588/article/details/139422306
版权

Day31

DOM

操作内容

innerText、innerHTML

区别：设置的时候innerHTML设置内容会被认为是html语句，而innerText只是单纯的文本。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="fun01()">获取属性 - innerText</button>
		<button onclick="fun02()">设置属性 - innerText</button>
		<br />
		<span>用良心做教育</span>
		<br />
		
		<button onclick="fun03()">获取内容 - innerHTML</button>
		<button onclick="fun04()">设置内容 - innerHTML</button>
		<br />
		<span>用良心做教育</span>
		
		<script type="text/javascript">
			
			var span01 = document.getElementsByTagName("span")[0];
			var span02 = document.getElementsByTagName("span")[1];
			function fun01(){
				console.log(span01.innerText);
			}
			function fun02(){
				span01.innerText = "<h1>做真实的自己</h1>";
			}
			
			function fun03(){
				console.log(span02.innerHTML);
			}
			
			function fun04(){
				span02.innerHTML = "<h1>做真实的自己</h1>";
			}
			
		</script>
		
		
	</body>
</html>

操作属性

两种方式：

1.直接属性=“…”，注意设置的时候大小里面不能写px。

2.getAttribute()和setAttribute()，这里可以有px。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		
		<button onclick="fun01()">获取属性</button>
		<button onclick="fun02()">设置属性</button>
		<br />
		<img src="img/头像.jpg" width="100px" height="100px" />
		<br />
		
		<button onclick="fun03()">获取属性</button>
		<button onclick="fun04()">设置属性</button>
		<br />
		<img src="img/头像.jpg" width="100px" height="100px" />
		
		<script type="text/javascript">
			
			var img01 = document.getElementsByTagName("img")[0];
			var img02 = document.getElementsByTagName("img")[1];
			
			function fun01(){
				console.log(img01.src);
				console.log(img01.width);
				console.log(img01.height);
			}
			
			function fun02(){
				img01.src = "img/验证码1.png";
				img01.width = "200";//这里不能有px
				img01.height = "200";
			}
			
			function fun03(){
				console.log(img02.getAttribute("src"));
				console.log(img02.getAttribute("width"));
				console.log(img02.getAttribute("height"));
			}
			
			function fun04(){
				img02.setAttribute("src","img/验证码1.png");
				img02.setAttribute("width","200");
				img02.setAttribute("height","200px");
			}
			
		</script>
		
	</body>
</html>

设置样式

标签.style.样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">获取样式</button>
		<button onclick="fun02()">设置样式</button>
		<h1>用良心做教育</h1>
		
		<script type="text/javascript">
			
			var h1 = document.getElementsByTagName("h1")[0];
			
			function fun01(){
				console.log(h1.style.color);
				console.log(h1.style.fontSize);
			}
			
			function fun02(){
				h1.style.color = "red";
				h1.style.fontSize = "30px";
			}
			
		</script>
		
	</body>
</html>

DOM事件

单击事件

四种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1 onclick="this.innerText='做真实的自己'">用良心做教育</h1>
		
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1 onclick="fun()">用良心做教育</h1>
		
		<script type="text/javascript">
			
			var h1 = document.getElementsByTagName("h1")[0];
			function fun(){
				h1.innerText = '做真实的自己';
			}
			
		</script>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1 onclick="fun(this)">用良心做教育</h1>
		
		<script type="text/javascript">
			
			function fun(obj){
				obj.innerText = '做真实的自己';
			}
			
		</script>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1>用良心做教育</h1>
		
		<script type="text/javascript">
			
			var h1 = document.getElementsByTagName("h1")[0];
			h1.onclick = function(){
				this.innerText = "做真实的自己";
			}
		</script>
	</body>
</html>
onload事件

js文件：

//页面加载事件
//当整个页面的html标签及图片资源全部加载完毕后触发的事件
window.onload = function(){
	var h1 = document.getElementsByTagName("h1")[0];
	h1.onclick = function(){
		this.innerText = "做真实的自己";
	}
}

页面加载：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/new_file.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<h1>用良心做教育</h1>
		
		
	</body>
</html>
鼠标事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<img src="../../img/头像.jpg" width="100px" height="100px"
			onmousedown="myDown()"
			onmouseup="myUp()"
			onmousemove="myMove()"
			onmouseover="myOver()"
			onmouseout="myOut()"
		/>
		
		<script type="text/javascript">
			
			//鼠标按下事件
			function myDown(){
				console.log("down");
			}
			
			//鼠标松开事件
			function myUp(){
				console.log("up");
			}
			
			//鼠标移动事件
			function myMove(){
				console.log("move");
			}
			
			//鼠标移进事件
			function myOver(){
				console.log("over");
			}
			
			//鼠标移出事件
			function myOut(){
				console.log("out");
			}
			
			
		</script>
		
	</body>
</html>

案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
				
				opacity: 0.3;
			}
		</style>
	</head>
	<body>
		
		<img src="../../img/1.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/2.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/touxiang01.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/touxiang02.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/touxiang03.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/tx1.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/tx2.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		<img src="../../img/tx3.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/>
		
		<script type="text/javascript">
		
			function myOver(obj){
				obj.style.opacity = 1;
			}
			
			function myOut(obj){
				obj.style.opacity = 0.3;
			}
			
			
		</script>
		
	</body>
</html>

案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{
				width: 100px;
				height: 100px;
				
				opacity: 0.3;
			}
		</style>
	</head>
	<body>
		
		<img src="../../img/1.jpg"/>
		<img src="../../img/2.jpg"/>
		<img src="../../img/touxiang01.jpg"/>
		<img src="../../img/touxiang02.jpg"/>
		<img src="../../img/touxiang03.jpg"/>
		<img src="../../img/tx1.jpg"/>
		<img src="../../img/tx2.jpg"/>
		<img src="../../img/tx3.jpg"/>
		
		<script type="text/javascript">
		
			var imgs = document.getElementsByTagName("img");
			
			//循环绑定指定事件
			for(var i = 0;i<imgs.length;i++){
				var img = imgs[i];
				
				img.onmouseover = function(){
					this.style.opacity = 1;
				}
				
				img.onmouseout = function(){
					this.style.opacity = 0.3;
				}
			}
			
		</script>
		
	</body>
</html>
键盘事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text"
			onkeydown="myDown()"
			onkeypress="myPress()"
			onkeyup="myUp()"
		/>
		
		<script type="text/javascript">
			
			//键盘按下事件
			function myDown(){
				console.log("down");
			}
			
			//键盘按下事件(输入无效内容是不会触发该事件，ps：删除键、上下左右键)
			function myPress(){
				console.log("press");
			}
			
			//键盘松开事件
			function myUp(){
				console.log("up");
			}
			
		</script>
		
	</body>
</html>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text"
			onkeyup="myUp(this)"
		/>
		
		<script type="text/javascript">
			
			function myUp(obj){
				var str = obj.value;
				str = str.toUpperCase();//转大写
				obj.value = str;
			}
			
		</script>
		
	</body>
</html>
焦点事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text"
			onfocus="myFocus()"
			onblur="myBlur()"
		/>
		
		<script type="text/javascript">
			
			//获取焦点事件
			function myFocus(){
				console.log("focus");
			}

			//失去焦点事件
			function myBlur(){
				console.log("blur");
			}
			
		</script>
		
	</body>
</html>

DOM节点

操作节点
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="addP()">添加p标签</button>
		<button onclick="addImg()">添加img标签</button>
		<button onclick="deleteImg()">删除img标签</button>
		<div id="manager"></div>
		
		<script type="text/javascript">
			
			function addP(){
				//创建标签 -- <p></p>
				var p = document.createElement("p");
				
				//创建内容 -- 用良心做教育
				var text = document.createTextNode("用良心做教育");
				
				//将内容添加到标签中 -- <p>用良心做教育</p>
				p.appendChild(text);
				
				//将标签添加到div中
				manager.appendChild(p);
			}
			
			function addImg(){
				//创建标签 -- <img></img>
				var img = document.createElement("img");
				//设置属性
				img.setAttribute("src","../../img/1.jpg");
				img.setAttribute("width","100px");
				img.setAttribute("height","100px");
				
				//创建标签 -- <br></br>
				var br = document.createElement("br");
				
				//将标签添加到div中
				manager.appendChild(img);
				manager.appendChild(br);
			}
			
			function deleteImg(){
				
				//获取需要删除的元素
				var img = document.getElementsByTagName("img")[0];
				var br = document.getElementsByTagName("br")[0];
				
				//通过父级标签删除子级标签
				manager.removeChild(img);
				manager.removeChild(br);
				
			}
			
		</script>
		
	</body>
</html>
节点案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<table border="1" width="300px">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>希</td>
				<td>女</td>
				<td>23</td>
				<td>
					<button onclick="fun(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td>空</td>
				<td>女</td>
				<td>21</td>
				<td>
					<button onclick="fun(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td>丽</td>
				<td>女</td>
				<td>18</td>
				<td>
					<button onclick="fun(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td>宇</td>
				<td>男</td>
				<td>21</td>
				<td>
					<button onclick="fun(this)">删除</button>
				</td>
			</tr>
			<tr>
				<td>康</td>
				<td>男</td>
				<td>22</td>
				<td>
					<button onclick="fun(this)">删除</button>
				</td>
			</tr>
		</table>
		
		<script type="text/javascript">
			
			function fun(obj){
				
				var tr = obj.parentNode.parentNode;
				var table = tr.parentNode;
				
				table.removeChild(tr);
			}
			
			
		</script>
		
	</body>
</html>

DOM案例

简单计算器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="text" id="text01" />
		+
		<input type="text" id="text02" />
		<button onclick="add()">=</button>
		<input type="text" id="text03" />
		
		<script type="text/javascript">
			
			function add(){
				
				var result = parseInt(text01.value) + parseInt(text02.value);
				text03.value = result;
			}
			
			
		</script>
	</body>
</html>
级联下拉列表
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<select id="province">
			<option value="sc">四川</option>
			<option value="hn">湖南</option>
			<option value="hb">湖北</option>
		</select>省
		<select id="city">
			<option>成都</option>
			<option>绵阳</option>
			<option>雅安</option>
			<option>眉山</option>
			<option>自贡</option>
			<option>攀枝花</option>
		</select>
		
		<script type="text/javascript">
			
			//改变事件
			province.onchange = function(){
				if(this.value == "sc"){
					updateCity(["成都","绵阳","雅安","眉山","自贡","攀枝花"]);
				}else if(this.value == "hn"){
					updateCity(["长沙","岳阳","湘潭","娄底"]);
				}else if(this.value == "hb"){
					updateCity(["武汉","咸宁","襄阳","黄冈","仙桃"]);
				}
			}
			
			function updateCity(cityArr){
				city.length = 0;//清空
				for(var i = 0;i<cityArr.length;i++){
					option = document.createElement("option");
					option.innerText = cityArr[i];
					city.appendChild(option);
				}
			}
			
		</script>
	</body>
</html>

BOM

window对象

location
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="fun01()">跳转指定页面</button>
		<button onclick="fun02()">刷新页面</button>
		
		<script type="text/javascript">
			function fun01(){
//				window.location.href="https://www.baidu.com";
//				location.href = "https://www.baidu.com";
				location = "https://www.baidu.com";
			}
			function fun02(){
				window.location.reload();
			}
		</script>
	</body>
</html>
history
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="fun01()">前两页</button>
		<button onclick="fun02()">前一页</button>
		<button onclick="fun03()">刷新页面</button>
		<button onclick="fun04()">后一页</button>
		<button onclick="fun05()">后两页</button>
		
		<script type="text/javascript">
			function fun01(){
				window.history.go(-2);
			}
			function fun02(){
//				window.history.go(-1);
				window.history.back();
			}
			function fun03(){
				window.history.go(0);
			}
			function fun04(){
//				window.history.go(1);
				window.history.forward();
			}
			function fun05(){
				window.history.go(2);
			}
		</script>
	</body>
</html>
open
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.open("http://www.baidu.com","百度");
		</script>
	</body>
</html>

各种弹框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="fun01()">警告框</button>
		<button onclick="fun02()">确认框</button>
		<button onclick="fun03()">提示框</button>
		
		<script type="text/javascript">
			function fun01(){
				alert("警告");
			}
			function fun02(){
				var bool = confirm("确认");//确认返回的是true，取消返回的是false
				console.log(bool);
			}
			function fun03(){
				var v = prompt("提示","默认值");//返回输入的值，如果直接确认返回的是默认值，清空返回空字符，取消返回null
				console.log(v);
			}
		</script>
	</body>
</html>

定时器

setTimeout():时间结束后执行一次函数。

用setTimeout（function(){},毫秒数）;来设置定时器，同时返回一个函数对象，将此对象传入clearTimeout（）函数中可以进行定时器的取消。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="../../img/头像.jpg" width="100px" height="100px" />
		<button onclick="myClear()">取消定时器</button>
		
		<script type="text/javascript">
			var img = document.getElementsByTagName("img")[0];
			
			var timeout = setTimeout(function(){
				img.setAttribute("src","../../img/验证码1.png");
			},5000);
			function myClear(){
				clearTimeout(timeout);
			}
		</script>
	</body>
</html>

setInterval():时间结束后重复执行函数。

并返回一个函数对象，将此对象传入clearInterval（）函数中可以进行定时器的取消。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="myClear()">取消定时器</button>
		
		<script type="text/javascript">
			var interval = setInterval(function(){
				console.log("初心至善");
			},1000);
			function myClear(){
				clearInterval(interval);
			}
		</script>
	</body>
</html>
定时器案例

1.实现页面的自动跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				color:red;
			}
		</style>
	</head>
	<body>
		<h1>注册成功，<span>3</span>秒后自动跳转到<a href="http://www.baidu.com">百度</a></h1>
		<script type="text/javascript">
			var span = document.getElementsByTagName("span")[0];
			setInterval(function(){
				var text = span.innerText;
				if(text>1){
					text--;
					span.innerText = text;
				}else{
					window.location="http://www.baidu.com";
				}
			},1000);
		</script>
	</body>
</html>

2.做一个时钟的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1></h1>
		
		<script type="text/javascript">
			var h1 = document.getElementsByTagName("h1")[0];
			setInterval(function(){
				showTime();
			},1000);
			
			function showTime(){
				var date = new Date();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				var time = hour + ":" + minute + ":" + second;
				h1.innerText = time;
			}
			showTime();//确保一直使用这个函数，不会因为刷新而中断。
		</script>
	</body>
</html>

3.实现图片的定时切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="../../img/头像.jpg" width="100px" height="100px"/>
		
		<script type="text/javascript">
			var paths = ["头像.jpg","验证码1.png","验证码2.png"];
			var index = 0;
			var img = document.getElementsByTagName("img")[0];
			setInterval(function(){
				img.setAttribute("src","../../img/"+paths[index]);
				index++;				
				if(index == paths.length){
					index =0;
				}
			},1000);
		</script>
	</body>
</html>

JS对象

创建对象，设置对象属性、对象方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var stu = new Object();
			stu.name = "张三";
			stu.age = 24;
			stu.printInfo = function(){
				alert(this.name + "---" + this.age);
			};
			stu.printInfo();
		</script>
	</body>
</html>

使用json格式创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var stu = {
				name :"张三",
				age : 24,
				printInfo : function(){
					alert(this.name + "-" + this.age);
				}
			}
			stu.printInfo();
		</script>
	</body>
</html>

使用函数创建对象（类似于java的有参构造）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function Student(name,age){
				this.name = name;
				this.age = age;
			}
			Student.prototype.printInfo = function(){
				alert(this.name + "--"+ this.age);
			}
			var stu = new Student("张三",24);
			stu.printInfo();
			for(var v in stu){
				console.log(v);
			}
		</script>
	</body>
</html>

cookie

知识点：Cookie
理解：存储在当前浏览器下，按照域名以键值对存储的纯文本数据
注意：
1.浏览器之间的Cookie数据不能共享
2.同一个浏览器下多个域名之间的Cookie数据不能共享
3.同一个浏览器当前域名下的多个页面可以共享Cookie数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">添加Cookie</button>
		<button onclick="fun02()">删除Cookie</button>
		<button onclick="fun03()">修改Cookie</button>
		<button onclick="fun04()">查询Cookie</button>
		
		<script type="text/javascript">
			
			
			function fun01(){
				
				var date = new Date();
				date.setTime(date.getTime()+1000*60*60*24*10);
				
				document.cookie = "username=hhy;expires=" + date.toGMTString();
				document.cookie = "password=123123;expires=" + date.toGMTString();
			}
			
			function fun02(){
				
				var date = new Date();
				date.setTime(date.getTime());
				
				document.cookie = "username=hhy;expires=" + date.toGMTString();
				document.cookie = "password=123123;expires=" + date.toGMTString();
			}
			
			function fun03(){
				var date = new Date();
				date.setTime(date.getTime()+1000*60*60*24*10);
				
				document.cookie = "username=xiaohong;expires=" + date.toGMTString();
				document.cookie = "password=123456;expires=" + date.toGMTString();
			}
			
			function fun04(){
				alert(document.cookie);
			}
			
			
		</script>
		
	</body>
</html>

封装：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">添加Cookie</button>
		<button onclick="fun02()">删除Cookie</button>
		<button onclick="fun03()">修改Cookie</button>
		<button onclick="fun04()">查询Cookie</button>
		
		<script type="text/javascript">
			
			
			function fun01(){
				
				var date = new Date();
				date.setTime(date.getTime()+1000*60*60*24*10);
				
				document.cookie = "username=hhy;expires=" + date.toGMTString();
				document.cookie = "password=123123;expires=" + date.toGMTString();
			}
			
			function fun02(){
				
				var date = new Date();
				date.setTime(date.getTime());
				
				document.cookie = "username=hhy;expires=" + date.toGMTString();
				document.cookie = "password=123123;expires=" + date.toGMTString();
			}
			
			function fun03(){
				var date = new Date();
				date.setTime(date.getTime()+1000*60*60*24*10);
				
				document.cookie = "username=xiaohong;expires=" + date.toGMTString();
				document.cookie = "password=123456;expires=" + date.toGMTString();
			}
			
			function fun04(){
				alert(document.cookie);
			}
			
			function updateCookies(key,value,time){
				var date = new Date();
				date.setTime(date.getTime()+time);
				document.cookie = key + "=" + value + ";expires=" + date.toGMTString();
			}
			function queryCookies(key){
				var cookies = document.cookie.split(";");
				for(var cookie in cookies){
					var cookieKey = cookie.trim().split("=")[0];
					var cookieValue = cookie.trim().split("=")[1];
					if(key == cookieKey){
						return cookieValue;
					}
				}
				return null;
			}
		</script>
		
	</body>
</html>
求学小火龙
关注
专栏目录
DOM和BOM的使用
01-08
DOM 和 BOM 的使用 DOM（Document Object Model）和 BOM（Browser Object Model）是前端开发中两个基础概念。DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形结构，允许开发者通过 JavaScript 操作文档的...
Javascript之BOM与DOM讲解
02-09
JavaScript是Web开发中不可或缺的一部分，主要由三个组成部分构成：ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）。这三个部分协同工作，使开发者能够创建动态、交互式的网页。 1. ECMAScript： ...
BOM与DOM的区别分析
09-05
**BOM与DOM的区别分析** 在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是两个至关重要的概念，它们都是用于处理和操作网页内容的接口。DHTML（Dynamic HTML）技术的实现离不开这两者的...
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
实现JavaScript的组成----BOM和DOM详解
10-22
下面小编就为大家带来一篇实现JavaScript的组成----BOM和DOM详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
c认证web进阶dom与bom
10-03
DOM上 1、DOM结构及节点 2、常用节点获取方法和属性 3、常用的节点属性获取方式 关于图片复制到csdn编译器不识别问题 DOM下 1、DOM修改 2、DOM添加 3、DOM删除 案例 DOM控制css样式 1、通过style属性控制...
BOM和DOM模型图
11-25
### BOM和DOM模型 #### 一、BOM与DOM概览 在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是非常重要的两个概念，它们构成了前端JavaScript操作网页的基础。 ##### BOM：浏览器对象模型...
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
10-18
JavaScript是一种解释执行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，它遵循ECMAScript标准。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，主要用来给...
JAVAscript的BOM/DOM.xmind
03-30
JAVAscript的BOM/DOM.xmind
BOM和DOM对象的简单介绍
05-06
BOM和DOM对象的简单介绍 在 JavaScript 中，BOM（ Browser Object Model）和 DOM（Document Object Model）是两个重要的对象模型。BOM 主要关注浏览器窗口和屏幕的信息，而 DOM 则是文档对象的树形结构，从而描述了...
实现JavaScript的组成—-BOM和DOM详解
01-19
我们知道，一个完整的JavaScript的实现，需要由三部分组成：ECMAScript(核心),BOM(浏览器对象模型)，DOM(文档对象模型)。 今天主要学习BOM和DOM。 BOM: BOM提供了很多对象，用来访问浏览器的功能，这些功能于网页...
Javascript基础知识（三）BOM，DOM总结
10-25
本文是基础知识系列的第三篇文章，主要介绍javascript中BOM,DOM的一些心得总结，非常实用，有需要的朋友可以参考下
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
JS相关BOM和DOM和ECMAScript还有引用数据类型.emmx
07-18
使用mindmaster打开
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
10-27
DHTML，全称Dynamic HTML，是一种在...理解并掌握DHTML、JavaScript、DOM、BOM以及Web标准对于现代前端开发至关重要，它们共同构建了丰富的网页交互体验，为开发者提供了强大的工具来创建动态、响应式的网页应用程序。
BOM对象和DOM对象
12-02
**BOM对象与DOM对象详解** 在Web开发中，BOM（Browser Object Model）对象和DOM（Document Object Model）对象是两个至关重要的概念，它们分别处理浏览器交互和HTML文档结构的解析。 **一、BOM对象** BOM，浏览器...
JS(Dom+Bom).docx
02-19
2. BOM（Browser Object Model）：浏览器对象模型，提供了操作浏览器窗口、框架、历史记录等的方法。 3. DOM（Document Object Model）：文档对象模型，用于处理HTML或XML文档，允许程序员对网页内容进行增删查改。 ...
js中的BOM和DOM对象
06-20
在这个过程中，JavaScript与两种关键的对象模型紧密相关：浏览器对象模型（BOM）和文档对象模型（DOM）。本文将深入探讨这两个概念，并通过实例解析它们的工作原理。 **浏览器对象模型（BOM）** BOM全称为Browser ...
JavaScript 和 HTML5 Canvas实现图像绘制与处理
最新发布
weixin_65793170的博客
07-31 1113
JavaScript 和 HTML5 的 canvas 元素提供了强大的图形和图像处理功能，使得开发者能够在网页上创建动态和交互式的视觉体验。这里我们将探讨如何使用 canvas 和 JavaScript 来处理图像加载，并在其上进行图像绘制。我们将实现一个简单的示例，演示图像加载完成后的基本绘制过程，并在此基础上扩展一些更高级的功能。记录一下
js dom bom
10-28
JavaScript中的DOM和BOM分别指的是文档对象模型（Document Object Model）和浏览器对象模型（Browser Object Model）。DOM是用来操作HTML和XML文档的API，它将文档解析成一个由节点和对象（包含属性和方法的对象）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值