DOM基础
DOM:document object Model 文档对象模型
提供了访问html文档的方法,允许对html进行增删改查.
DOM树:当网页加载完成后,浏览器会创建一个树状的结构.DOM树状结构中,包含很多节点。
节点的类型:
1.元素类型<div>,<p>,<a>
2.文本节点 "hello,world"
3.注释节点 <!--注释-->
4.文档类型 document
5.声明节点 <!DOCTYPE html>
节点之间的关系:
1.父节点
2.子节点
3.兄弟节点
查找元素节点
1.通过id查找对应的元素节点,返回的是一个节点.
document.getElementById()
2.通过类名查找元素节点,返回的是包含一个或者多个节点的数组
document.getElementsByClassName()
3.通过标签名查找元素节点,返回的是包含一个或者多个节点的数组
document.getElementsByTagName()
4.通过选择器查找查找元素节点,返回的是包含一个或者多个节点的数组.
document.querySelectorAll("#p1");
5.通过选择器查找匹配到的第一个元素节点
document.querySelector(".box");
特殊节点
1.document 文档节点
2.document.documentElement ==> html节点
3.document.body ==> body节点
4.document.head ==> head节点
5.document.doctype ==> 声明节点
通过节点之间的关系查找节点
1.获取某个节点的子节点(返回的是一个数组)childNodes
2.获取某个节点的父节点(只有一个)parentNode
3.获取到第一个子节点firstChild
4.获取到最后一个子节点lastChild
5.获取前一个兄弟节点previousSibling
6.获取后一个兄弟节点nextSibling
7.获取上一个兄弟标签元素previousElementSibling
8.获取下一个兄弟标签元素nextElementSibling
需要注意的是，在IE下会直接跳过HTML中的空格/Tab/换行。
而Firefox下空格会认为是一个节点。
因此，对类似节点取nextSibling或previousSibling时，需要判断节点类型是否是元素节点
var el = $('#demo');
do {
el = el.nextSibling;
} while(el.nodeType != 1);
节点信息
1.nodeValue 节点的值
2.nodeType 节点的类型
3.nodeName节点名字
4.获取元素节点的内容(开始标签与结束标签之间的内容)
a:innerHTML,获取标签里的所有内容 包含文本节点,元素节点,注释节点等(everything)
b:innerText,去掉空格并获取标签里的文本节点,不会显示被隐藏了的元素的文本内容.
注:display,visibility,隐藏的不会被显示,但是opacity隐藏的会被显示
c:textContent:获取文本节点的内容,保留空格,会显示被隐藏了的元素的文本内容.
nodeType
1代表元素节点
3代表文本节点
8代表注释节点
9代表文档节点
10代表声明节点
nodeName
元素节点:元素的标签名(全大写)
文本节点:#text
注释节点:#comment
文档节点:#document
类型节点:html
//hasChildNodes()判断一个节点是否有子节点
元素属性的操作
1.setAttribute 设置某个元素节点的属性
2.getAttribute获取某个元素节点的属性值
3.removeAttribute删除某个元素节点的属性
元素节点的样式
1.style 获取标签内部的样式,所有的内部样式都会展示
2.获取所有的样式
a.仅支持IE===>currentStyle
b.支持IE以外的所有浏览器===>getComputedStyle(元素,伪类)
3.获取指定的某一个样式
div.style.width行内样式
getComputed(div).width //获取所有的样式
getComputed(div)["width"] //获取所有的样式
节点的创建-增加(插入)-克隆-删除-替换-修改
创建节点
1.创建元素节点createElement()
2.创建一个注释节点createComment()
3.创建文本节点createTextNode()
增加：将创建好的节点插入到对应的位置
1.将创建好的节点放到对应节点的最后面
例子:document.body.appendChild(img);
2.在某个节点之前插入对应的节点
insertBefore(a1,a2)在a2节点之前插入a1节点
例子:document.body.insertBefore(imgOne,div4);
3.替换节点 replaceChild(a1,a2);用a1替换a2
例子:document.body.replaceChild(span,div4)
4.删除节点 removeChild(Node);
例子:document.body.removeChild(img);
克隆节点
var last = childrens[0].cloneNode();
demo.appendChild(last);
demo.parentNode.appendChild(demo.cloneNode(true));
//为true时克隆全部节点，为false则只克隆当前节点不包含子节点
// 默认值为false
节点的位置和尺寸
1.内尺寸(不包含滚动条,但是pc端有可能因为浏览器版本问题导致系统将导航条的宽度计算在内尺寸)
var clientHeight = content.height + padding.top + padding.bottom;
var clientWidth = content.width + padding.left + padding.right;
var clientTop = border.Top;
vra clientLeft = border.Left;
2.外尺寸
offsetHeight = content.height + padding.top + padding.bottom + border.top + border.bottom;
offsetWidth = content.width + padding.left + padding.right + border.left + border.right;
offsetTop:该元素的上边框的边缘到offsetParent元素的上边框的内边缘的距离.
offsetLeft:该元素的左边框的边缘到offsetParent元素的左边框的内边缘的距离.
offsetParent:离计算元素最近的已经定位了的父级元素的距离padding.top + padding.bottom
3.滚动尺寸
scrollHeight:滚动区域的高度,如果元素无法滚动,且其内部无超出该元素高度的元素,
则scrollHeight与clientHeight相等
scrollWidth:滚动区域的宽度,如果元素无法滚动,且其内部无超出该元素宽度的元素,
则scrollWidth与clientWidth相等
scrollTop:某一时刻垂直方向的滚动距离
scrollLeft:某一时刻水平方向的滚动距离
当元素被滚动时会触发的时机.onscroll
去看滚动条在谁的上面就给谁设置滚动时机.
碰壁效果
1.控件布局
2.移动
a.水平移动
b.竖直移动
3.控制边界
4.反弹
图片无限播放
1.当最后一张图片滑离边界的时候,后面还有图片(第一张,第二张)
2.当第一遍内容走完时,迅速改变content的x轴的位置
伪代码逻辑：
//声明一个变量,记录x轴的坐标
var x = 0;
//获取到要移动的元素
var contentDiv = document.getElementById("content");
//复制当前元素里的内容拼接到当前内容后面
contentDiv.innerHTML += contentDiv.innerHTML;
//获取到所有的图片
var imgs = contentDiv.getElementsByTagName("img");
contentDiv.style.width = imgs[0].offsetWidth*imgs.length+"px";
//图片运动的函数
function scroll(){
x--;
contentDiv.style.left = x + "px";
//如果达到了第一遍图片的最后,迅速调整x的值为0
if(x == -imgs.length/2*imgs[0].offsetWidth){
x = 0;
}
}
setInterval(scroll,10);
tween.js
缓动函数(补间动画)===>过渡动画
1.第三方动画 tween.js
2.实现:缓动公式(效果:控制物体在某个时间段内的运动速度)
缓动函数:
1.linear 匀速
2.Quad 二次方缓动效果
3.Cubic 三次方缓动效果
4.Quart 四次方缓动效果
5.Quint 五次方缓动效果
6.Sine 正弦缓动效果
7.Expo 指数缓动效果
8.Circ 圆形缓动函数
9.Elastic 指数衰减正弦曲线缓动函数
10.Back 超过范围的三次方的缓动函数
11.Bounce 指数衰减的反弹曲线缓动函数
每种缓动函数都由三种效果:
1.easeIn 加速
2.easeOut 减速
3.easeInOut 先加速后减速
注:linear 只有一种效果匀速
每个函数都有四个参数:
1.t====>开始的步数(从0开始)
2.b====>开始量(开始的属性值)
3.c====>改变量(属性值的改变量):结束位置的属性值 - 开始位置的属性值
4.d====>结束的步数(运动的总时间)
注意:当开始步数增加到与结束步数相等时,整个运动结束.
注注意:只有当t增加到与d相等时才会结束运动;如果不等,运动不会停止.
tween.js的使用
1.下载
2.引入
3.使用tween.js语法
Tween.缓动函数名.缓动效果名(t,b,c,d);