2021年1月11日
DOM-获取元素大小和位置
摘要： DOM提供了几个属性用来获取元素大小 - 数字 clientWidth clientHeight - 不包含边框的大小 var box = document.querySelector(".box"); var w = box.clientWidth; var h = box.clientHeigh 阅读全文
posted @ 2021-01-11 21:20 技术活当赏 阅读(135) 评论(0) 推荐(0)
事件解绑
摘要： 页面刷新后，点击div，能执行函数，说明这个事件被存到了内存中 因为事件点击一次过后，还能点击，内存中存的事件一直没有删除，一直停留在内存中 对于内存来说，就是一种资源浪费 解绑：将事件取消掉，对资源的一种节省 var box = document.getElementsByTagName('div 阅读全文
posted @ 2021-01-11 21:17 技术活当赏 阅读(138) 评论(0) 推荐(0)
事件的绑定-addEventListener
摘要： 利用函数addEventListener（‘事件’，function （）{}）可以是同个元素执行多个程序 big.addEventListener('click',function(){ console.log("大"); },true) //在函数后面加true可以使这个div在捕捉阶段就被捕捉 阅读全文
posted @ 2021-01-11 21:12 技术活当赏 阅读(392) 评论(0) 推荐(0)
事件流-addEventListener
摘要： 事件流：指的是事件从开始触发到执行结束的整个过程 3个阶段： 1.捕获阶段：找目标元素 - 由外向内找 2.目标阶段：找到目标元素，执行他的事件 3.冒泡阶段：从目标元素向外离开的过程 - 执行其他元素事件 针对的是W3C标准浏览器 低版本ie中，只有目标阶段和冒泡阶段，没有捕获阶段 阅读全文
posted @ 2021-01-11 21:00 技术活当赏 阅读(132) 评论(0) 推荐(0)
事件类型
摘要： 鼠标 移入 box.onmouseenter = function(){ console.log("移入了"); } box.onmouseover = function(){ console.log("移入了"); } 注意：两者区别在于后者里面嵌套了一个div有个小盒子的话，会进行事件流，冒泡阶 阅读全文
posted @ 2021-01-11 20:52 技术活当赏 阅读(101) 评论(0) 推荐(0)
2021年1月10日
获取元素的样式
摘要： 获取样式 window.getComputedStyle(标签.想要获取的属性) //后面的.可加可不加 var obj = window.getComputedStyle(box); console.log( window.getComputedStyle(box) ); console.log( 阅读全文
posted @ 2021-01-10 23:25 技术活当赏 阅读(83) 评论(0) 推荐(0)
节点操作
摘要： 创建标签 document.createElement(标签名) var div = document.createElement('div') console.log(div); div.innerText = '盒子'; 插入标签 给父标签追加一个子标签 父标签.appendChild(子标签节 阅读全文
posted @ 2021-01-10 23:09 技术活当赏 阅读(131) 评论(0) 推荐(0)
节点和获取节点
摘要： 整个文档由一个一个的节点组成的 节点：标签、文本、属性、文本 .... 获取节点 获取div内部所有节点 var div = document.querySelector("div"); console.log(div.childNodes) 所有的子标签节点 console.log( div.ch 阅读全文
posted @ 2021-01-10 22:51 技术活当赏 阅读(200) 评论(0) 推荐(0)
设置样式和类名操作
摘要： 设置样式 var div = document.querySelector("div"); // 标签.style.css属性 = 值 div.style.width = '200px'; div.style.height = '200px'; div.style["background-color 阅读全文
posted @ 2021-01-10 22:17 技术活当赏 阅读(208) 评论(0) 推荐(0)
内容操作
摘要： 获取div的内容 标签.innerText - 操作文本 var div = document.querySelector("div"); console.log( div.innerText );div.innerText = '这是div'; 带标签 - innerHTML div.innerH 阅读全文
posted @ 2021-01-10 22:07 技术活当赏 阅读(61) 评论(0) 推荐(0)