+ 浏览器 DOM
关注
分享
扫一扫
文章平均质量分 55
W3C组织推荐的处理可扩展置标语言的标准编程接口，它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格，是一种基于树的API文档
Try Tomato
The scenery at the foot of the mountain is not attractive enough you should go to the top of the mountain
展开
-
原生JS一页代码实现放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...原创 2022-04-19 10:26:51 · 211 阅读 · 0 评论 -
纯原生JS打造轮播图？
目录第一步:自己封装一个轮播图动画（缓动动画）第二步：构建HTMLUI页面第三步：Less书写（CSS）第四步：JS书写与调用第一步:自己封装一个轮播图动画（缓动动画）//Obj 对象//targetleft 移动距离//callback 回调函数function getAnimal(obj,target,callback){ clearInterval(obj.timer) obj.timer = setInterval( (..原创 2022-04-19 10:10:44 · 357 阅读 · 0 评论 -
H5新增classList属性
classList用来返回元素的类名element.classList当类名俩个或者俩个以上的时候，我们可以使用classList通过索引的方式来获取：//比如现在有一个盒子的类名为：class="one two three four"//很随意的一个类名，大家不要效仿//我们获取到元素之后，就可以得到第N个类名了：div.classList[1]//得到two类名一.添加类element.classList.add('add-class-name')//类名无论是原创 2022-04-17 19:26:07 · 461 阅读 · 0 评论 -
简单了解mouseover与mouseenter的使用场景
我们知道鼠标经过和离开的事件有俩种：mouseenter与mouseover，那么这里俩个事件有什么区别呢？mouseenter：给谁注册的事件，就必须经过谁，才能触发该事件简单来说mouseenter不能冒泡，也就是说经过其子盒子，不会触发它的事件而mouseover刚好相反，因为mouseover会冒泡。所以当你经过它的子盒子它也会触发相应事件：<style> *{ margin: 0; padding: 0; }原创 2022-04-17 15:12:21 · 999 阅读 · 0 评论 -
常用键盘事件
目录案例——键盘输入弹出显示框了解更多：onkeyup：某一个按键被松开时触发onkeydown：某一个按键被按下时触发onkeypress：某一个按键被按下时触发（不识别功能键）键盘事件中有一个比较重要的事件对象：keyCode使用e.keyCode可以得到对应的ASCII码值tips：keyCode是不区分大小写的--A--a得到的ASCII码值都为65而keypress是区分大小写的--A得到的是65--a得到的是97<body&g...原创 2022-04-15 21:37:31 · 452 阅读 · 0 评论 -
最简单的禁用鼠标右键菜单---禁止鼠标选中
//禁止鼠标右键菜单document.addEventListener('contextmenu',(e)=> { e.preventDefault()})//禁止鼠标选中document.addEventListener('selectstart',(e)=> { e.preventDefault()})无非就是阻止了默认的行为原创 2022-04-15 20:52:15 · 759 阅读 · 0 评论 -
事件对象与事件委托-包含解决在事件中箭头函数的this指向问题
目录一.了解并使用事件对象二.target与this三.事件委托（冒泡的极致应用）四.事件对象中的鼠标事件一.了解并使用事件对象什么是事件对象？当我们注册一个事件的时候我们会这样写：element.addEventListener('click',()=>{ //执行语句}，true)这时我们会发现有一个地方是空着的，没错就是函数参数是空着的，其实在注册事件的时候，这个参数就是事件对象，我们通过事件的触发所获得的数据会存放在这个事件对象中，可以在事.原创 2022-04-15 20:12:07 · 1008 阅读 · 0 评论 -
必须了解的DOM事件流底层操作流程
事件流是描述从页面中接收事件的顺序，也就是事件发生时会在元素节点之间按照特定的顺序来传播目录一.事件流三阶段二.案例事件——体验事件流一.事件流三阶段捕获阶段-->当前目标阶段-->冒泡阶段这也就是我们执行事件时JS的底层操作，但是JS中只能执行捕获或冒泡其中一个阶段比如我们使用传统方式进行事件捕获：element.onclick = function(){}//只能捕获到冒泡阶段或者使用attachEvent来捕获事件：element.at原创 2022-04-15 17:06:13 · 261 阅读 · 0 评论 -
DOM事件高级进阶
目录一.传统注册事件的方式二.方法监听注册事件三.删除事件一.传统注册事件的方式原生JS中DOM操作，有俩种绑定事件的方式，我们一开始学习接触到的一定是使用下面这样的传统方式来绑定事件：比如onclick、onmouseover等等，都是以on开头的element.onclick = function(){ //执行语句}这样的传统方式具有唯一性，也就是说同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖掉之前的处理函数，使用不方便二.方法原创 2022-04-15 15:45:05 · 227 阅读 · 0 评论 -
DOM节点高阶操作（初识深浅拷贝）
目录一.创建节点二.添加节点三.删除节点四.克隆节点五.这样也可以动态创建节点元素？六.DOM小结鼠标事件：一.创建节点document.createElement('tagName')tagName是我们想要创建的HTML元素，这些元素原本不存在，是动态生成的所以也叫做动态创建元素节点，效果就像我们CSS中的伪元素（::after）创建的元素一样，可以却有本质的不同，相同点只是都能够创建一个新的元素，DOM操作更加的灵活可控当然，我们创建了这个...原创 2022-04-15 12:21:44 · 871 阅读 · 0 评论 -
DOM节点基础操作
目录一.了解节点操作二.进一步深入节点三.节点层级1.父级节点2.子节点3.兄弟节点一.了解节点操作我们所有的代码都是节点，哪怕是一句注释，也是一个节点我们之前所了解到的document.getElementById()document.getElementByTagName()document.querySelector()document.querySelectorAll()像这些获取元素的方法很繁琐，而且逻辑性不强但是如果我们使用节点原创 2022-04-15 10:44:56 · 459 阅读 · 0 评论 -
DOM属性操作
目录一.获取元素属性二.属性值操作三.H5的自定义属性1.设置H5自定义属性2.获取自定义属性一.获取元素属性我们知道通过document.querySelector()等方法可以获取到元素的id或者类属性：const box = document.querySelector('div')console.log(box.id)或者我们使用这个getAttribute()方法：const box = document.querySelector('div')原创 2022-04-15 09:11:41 · 755 阅读 · 0 评论 -
JS-DOM操作经典循环排他思想
在JS的基础学习中，最经典的案例之一就是排他思想了，大家应该都玩过这个排他思想本质就是双重for循环的的嵌套，实现排他的思想我们今天利用案例来解释以下循环排他思想：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2022-04-14 19:16:09 · 689 阅读 · 0 评论 -
DOM操作事件基础
目录一.了解事件二.事件实操——改变元素内容三.改变元素属性四.修改表单元素五.样式属性修改六.修改表单焦点七.强制刷新（Ctrl + 5）一.了解事件事件也就是触发响应机制，我们网页中的任何一个元素都可以产生某些DOM事件事件由三个要素组成：事件源、事件类型、事件处理程序什么是事件源？事件源就是事件被触发的对象，比如我们点击一个按钮，网页背景换了。那么这个按钮就是事件源什么是事件类型？事件类型包含了如何触发、什么事件、什么事件等等什么是事件处理程序？原创 2022-04-14 18:45:27 · 540 阅读 · 0 评论 -
原生JS-DOM操作获取元素的四种方法
目录一.getElementById获取元素二.getElementsByTagName()获取元素三.HTML5新增方法获取元素四.获取body、html元素一.getElementById获取元素这个方法需要根据ID来获取，使用getElementById()可以获取到带有ID属性的元素对象我们来举一个例子：<div id='hello-JS'>你好JS</div>这是一段HTML代码，有这样一个带有ID属性的div元素，我们通过get.原创 2022-04-14 17:27:01 · 6697 阅读 · 1 评论 -
了解DOM原理才能更好进行开发
一分钟了解JS——DOM对象原创 2022-03-07 19:34:11 · 296 阅读 · 0 评论