JS事件篇

最新推荐文章于 2024-06-28 23:30:00 发布

drhrht

最新推荐文章于 2024-06-28 23:30:00 发布

阅读量822

点赞数 2

分类专栏：前端 html 文章标签：正则表达式 python 前端

本文链接：https://blog.csdn.net/drhrht/article/details/123255164

版权

这篇博客详细介绍了JavaScript中的DOM操作，包括查询、增删改元素，以及事件处理，如window.onload、事件冒泡和事件委派。还讨论了如何阻止a标签默认行为，以及获取和修改元素样式的方法。此外，还涉及到了浏览器对象模型如navigator、History和Location的使用。

摘要由CSDN通过智能技术生成

事件篇

window.onload:事件
Dom查询
innerhtml ----获取节点的html内容，或者设置对应节点html内容
读取或者设置节点的相关属性
获取元素节点的子节点
- children属性可以获取到当前元素所有子元素，不包括文本节点
- 区分概念: 节点包括文本节点，而元素不包括文本节点
- firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素
- - 抽离出按钮点击函数的小案例
- parentNode :获取一个元素的父元素
- innertext :获取到一个标签里面的文本内容
- 获取兄弟节点，也可能会获取到空白节点
- 获取兄弟元素
- 节点的属性
- - 通过nodevalue可以设置文本节点的内容
  - 在事件的响应函数中，响应函数是给谁绑定的，this就指向谁
- 获取body标签====》document.body
- 获取html标签===》document.documentElement
- document.all返回一个数组，保存页面里面所有的元素
- getElementByClassName:根据class属性值查询一组元素节点对象
- document.querySelector 和querySelectorAll
DOM的增删改
- document.createElement()—创建元素节点对象
- document.createTextNode()—创建文本节点
- 父节点.appendChild()----向一个父节点中添加一个子节点
- - 整合上面操作的小案例
- 父节点.insertBefore(新节点，旧节点): 在指定子节点前插入新的子节点
- 父节点.replaceChild(新节点，旧节点)：使用指定的子节点替换已有的子节点
- 父节点.removeChild(子节点)：删除子节点
- 使用innerHTML也可以完成DOM的增删改操作
- 阻止a标签默认行为的常用三种方式
- a标签的索引问题
- JS修改元素的样式
- 读取元素的内联样式
- 获取当前元素显示的样式—只读
- - getComputedStyle不支持IE8 VS 元素.currentStyle支持IE8 ===》通用方法融合两者
- 元素.clientHeight和元素.clientWidth获取元素可见宽度和高度—只读，无法修改
- 元素.offsetWidth和元素.offsetHeight—获取元素整个的宽度和高度（包括边框）—只读
元素.offsetParent获取当前最近开启了定位的祖先元素–只读
- 元素.offsetLeft和offsetTop: 返回相对于父元素的水平和垂直偏移量—只读
- 元素.scrollWidth和scrollHeight获取元素整个滚动区域的宽和高
- 元素.scrollLeft和scrollTop获取水平和垂直滚动条滚动滚动距离
- - 当满足scrollHeight - scrollTop == clientHeight时，表明垂直滚动条滚动到底了
  - 阅读知情同意书的小案例
- onmousemove事件和事件对象
- 获取鼠标的坐标
- 页面滚动条的归属者
- 解决浏览器兼容性常使用以下写法
- div跟随鼠标移动
事件的冒泡和事件对象event
事件的委派
事件的绑定----为另一个元素绑定多个事件
- addEventListener—IE8及以下的浏览器不支持，正常浏览器不支持
- attachEvent—支持IE8及以下的浏览器
- 兼容上面两者的写法
事件的传播
拖拽案例—鼠标按下，移动，松开事件
鼠标滚轮事件----onmousewheel----火狐不支持，由DOMMouseScroll替代
- 判断滚轮上滚还是下滚----火狐不支持，由detail替代
- 取消滚动条随滚轮移动的默认行为
键盘事件
浏览器对象模型—navigator
- - 通过属性名 in 对象可以判断对应的属性在当前对象中是否存在
浏览器对象模型—History
浏览器对象模型—Location
浏览器对象模型—Window常用的三个弹出框
定时器
- 开启一个定时器之前，需要关闭上一次开启的定时器，不会产生一大堆定时器同时工作的情形，从而产生速度越来越快的情形
延时调用
JS修改元素样式的一些思考
JSON
- JSON字符串转化为JS对象
- JS对象转换为JSON字符串
- eval函数

window.onload:事件

浏览器加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载

window.onload事件会在整个页面加载完成之后，才会触发，将对应的script代码，写在里面，可以确保script代码可以在页面加载完成之后，才会执行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大忽悠</title>
	</head>
	<body>
<div id="div"><strong>嘿嘿</strong></div>
		<script type="text/javascript">
		window.onload=function()
		{
			//返回的是元素数组对象
			    var d1=document.getElementById("div");
			    alert(d1.innerHTML);
		}
		</script>
	</body>
</html>

Dom查询

在这里插入图片描述

innerhtml ----获取节点的html内容，或者设置对应节点html内容

innerHTML在JS是双向功能：获取对象的html内容或向对象插入html内容

我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；

也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;

在这里插入图片描述

读取或者设置节点的相关属性

			//返回的是元素数组对象
			    var d1=document.getElementById("div");
			    //读取或设置节点class属性
				d1.className
				//id属性
				d1.id
				//name属性
				d1.name
				//value属性
				d1.value