DOM
文章平均质量分 67
美美| ू•ૅω•́)ᵎᵎᵎ
| ू•ૅω•́)ᵎᵎᵎ
展开
-
9.①通过js修改元素样式style②案例:超长协议:元素滚动事件onscroll他会在元素的滚动条滚动的时候触发③clientWidth;offsetWidth;scrollHeight;
目录一:修改元素样式 元素.style.样式名 = 样式值1.样式名通常可以直接写,但是如果样式名中带有-必须进行修改,将-号去掉,-后的字母大写2.优先级小于 !improt :通过style所修改的样式都是内联样式,所有修改完成后通常会立即生效二:读取元素样式 letaStyle=getComputedStyle(a); alert(aStyle.height)//100px三:获取到元素样式(高...原创 2021-08-12 12:40:00 · 466 阅读 · 0 评论 -
14.用.classList添加.删除.替换.查找.开关,元素属性
一:案例:我们希望点击按钮的时候,a的宽高均变成400px<!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-原创 2021-08-14 16:50:31 · 330 阅读 · 0 评论 -
13.鼠标拖拽:案例:鼠标拖拽小方块,小方格跟着移动(桌面图标拖动)
一:案例鼠标拖拽小方块,小方格跟着移动(桌面图标拖动)<!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-sc原创 2021-08-14 15:17:36 · 1473 阅读 · 0 评论 -
12.①事件委托(委派):给祖先元素添加点击事件,进行事件冒泡(点击小的,会弹出大的)②列表添加新的子元素, 自动有事件响应处理③even.target判断触发事件④轮播图
一:事件委派(事件的委托):-当需要为多个元素绑定相同的响应函数时,可以统一将事件绑定给它们共同的祖先元素,这样只需要绑定一次即可让所有的元素都具有该事件,即使元素是新增的也会具有该事件。二:委派遇到的问题:祖先元素的可触发范围远大于我们要点击的范围如下图,我们想点击a时触发点击事件弹出‘你好’,所以我们进行委派给他的祖先元素ul添加此事件。但是我们发现不光点击li可以触发点击事件,点击粉色部分也可以触发点击事件解决方法:event里面...原创 2021-08-13 20:35:04 · 526 阅读 · 0 评论 -
11.①事件冒泡:取消冒泡event.cancelBubble=true或.sopImmediatePropagation()②事件绑定addEventListener(参数1,参2,参3)③事件传播
一:事件冒泡:设置点击事件,分别点击body、box、span,分别弹出‘我是body’、‘我是box’、‘我是span’但是我们发现点击span时一并弹出了‘我是body’、‘我是box’、这就是冒泡1.冒泡指的是事件的向上传导,当元素上的某个事件被触发时,其祖先元素上的相同事件也会同时被触发2.冒泡与子元素所在位置无关,与结构有关(就算给子元素添加定位,移出父元素里面,还是会产生冒泡)3.要取消事件的冒泡需要用到事件对象(两种方法)...原创 2021-08-12 19:59:35 · 896 阅读 · 0 评论 -
10.①事件类型、②事件对象event的属性和方法③案例:显示X轴Y轴坐标④案例:鼠标移动小方块随之移动③案例小方块虽键盘上下左右移动⑤定时器
目录一:事件:JavaScript可以处理的事件类型为:鼠标类型、键盘类型和HTML类型!第1种:鼠标事件。第2种:键盘事件。第3种:HTML事件。二:鼠标移动事件:document.onmousemove=function(event){}三:案例:显示X、Y轴坐标四:案例:鼠标移动小方块随之移动①解决方法:1.把小方块的position设置为fixed固定定位 根据浏览器窗口定位,此时偏移参照点和浏览器可视窗口一致②解决方法:2.我们之前使用的ev...原创 2021-08-12 15:10:50 · 740 阅读 · 0 评论 -
8.案例:DOM简单的增加删除学生信息
1.在table中添加新的tr时要注意,他俩之间还有一个tbody,2.创建标签letnameTd=document.createElement('td')3.添加元素A.appendChild(在A里面添加我);4.创建超链接a标签 letlink=document.createElement('a');link.href='javascript:;';link.on...原创 2021-08-11 19:20:16 · 312 阅读 · 0 评论 -
7.DOM(六)①创建create#插入appendChild(子元素)#替换insert,replace#删除DOM对象节点②复制节点.深复制,浅复制cloneNode⑥取消超链接a默认跳转行为
目录一:创建DOM对象: 1.麻烦的方法 ①document.createElement()创建一个新的元素 ②把元素加入到list里面 ③创建一个文本节点(就是li里面的文字) ④在newli中加入新创建的文本节点 2.简单的方法 ①创建一个新的newli节点 ②在list里面加入新创建的newl节...原创 2021-08-11 00:57:56 · 334 阅读 · 0 评论 -
6.DOM查询总结(五)
节点(node) 一:网页里的所有东西都是一个节点 二: 节点不同类型: 文档节点 document (整个网页) 元素节点 element (html body h1 div span...) 文本节点 text (标签中的文字) 属性节点 attribute (标签中的属性) 三:事件(event) 1. 事件就是用户和浏览器的交换瞬间,像鼠标点击,鼠标移动,按下按键... ...原创 2021-08-10 19:37:36 · 111 阅读 · 0 评论 -
5.DOM(四)获取某个元素的父或兄弟节点,输出文本span.innerHTML;span.innerText;span.textContent;span.firstChild.nodeValue
目录一:获取某个元素的父节点 letfuqin=c.parentNode;二:获取某个元素的兄弟节点 ①previousSibling获取当前节点的前一个兄弟节点(空白) ②nextSibling获取下一个兄弟节点(空白) ③previousElementSibling获取当前节点上一个兄弟元素(非空白) ④nextElementSi...原创 2021-08-10 18:58:02 · 396 阅读 · 0 评论 -
4.DOM(三)1.获取元素的某个子元素c.getElementsByTagName(‘li‘)2.全部子元素①空白c.childNodes②无空白c.children 3获取第一个和最后一个子元素
一:获取元素的某个子元素①先获取class为c的元素 letc=document.getElementById('c');②然后在获取id为c中的所有li letli=c.getElementsByTagName('li');二:获取元素的全部子元素1.获取c的所有子节点(包括空格节点)letcc...原创 2021-08-10 16:21:05 · 6362 阅读 · 0 评论 -
3.DOM(二)两个万能的查询方法:let c = document.querySelector(‘.c‘)和let c = document.querySelectorAll(‘.c‘)不实时更新
document.querySelectorAll('标签名')document.getElementByTagName('标签名')都能获取此标签名的所有元素,但是区别在于后者实时更新,插入更新长度,前者不更新原创 2021-08-10 15:49:06 · 313 阅读 · 0 评论 -
2.DOM练习:轮播图切换图片
<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>Document</title> <style>...原创 2021-08-09 22:00:10 · 168 阅读 · 0 评论 -
1.DOM(一)document.getElementById(‘id名‘)、~ClassName(‘class名‘)、~TagName(‘标签名如li,div‘)、~Name(‘name属性值‘)
目录一:DOM(DocumentObjectModel)文档对象模型 1.文档(Document):文档指整个网页(一个文档就是一个网页) 网页由三个部分组成:①结构(HTML)②表现(CSS)③行为(JavaScript) ②DOM中为我们提供了大量的对象,使我们可以通过JS来完成对网页操控 2.对象(Object):DOM将网页中的所有的东西都转换为了对象 3.模型(Model) -...原创 2021-08-09 20:31:31 · 1282 阅读 · 0 评论 -
15.案例:京东放大镜 鼠标事件mouseover鼠标移到某个元素上触发;;;mouseout鼠标移出某个元素触发;;;mousemove鼠标在某个元素上移动时触发
html: <div class="xq_goodll"> <div class="xq_goodlltop"> <!-- 遮罩层,(遮1),宽高300 --> <div class="jjj"></div> <!-- 宽高400 --> ..原创 2021-08-21 13:58:07 · 127 阅读 · 0 评论