JavaScript(DOM对象的详细解答)

最新推荐文章于 2022-08-01 12:14:08 发布

豌豆二锅头

最新推荐文章于 2022-08-01 12:14:08 发布

阅读量232

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44750790/article/details/106461499

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

DOM对象

DOM对象
事件
事件对象
- 实时显示鼠标坐标
- div随着鼠标移动

DOM对象

宿主对象：又运行环境（浏览器）提供的对象，Document Object Model 文档对象模型。
通过js来操作网页就需要用到dom对象。
document：文档表示的就是整个页面的html文档
Object：对象，将网页的每一个部分都转化为对象。【以纯面向对象的方式来编程】
Model：表示对象之间的联系，方便我们获取对象。
在这里插入图片描述
节点：Node——构成HTML文档最基本的单元
常用的节点分为四种：
——文档节点：整个html文档
——元素节点：html文档中的HTML标签
——属性节点：元素的属性
——文本节点：html标签中的文本内容

事件

事件：用户和浏览器之间的交互行为
比如：点击按钮，鼠标移动，关闭窗口。
在这里插入图片描述

给按钮绑定单击事件

为单击事件绑定的函数，称为单击响应函数

			var btn = document.getElementById("btn");
			btn.onclick=function (){
				alert("给按钮绑定单击事件!")
			};

onload事件：该事件的响应函数将会在DOM对象加载完毕之后在执行。

window.onload =function(){
	alert("这个弹窗将会在html页面加载完成之后再执行！");
};

获取元素节点：通过document对象来调用

1.getElementById()
——通过id属性获取一个元素节点对象
2.getElementsByTagName()
——通过标签名获取一组元素节点对象，比如 li input a这些，返回一个类数组，可迭代对象
3.getElementsByName()
——通过name属性获取一组元素节点对象，这是获取name属性一样的元素节点，返回一个类数组，可迭代对象

获取元素节点的子节点：通过具体的元素节点调用

1.getElementsByTagName()
——方法，返回当前节点的指定标签名后代节点
2.childNodes ：属性会获取包括文本节点里面的所有节点，DOM标签之间的空白也会被当做标签。在IE8及其以下，不会将空白文本当做子节点。
——属性，表示当前节点的所有子节点
3.firstChild
——属性，表示当前节点的第一个子节点
4.lastChild
——属性，表示当前节点的最后一个子节点
5.children
——属性，获取当前元素的所有子元素【一般第二个标签会利用这个去替换】

获取父节点和兄弟节点

1.parentNode
——属性，表示当前节点的父节点
2.previousSibling
——属性，表示当前节点的前一个兄弟节点
3.nextSibiling
——属性，表示当前节点的后一个兄弟节点

添加子节点

加粗样式

增删改子节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>南京</li>
		</ul>
		<input type="button"  id="addcity" value="添加城市[在最后]" />
		<input type="button"  id="insercity" value="添加城市[在北京之前]" />
		<input type="button"  id="replacecity" value="替换北京为广州" />
		<input type="button"  id="deletecity" value="删除子节点" />
		<input type="button" id="idioctonia" value="自删" />
		<script type="text/javascript">
			var addcity=document.getElementById("addcity");
			addcity.onclick=function(){
			//给id为city的ul添加一个字标签广州并显示在页面中
				//创建广州的子节点
					//创建一个li标签
					var li=document.createElement("li");
					//创建li标签的文本节点
					var gztext=document.createTextNode("广州");
					li.appendChild(gztext);//给li标签添加子标签
				//添加到页面中
				var city = document.getElementById("city");
				city.appendChild(li);
			};
//其实这里还有另外一种写法
// var city = document.getElementById("city");
// city.innerHTML +="<li>广州</li>";
//一般两种方法结合使用，因为这样的话，我们列表的其他li上绑定的事件都没有了，这样有可能得不偿失

//结合使用
/*
var li =document.createElement("li");
li.innerHTML="广州";
city.appendChild(li);
*/

			
			//在北京之前插入一个子节点
			var insertcity=document.getElementById("insercity");
			insertcity.onclick=function(){
				var li=document.createElement("li");
				var gztext=document.createTextNode("广州");
				li.appendChild(gztext);
				
				var bj=document.getElementById("bj");
				var city=document.getElementById("city");
				//在指定的子节点之前插入新节点
				//insertBefore(新节点,旧节点);
				city.insertBefore(li,bj);
			};
			
			//用广州节点替换北京节点
			var replacecity=document.getElementById("replacecity");
			replacecity.onclick=function(){
				var li=document.createElement("li");
				var gztext=document.createTextNode("广州");
				li.appendChild(gztext);
				
				var bj=document.getElementById("bj");
				var city=document.getElementById("city");
				city.replaceChild(li,bj);
			};
			
			//删除子节点,需要利用父节点
			var deletecity=document.getElementById("deletecity");
			deletecity.onclick=function(){
				var city=document.getElementById("city");
				var bj=document.getElementById("bj");
				city.removeChild(bj);
			};
			
			
			
			var idioctonia=document.getElementById("idioctonia");
			var bj=document.getElementById("bj");
			//我杀我自己
			idioctonia.onclick=function(){
				bj.parentNode.removeChild(bj);
				};
			
		</script>
	</body>
</html>

事件对象

获取事件的相关信息或者对事件的相关操作，就用event对象
在这里插入图片描述

实时显示鼠标坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示鼠标坐标</title>
		<style type="text/css">
			.area{
				border: black 1px solid;
				width: 300px;
				height: 200px;
				margin-bottom: 20px;
			}
			.show{
				border: black 1px solid;
				width: 300px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="area" class="area"></div>
		<div id="show" class="show"></div>
		
		<script type="text/javascript">
			var areaDiv=document.getElementById("area");
			var showDiv=document.getElementById("show");
			
			/*事件对象：当事件的响应函数被触发时，浏览器
			 每次都会将一个事件对象作为实参传递进响应函数
			 在事件对象中，封装了当前时间的一切信息，鼠标坐标，
			 键盘哪个按键被按下*/
			
			
			/*onmousemove事件：鼠标移动就除法*/
			areaDiv.onmousemove=function (){
				
				
				/*在IE8中，响应函数被执行时，浏览器不会传递事件对象
				 为了兼容，方法1：
				 if(!event)
				 	{
				 		event=window.event;
				 	}
				 方法2：极秒
				 event = event || window.event;
				 * */
				
				
				
				var x=event.clientX;
				var y=event.clientY;
				showDiv.innerHTML=("x="+x+"  y="+y);
				
			};
		</script>
	</body>
</html>

div随着鼠标移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示鼠标坐标</title>
		<style type="text/css">
			#box1{
				border: 1px black solid;
				width: 100px;
				height: 100px;
				position: absolute;
				/*开启绝对定位*/
			}
		</style>
	</head>
	<body>
		<div id="box1">
		</div>
		
		<script type="text/javascript">
			
			/*
			 clientX 当前鼠标在页面上的横坐标
			 clientY 当前鼠标在页面上的竖坐标
			 pageX：相对于当前整个页面的【不兼容IE8】
			 pageY:相对于当前整个页面的【不兼容IE8】
			 * */
			
			//使得div跟着鼠标移动
			var box1=document.getElementById("box1");
			
			//给整个页面绑定这个事件
			document.onmousemove=function(){
				//获取鼠标的坐标
				var x=event.pageX;
				var y=event.pageY;
				//设置div的坐标
				box1.style.left=x+"px";
				box1.style.top=y+"px";
				
			};
			
		</script>
	</body>
</html>