DOM编程2

最新推荐文章于 2022-07-11 09:05:02 发布

码农阿茹

最新推荐文章于 2022-07-11 09:05:02 发布

阅读量162

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_69674158/article/details/124971943

版权

一：获取元素的css

元素.style.属性
只能获取行内样式
getComputedStyle (元素).属性名（IE不兼容）
getComputedStyle是window下一个方法；把对应的元素传给这个方法
他是window上的一个属性
获取浏览器计算的样式
如果是复合属性名，把-去掉，换成驼峰命名；
`console.log(getComputedStyle(元素).属性名)``
`console.log(getComputedStyle(box).width)``
`console.log(getComputedStyle(box)[‘width’])``
currentStyle（只有IE兼容）
元素.currentStyle.属性名
IE8及以下，用这个方法获取元素css中设置的样式；
他是元素身上的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.myp{
				height: 120px;
				width: 120px;
				border:5px red solid;
			}
		</style>
	</head>
	<body>
		<p class="myp">我是一个段落</p>
		<script>
			// 目标:获取p标签的高度
			var myp = document.querySelector(".myp");
			// alert(myp.style.height); //只能获取到行内样式的高度
			var h =  document.defaultView.getComputedStyle(myp,null).height;
			alert(h);
			// document文档;default默认View视图.get获取Computed计算Style样式
			// 获取计算好的默认视图样式 
		</script>
	</body>
</html

二：元素的高与宽

clientWidth:内容+padding+border（减去工具条)
offsetWidth:内容+padding+border
scrollWidth没有滚动条同offsetWidth 内容+padding-工具条+滚动的距离
clientHeight；offsetHeight；scrollHeight

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.myp{
				height: 120px;
				width: 120px;
				border:5px red solid;
				padding: 10px;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<p class="myp">我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/>我是一个段落<br/></p>
		<script>
			// 目标:获取p标签的高度
			var myp = document.querySelector(".myp");
			console.log("content+padding",myp.clientHeight);
			console.log("content+padding+border",myp.offsetHeight);
			console.log("content+padding+滚动距离",myp.scrollHeight);
			console.log("clientWidth:内容+padding-工具条",myp.clientWidth)
			console.log("offsetWidth:内容+padding+边框",myp.offsetWidth)
			console.log("scrollWidth:内容+padding-工具条+滚动距离",myp.scrollWidth)
			 
		</script>
	</body>
</html

三：元素与父元素距离

offsetLeft与相对父元素的左偏移值
offsetTop与相对父元素的垂直偏移值
offsetParent相对父元素
元素的父辈元素有position非static值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;
			padding: 0;}
			body{
				padding: 100px;
			}
			.parent{
				padding: 30px;
				background-color: antiquewhite;
				position: relative;
			}
			.son{
				border: 1px solid red;
				width: 100px;
				
			}
			.content{
				border: 1px solid red;
				padding: 30px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="parent">
				<div class="son">son</div>
			</div>
		</div>
		<script>
			// 获取parent
			var p = document.querySelector(".parent");
			// 获取son
			var s = p.querySelector(".son");
			// 输出,son与父元素的距离
			// 默认是当前元素与body的距离
			// 如果父辈有position非static元,
			// 则是与该父辈元素的距离
			console.log("offsetTop",s.offsetTop);
			console.log("offsetLeft",s.offsetLeft);
			// 求s到body的距离
			// 求s对的相对父节点
			// console.log("s的相对父节点",s.offsetParent)
			// console.log("p的相对父节点",p.offsetParent)
			// 思路:while循环parent = s.offsetParent
			var Bounding = s.getBoundingClientRect()
			// get获取;Bounding边界;Client客户端;Rect区域
			// 获取元素s的边界（bottom,top.left,right,width,height,x,xy）
			// 与浏览器视图的边界
			console.log(Bounding.top);
		</script>
	</body>
</html>

四：元素的滚动距离

elem.scrollTop
elem.scrollLeft
浏览器滚动距离
document.documentElement.scrollTop
document.body.scrollTop

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.box{
			width: 500px;
			height: 100px;
			background: gray;
			overflow: auto;
		}
		.item{
			height: 50px;
		}
	</style>
</head>
<body>
	<div class="box" id="c">
		<ul>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
			<li class="item"></li>
		</ul>
	</div>
</body>
</html>
<script type="text/javascript">
	var dom = document.getElementById('c');
	dom.addEventListener('scroll',function () {
		console.log('', dom.scrollTop);
	});
</script>

五：事件的绑定与解绑

1.绑定

btn.οnclick=function（）{}

btn.addEventListener(type,funName)

2.解绑

btn.οnclick=null

btn.removeEventListener(type,funName)

匿名函数不能解绑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>事件的绑定与解绑</h1>
		<button class="btn1">按钮1</button>
		<button class="btn2">按钮2</button>
		<button class="btn3">解绑say</button>
		<script>
			// 给btn2注册2个单击事件
			function say(){
				// this指向的是btn2这个按钮
				alert(this.innerText);
			}
			function doit(){
				alert("我要挣100万");
			}
			var btn2 = document.querySelector(".btn2");
			btn2.addEventListener("click",say);
			btn2.addEventListener("click",doit);
			btn2.addEventListener("click",function(){
				alert("我要娶高富帅");
			})
			
			
			//  btn3单击解绑 say方法
			var btn3 = document.querySelector(".btn3");
			btn3.onclick = function(){
				// 解绑了btn2.click事件的 say函数响应
				btn2.removeEventListener("click",say);
				btn2.removeEventListener("click",doit);
				 
				
			}
			
			
			// 给按钮1添加事件
			var btn1 = document.querySelector(".btn1");
			btn1.onclick = function(){
				alert("啊,我被点击了,这是最后一次");
				btn1.onclick = null;
			}
		</script>
	</body>
</html>

3.事件对象

event.offsetX
event.offsetY
相对于事件源偏移文字
event.target 源对象
event.pageX
event.pageY
相对于页面的位置

4.事件传递

6冒泡：最具体元素最先捕捉到事件，传递给最不具体的元素（document）
捕获：最不具体的元素先捕获到事件，传递给最具体的元素
默认都是冒泡，使用捕获
elem.addEventListener(事件类型，响应时间，是否为捕获）
elem.addEventListener（"click,doit,true)
阻止事件传递
event.stopPropagation()
阻止默认事件
event.preventDefault()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{ margin: 0; padding:0;}
			.container{
				width: 1000px;
				margin: 0  auto;
				border: 1px solid red;
				margin-top: 100px;
				background-color: dodgerblue;
				padding: 50px;
				
			}
			.parent{
				padding: 50px;
				background-color: aquamarine;
			}
			.son{
				width: 100px;
				height: 100px;
				border:1px solid red;
				background-color: gold;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="parent">
				<div class="son">
					son
					<a href="https://www.baidu.com">百度</a>
				</div>
			</div>1qaq	
		</div>
		<script>
			var  son = document.querySelector(".son");
			var  parent = document.querySelector(".parent");
			var  container = document.querySelector(".container");
			var a = document.querySelector("a");
			a.addEventListener("click",function(e){
				e.stopPropagation(); //阻止事件冒泡
				e.preventDefault();//阻止默认事件
				alert("哇,中奖了");
			})
			son.addEventListener("click",function(){
				alert("son被点击了")
			},false)
			parent.addEventListener("click",function(){
					alert("parent被点击了")
			},false)
			container.addEventListener("click",function(){
				alert("container被点击了")
			},false)
			// addEventListener(事件类型,响应的函数,是否使用捕获)
			// 捕获:事件最不具体的元素捕捉事件,传递给最具体的元素
			/* son.onclick = function(e){
				e.stopPropagation();
				// 阻止事件传递
				alert("son被点击了")
			}
			parent.onclick = function(){
				alert("pare
				nt被点击了")
			}
			container.onclick = function(){
				alert("container被点击了")
			} */
			// 最小的元素先监听到事件,然后传递给父元素监听:事件的冒泡机制
			</script>
		</script>
		
	</body>
</html>

5.键盘事件

keypress

keyup

keydown

event.keyCode键对应数字编码
event.key键盘的名称
event.which等于keyCode

键盘事件参数：

event.key;event.keyCode

键盘名:Enter,ArrowUp...

键盘代码:13就是enter键盘

6.鼠标事件

mouseover鼠标移入
mouseout鼠标移出
mousedown鼠标按下
mouseup鼠标弹起
mousemove鼠标移动
click单击
dblclick双击

鼠标事件对象参数：

event.offsetLeft;event.offsetTop;

相对于事件源对象水平距离;垂直距离;

event.pageX;event.pageY(clientX,clientY)

相对于页面的水平距离与垂直距离

7.表单事件

change值发生变化
input正在输入
focus获取焦点
blur失去焦点

8.页面事件

load加载
resize窗口变化
scroll滚动

9.事件代理

把事件注册到其共有的父元素上，通过事件的冒泡机制，event.target实现目标
（本来注册给每个元素，注册到其共有的父元素）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.container{ width: 800px; height: 400px; border: 2px solid #ccc;}
		</style>
	</head>
	<body>
		<h1>留言板</h1>
		<div class="container">
			<p>我是第一条默认留言</p>
			<p>我是第二条留言</p>
		</div>
		<input type="text" placeholder="请留言" id="inp">
		<script>
			var inp = document.getElementById("inp");
			var container = document.querySelector(".container");
			// 单击container里面的p标签弹出内容
			/* var ps = container.querySelectorAll("p");
			// 遍历ps 添加事件
			ps.forEach(item=>{
				item.onclick = function(){
					// 弹出item的文本
					alert(this.innerText);
				}
			}) */
			container.addEventListener("click",function(event){
				alert(event.target.innerText);
			})
			// 动态添加的p元素没办法绑定事件
					
			// inp添加键盘事件keyup,如果是回车键
			inp.addEventListener("keyup",function(event){
				console.log(event,event.keyCode,event.key);
				// 如果是enter键
				if(event.keyCode==13){
					// 创建个p
					var p = document.createElement("p");
					// 设置文本
					p.innerText = inp.value;
					// 插入到container
					container.appendChild(p);
					// 请求inpt
					inp.value = '';
				}
			})
			// 创建一个p标签,把inp文本放入p
			// 让container插入p标签
		</script>
	</body>
</html>