
DOM
编码要得劲
努力学习
展开
-
DOM中常用的操作元素属性
操作元素1,操作元素内容innerText2,操作常用属性3,操作表单元素属性4,操作元素样式属性原创 2019-08-04 11:20:16 · 276 阅读 · 0 评论 -
DOM三种动态创建元素的区别
1,document.write();它是直接将内容写入页面的内容流,但是文档流执行完毕,会导致页面全部重绘 一般不使用这种方式2,innerHTML= “” ;它是将内容写入某个DOM节点,不会导致页面全部重绘注意: 创建少量的元素可以直接使用,但是一旦创建多个,则效率会非常低,比如创建1000个节点就需要3000毫秒左右的时间,效率很低,创建大量的元素建议先将所需要创建的元素放入一...原创 2019-08-05 11:04:07 · 150 阅读 · 0 评论 -
DOM中this与e.target的区别
<div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <script> // 1. e.target 返...原创 2019-08-05 14:12:33 · 433 阅读 · 0 评论 -
DOM的事件对象(event)的常见属性和方法
事件对象属性方法说明e.type返回事件的类型,比如click mouseover 返回的不带one.target返回触发事件的对象e.preventDefault()阻止事件对象的默认行为,比如说不让连接进行跳转e.stopPropagation()阻止冒泡行为,标准的e.srcElement返回触发事件的对象 ie6-8中使用e....原创 2019-08-05 14:24:47 · 691 阅读 · 0 评论 -
DOM操作经典案例
DOM操作经典案例百度换肤案例鼠标移进移出变色(行变色)表单全选全取消案例tag导航栏切换案例百度换肤案例百度换肤案例就是当你点击一张图片时,当前的背景图片就为你所点击的这张图片,实现起来也比较简单,就是更改一下backgroundImage的url路径js代码: <script> var img=document.querySelectorAll('img')...原创 2019-08-05 14:34:43 · 2152 阅读 · 0 评论 -
DOM事件委托
事件委托的原理就是利用事件的冒泡行为,不用给每个子节点单独设置事件监听器,而是在它们的父节点上设置事件监听器,然后利用冒泡原理影响设置每个子节点,这就是事件委托,这样只需要操作一次DOM,提高了程序的性能案例:只要给ul注册鼠标经过事件,然后利用对象的target来找到当前的li,然后改变它的背景颜色,这样就不用给每个li添加事件了<ul> <li>知否...原创 2019-08-05 14:46:46 · 119 阅读 · 0 评论 -
offset与style的区别
offsetstyle可以得到任意样式表中的样式值只能得到行内样式的样式值获取到的数值是没有单位的获得到的值是由单位的offsetWidth包含padding+border+widthstyle.width获得不包含padding和border的值只能获取(只读)属性,不能设置属性或赋值可以读写任何行内样式属性如果只想要获取大小位置,用offse...原创 2019-08-06 02:50:32 · 1714 阅读 · 0 评论 -
window对象的常见事件
1.onload 当页面加载完毕后执行该方法2.onDOM3.onresize 调整窗口大小加载该事件,只要窗口大小发生改变,就会触发这个事件,我们经常利用这个事件完成响应式布局,使用 window.innerWidth/Height获得当前屏幕的宽度/高度...原创 2019-08-06 14:55:15 · 1024 阅读 · 0 评论 -
js原生轮播图
思路:首先要知道需求,先从简单的地方入手,然后一步一步的去改进,但是首先要想好做每一步目的,原因,不要只知道代码是这么写的,而不去想为什么要这么做。动画函数封装 function animate(obj, target, callback) { //做动画的对象,需要移动的距离,回调函数 clearInterval(obj.timer); obj...原创 2019-08-07 09:58:20 · 198 阅读 · 0 评论