目录
event事件对象 与offset系列属性结合案例放大镜的制作
getBoundingClientRect()返回元素的大小和相对于视口的位置
获取DOM对象方法一
1.通过id获取
var 变量名 = document.getElementById("id值")
注意:getElementById()括号中的不需要在前面加“#”,因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。
2. 通过class(类名)获取
var 变量名 = document.getElementsByClassName("类名")
注意:getElementsByClassName()括号中的不需要在前面加 “.” ,因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件,需要获取到集合中的某一个元素,然后再为元素绑定事件。
方法:通过class值来获取元素对象集合,通过下标来得到单个元素对象
3. 通过标签名获取
var 变量名 = document.getElementsByTagName("p");
注意: 该方法返回的也是一个集合。
4. 通过name属性获取
var 变量名 = document.getElementsByName("name");
注意:只有含有name属性的元素(表单元素)才能通过name属性获取
通过name值来获取元素对象集合,通过下标来得到单个元素对象
5. 通过querySelector(选择器)获取
var 变量名 = document.querySelector(".box");
注意:querySelector()方法括号中的值是元素的选择器,所以前面加了"."符号,使用的是类选择器。通过选择器获取匹配到第一个元素 唯一。
6. 通过querySelectorAll获取
var 变量名 = document.querySelectorAll(".box")
注意:querySelector()和querySelectorAll()方法括号中的取值都是选择器,但这两个方法是有区别的。当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。
getElementXXX类型的方法注意事项:
getElementXXX类型的方法,除了通过Id获取元素和 document.querySelector(”选择器“)
通过选择器获取匹配到第一个元素 ,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引,如:document.getElementsByClassName("box")[0] =>获取class为box的所有元素中的第一个DOM元素。
获取特殊对象方法 body html
var 变量名 = document.body //获取body元素对象
var 变量名 = document.documentElement // 返回html元素对象
获取或返回元素内容方法
dom对象.innerHTML 获取元素内部的内容 可识别标签 保留空格和换行
dom对象.innerText 获取元素内部的文本 不识别标签 不保留空格和换行
dom对象.value 获取表单控件的值这三个属性是可读写的 可以获取元素里面的内容 也可修改元素内部的内容
<body> <div></div> <p> 我是文字 <span>123</span> </p> <script> // innerText 和 innerHTML的区别 // 1. innerText 不识别html标签,去除空格和换行 var div = document.querySelector('div'); div.innerText = '<strong>今天是:</strong> 2022.5.1'; // 2. innerHTML 识别html标签 保留空格和换行的 div.innerHTML = '<strong>今天是:</strong> 2022.5.1'; // 这两个属性是可读写的 可以获取元素里面的内容 var p = document.querySelector('p'); console.log(p.innerText); console.log(p.innerHTML); </script> </body>
JS与CSS交互
js添加与修改属性样式
单个属性样式添加:dom对象.style.样式属性名 = "属性值";
多个属性样式添加:dom对象.style = "";
非常多属性样式添加:dom对象.className = "类名"; 注意可结合多类名方式解决类覆盖问题
修改样式直接给相应样式赋值即可
<script> // 样式添加练习 var dom对象 = document.getElementById("dom对象id"); // 方法一:逐个添加 _yangshi.style.fontSize = "60px"; //样式为一个单词如width可直接写,但为两个单词如font—size这种则要把—删去,并让"—"后方单词首字母大写(驼峰) // 方法二:统一添加 //此方法要注意后续另起一行添加会把上一行的样式覆盖掉 dom对象.style = "width: 300px; height: 3000px; background-color: #00f"; // dom对象.style = "font_size: 60px;"//_yangshi.style被重新赋值 把上一行的样式覆盖掉 // 方法三:赋值类(样式较多时直接用此方法即可)//赋值类名会覆盖原本的类,可采用多类名来解决此问题 dom对象.className = "旧类名 新类名"; </script>
样式获取(查询)
dom对象.style.样式属性名 行内样式
console.log(dom对象.style.color ); //行内样式
window.getComputedStyle(dom对象).样式属性名 获取计算的样式
类操作
dom对象.className dom对象.className = "类名1 类名2" 添加类
dom对象.classList.add(类名1, 类名2, ....) 添加一个或多个类
dom对象.classList.remove(类名1, 类名2, ....) 删除一个或多个类
dom对象.classList.toggle(类名) 添加/删除一个类 有则删,无则加
dom对象.classList.contains(类名) 判断dom对象是否含有某个类 若含有某个类返回true,否则返回false
dom对象.classList.item(索引) 根据索引返回对应类
DOM节点
节点属性操作
属性设置
- 设置内置属性值
节点对象.属性 = '值';
- 设置自定义的属性
节点对象.setAttribute(“属性名” , "属性值")
查看属性值
- 获取内置属性值(元素本身自带的属性)
节点对象.属性;
- 获取自定义的属性
节点对象.getAttribute("属性名")
删除属性
节点对象.removeAttribute("属性名")
节点操作(增删复插替)
创建元素节点
document.createElement("元素名")
追加(添加)节点
父节点.append(节点对象或字符串)
父节点.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素
node.insertBefore(child , 指定元素) 将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素
删除节点
父节点.removeChild(删除的子节点对象)
节点对象.remove();//删除指定节点
克隆节点
节点对象.cloneNode(参数) 参数: 括号为空或者是里面为false 是浅拷贝 只复制标签不复制里面的内容 括号为true 是深拷贝 复制标签复制里面的内容
插入节点
父节点对象.insertBefore(新节点 , 参照节点)
替换节点
父节点对象.replaceChild(用来替换的新节点 , 被替换的老节点)
获取DOM对象方法二
节点查找
父节点查找子节点方法
查找父节点下的第一个子节点 (可能会找文本节点)
父节点对象.firstChild
查找父节点下的最后一个子节点 (可能会找文本节点)
父节点对象.lastChild
查找父节点下的所有的子节点 (可能会找文本节点)
父节点对象.childNodes
查找父节点下的第一个子元素节点
父节点对象.firstElementChild
查找父节点下的最后一个子元素节点
父节点对象.lastElementChild
查找父节点下的所有的子元素节点
父节点对象.children
可使用索引查找具体节点
如: 父节点对象.children[0]
子节点查找父节点
子节点对象.parentNode
子节点对象.parentElement
兄弟间节点查找
查找下一个兄弟节点(可能会找到文本节点)
节点对象.nextSibling
查找前一个兄弟节点(可能会找到文本节点)
节点对象.previousSibling
查找下一个元素兄弟节点
节点对象.nextElementSibling
查找前一个元素兄弟节点
节点对象.previousElementSibling
event事件对象(此处含有鼠标相对于窗口的位置知识)
函数中的形参也代指event,所以将下方的event.写为形参.也可行
- event.target 事件作用的目标
- event.type 事件类型(事件名称)
- event.clientX 距离浏览器窗口左侧的坐标(水平)受滚动条影响
- event.clientY 距离浏览器窗口上侧的坐标(垂直)
event.clientX、event.clientY(不太推荐使用)
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
- event.pageX 距离文档左侧的坐标(水平) 不受滚动条影响
pageX = clientX + scrollLeft
- event.pageY 距离文档上侧的坐标(垂直)
pageY = clientY + scrollTop
event.pageX、event.pageY(推荐使用)
类似于event.clientX、event.clientY,但它们是鼠标相对于文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
offset系列属性(获取元素的长和宽、位置)
offset作用:获取元素的长和宽、以及位置,是一个只读属性,不可更改。
offset包括四个属性:offsetWidth、offsetHeight、offsetTop、offsetLeft
offsetTop指 obj 相对于页面或由
offsetParent
属性指定的父坐标的计算上侧位置,整型,单位:像素。
offsetTop
=offsetParent
的padding-top + 中间元素的offsetHeight + 当前元素的margin-top简单来说,就是offsetParent的边框到该元素边框之间的距离。
dom对象.offsetTop
offsetLeft指 obj 相对于页面或由
offsetParent
属性指定的父坐标的计算左侧位置,整型,单位:像素。
offsetLeft
=offsetParent
的padding-left + 中间元素的offsetWidth + 当前元素的margin-left简单来说,就是offsetParent的边框到该元素边框之间的距离。
dom对象.offsetLeft
这里有一个offsetParent属性,这是指该元素的父元素(使用定位的父元素,如果上一级父元素没有定位,则向上继续寻找,直至找到根元素body)。
offsetWidth指 obj 控件自身的绝对宽度,不包括因
overflow
而未显示的部分,也就是其实际占据的宽度,整型,单位:像素。简单来说,就是元素的内容+padding+边框。
dom对象.offsetWidth
offsetHeight指 obj 控件自身的绝对高度,不包括因
overflow
而未显示的部分,也就是其实际占据的宽度,整型,单位:像素。简单来说,就是元素的内容+padding+边框。
dom对象.offsetHeight
client系列(获取对象位置边框宽度等)
event.clientX、event.clientY(不推荐使用)
鼠标相对于浏览器窗口可视区域的X,Y位置坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
dom对象.clientLeft : 获取元素左侧边框的宽度
dom对象.clientTop : 获取元素上侧边框的宽度
dom对象.clientWidth :content + padding 不包含border,不包含滚动条(该元素对象的左内边框至右内边框的距离)
dom对象.clientHeight :content + padding 不包含border,不包含滚动条(该元素对象的上内边框至下内边框的距离)
event事件对象 与offset系列属性结合案例放大镜的制作
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
.box {
position: relative;
/* width: 1000px; */
width: 400px;
margin: 10px auto 0;
background-color: rgb(239, 203, 140);
}
.box .left {
width: 400px;
}
.box .left .left-top {
position: relative;
width: 400px;
height: 400px;
box-shadow: 0 0 0 1px #999;
}
.box .left .left-top img {
width: 400px;
height: 400px;
}
.box .left .left-top .zhezhao {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 250px;
background-color: rgba(253, 253, 253, 0.5);
cursor: move; /*改变鼠标指针样式*/
}
.box .left .left-bottom {
width: 400px;
background-color: #f1f1f1f1;
}
.box .left-bottom ul li {
float: left;
width: 100px;
margin: 10px;
}
.box .left-bottom ul li img {
width: 100px;
}
.box .right {
display: none; /*先隐藏掉 */
position: absolute;
left: 400px;
top: 0;
overflow: hidden;
width: 500px;
height: 500px;
box-shadow: 0 0 0 1px #f00;
}
.box .right img {
position: absolute;
left: 0;
top: 0;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="box">
<!-- 左侧中等图片 -->
<div class="left">
<div class="left-top">
<img src="img/pic11.jpg" alt="" />
<div class="zhezhao"></div>
</div>
<!-- 下方小图片 -->
<div class="left-bottom">
<!-- <span><</span> -->
<ul class="clearfix">
<li><img src="img/pic11.jpg" alt="" /></li>
<li><img src="img/pic22.jpg" alt="" /></li>
<li><img src="img/pic33.jpg" alt="" /></li>
</ul>
<!-- <span>></span> -->
</div>
</div>
<!-- 右侧大图 -->
<div class="right">
<img src="img/pic11.jpg" alt="" />
</div>
</div>
</body>
<script>
var box = document.querySelector(".box"); //获取最外侧div
var leftTop = document.querySelector(".left-top"); //获取遮罩与中等图的父级
var zhongimg = document.querySelector(".left-top>img"); //获取中等图片
var _zhezhao = document.querySelector(".zhezhao"); //获取遮罩层
var _rightDatu = document.querySelector(".right"); //获取右侧大图
var rightDatu = document.querySelector(".right>img"); //获取右侧大图
var imgs = document.querySelectorAll(".left-bottom li"); //获取下方轮播图片的li
// 确定好定位关系,利用定位属性的left与top等属性值,结合偏移量数值,再结合鼠标移动事件,来实现让遮罩层随鼠标移动的效果。
//再根据偏移量数值来确定 定位的最大值与最小值 从而确定(限制)遮罩层所能移动的范围
_zhezhao.onmousemove = function (every) {
//鼠标移动事件
//.pageX 的偏移值不受滚动条影响 推荐使用此方法
//.clientX 的偏移值受滚动条影响
// console.log(every.pageX, every.clientX);
var lf = every.pageX - _zhezhao.offsetWidth / 2 - box.offsetLeft; //遮罩层距离页面左侧的距离 - 自身内容宽度的一半 - 父元素距离距离页面左侧的距离
var tp = every.pageY - _zhezhao.offsetHeight / 2 - box.offsetTop; //等式结果为遮罩层在父级元素中的left/top定位置
if (lf <= 0) {
//定位的left数值最小范围
lf = 0;
} else if (lf >= leftTop.offsetWidth - _zhezhao.offsetWidth) {
//父级元素 - 遮罩层自身宽度 = 遮罩层可移动的最大宽度
lf = leftTop.offsetWidth - _zhezhao.offsetWidth; //定位的left数值最大范围
}
//竖直方向与水平方向同理
if (tp <= 0) {
//定位的left数值最小范围
tp = 0;
} else if (tp >= leftTop.offsetHeight - _zhezhao.offsetHeight) {
//父级元素 - 遮罩层自身宽度 = 遮罩层可移动的最大宽度
tp = leftTop.offsetHeight - _zhezhao.offsetHeight; //定位的left数值最大范围
}
_zhezhao.style.left = lf + "px";
_zhezhao.style.top = tp + "px";
//下方让对应大图反方向与小图对应移动 取相对应的负值
rightDatu.style.left = -lf * 2 + "px"; //此处我们设置小图与大图的比例为 1 :2
rightDatu.style.top = -tp * 2 + "px"; //所以应使大图全部显示同时就要调整大图移动数值的比例
};
//鼠标放在轮播图上时,将相应的中等图片更换
// onmouseover onmouseout 这两个函数会触发事件冒泡(事件冒泡:是指元素内部的子元素同样会触发事件而造成影响)所以需要进行判断
// onmouseenter onmouseleave 而两个函数不会触发事件冒泡(子元素不会触发事件) 这两个则无需判断
for (let i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function (every) {
//鼠标移入事件
// console.log(every.target.src); //事件作用目标:every.target ; 通过此方法获取小图的src
if (every.target.src != undefined) {
zhongimg.src = every.target.src; //把小图的src值 赋值给 zhongimg的src上
}
};
}
//鼠标放在中等图片父级上时,将相应的右侧大图更换
leftTop.onmouseover = function () {
//移入事件
rightDatu.src = zhongimg.src; //把中等图的src值 赋值给 右侧大图的src上
_rightDatu.style.display = "block"; //并且把右侧大图显示出来
};
leftTop.onmouseout = function () {
//移出事件
_rightDatu.style.display = "none"; //并且把右侧大图显示出来
};
</script>
</html>
效果:
getBoundingClientRect()返回元素的大小和相对于视口的位置
Element.getBoundingClientRect()方法会返回元素的大小和相对于视口的位置
集合中有top,left, right, bottom,等属性
dom对象.getBoundingClientRect()
元素左边到视窗左边的距离
dom对象.getBoundingClientRect().left
元素上边到视窗上边的距离
dom对象.getBoundingClientRect().top
元素右边到视窗左边的距离
dom对象.getBoundingClientRect().right
元素下边到视窗上边的距离
dom对象.getBoundingClientRect().bottom
元素自身宽度(content + padding + border)
dom对象.getBoundingClientRect().width
元素自身高度(content + padding + border)
dom对象.getBoundingClientRect().height
scroll系列属性(滚动条相关属性)
返回/获取元素垂直方向滚动条滚动距离
dom对象.scrollTop
返回/获取元素水平方向滚动条滚动距离
dom对象.scrollLeft
返回/获取元素内部实际内容的宽度
dom对象.scrollWidth
返回/获取元素内部实际内容的高度
dom对象.scrollHeight
dom对象滚动条滚动距离水平方向每次滚动x像素,垂直方向每次滚动y像素
dom对象.scrollBy(x , y)
dom对象滚动条水平方向滚动到x像素,垂直方向滚动到y像素
dom对象.scrollTo(x , y)
DOM事件
事件流类型
事件冒泡流(由内向外,由子向父)
事件捕获流(由外向内,由父向子)添加监听事件
添加:dom对象.addEventListener(参数1,参数2,参数3)
参数1:事件名 不带on
参数2:函数 事件触发后调用函数
参数3:布尔值 事件流的类型 默认false事件冒泡流 如为true,则是事件捕获流
删除:dom对象.removeEventListener(参数1,参数2,参数3)
参数1:事件名 不带on
参数2:函数 事件触发后调用函数
参数3:布尔值 事件流的类型 默认false事件冒泡流 如为true,则是事件捕获流