js基础知识(二)
DOM(Document Object Model)文档对象模型
window叫做根对象,有两个角色
1.代表javaScript代码的全局对象
2.代表浏览器窗口,并提供了控制它的方法
作为全局对象
function say(){
alert("hello word");
}
window.say();
作为浏览器窗口,如查看窗口高度
window.innerHeight
DOM 文档对象模型
document对象是页面的主要"入口点".我们可以使用它来更改和创建页面上的任何内容.
DOM文档对象,能够把网页当中的所有标签都包装成对象,那么这个标签的样式/类名/自带属性都会作为这个对象的属性存在
document.body.style.backgroundColor = "red"; //改变页面的背景颜色
BOM(Browser Objrct Model)浏览器对象模型
表示浏览器(主机环境)提供的用于处理文档之外的所有内容的其它对象
获取dom对象
1. var divEle = document.getElementById("box"); //获取id为"box"的dom对象
//想要查看dom对象上的属性和方法
consloe.dir(divEle);
2.var pArr = document.getElemntByTagName("p"); //这里获取的是一个包含dom元素的伪数组.因为标签不唯一,所以放在数组里返回
pArr[0].style.color = "red";
3.var divArr = document.getElementsByClassName("xontain"); //也是一个伪数组
divArr[0] //获取dom对象
注意:操作dom,必须找到dom对象,直接对伪数组,无法操作
伪数组有索引,有长度,能用for循环遍历但不具备数组的方法
query获取dom对象
var box = document.querySelector(".box"); //获取到的不再是伪数组,而是真正的dom对象
//注意:querySelector()这个方法只会去取到一个dom元素,哪怕匹配到了多个选择器,但只返回第一个
var boxArr = document.querySelectorAll(".box");
//获取到的是伪数组形式,返回所有匹配到的选择器
注意:以上两个方法是通过css选择器来获取dom对象的.所有的css选择器都可以用
//使用思路:想获取某些dom对象时,先考虑如何用css选择器选中它,然后把这个选择器写进去即可.
特别注意:用document.querySelectorAll获取dom时的伪数组可以用forEach进行遍历
事件机制
js是一门以事件驱动为核心的语言
<!--有一个div标签,点击让文字颜色变红-->
<div class="box">我要变红</div>
第一步:获取事件源,也就是dom对象
var box = document.querySelector(".box");
第二步:为事件源绑定事件
box.onclick = function (){
//第三部:处理事件
box.style.color = "red";
}
//第二种行内绑定
<div class="box" onclick="say()" >我要变红</div>
function say(){
var box = document.querySelector(".box");
box.style.color = "red";
}
//移除事件
box.onclick = null;
事件
鼠标事件
onclick //当鼠标点击一个元素时
onmouseover / onmouseout //当鼠标指针移入/离开一个元素时
onmousedown / onmouseup //当在元素上按下/释放鼠标按钮时
onmousemove //当鼠标移动时
表单元素事件
onchange //当用户改变表单内容时
onfocus //当焦点在一个元素上时
键盘事件
onkeydown / onkeyup //当用户按下键盘 / 松开键盘时
Document事件
onload //当HTML页面加载完成时
样式的修改和获取
修改样式就先获取到dom对象,然后dom对象的style属性有这个dom元素的所有属性,就可以进行修改和获取
//注意:通过js进行dom元素属性的修改,相当于给这个元素加了这些行内样式,权重很高.
获取时也是得到的这些行内样式,如果设定这些行内样式,则返回为""的字符串
通过getComputedStyle(dom对象)获取所有作用在元素上的最终样式
类名操作
<p class="text">我是文本</p>
获取dom
var pEle = document.querySelector("p");
//类名对象的属性叫className
修改类名:pEle.className = "box";//就把类名修改成了box
//追加类名
pEle.className + = " contain"; //注意要加上空格,不然会紧挨着
Html5新出以后,新增了类名的操作
dom对象.classList.add("类名");
//如果要追加多个的话
dom对象.classList.add("类名","类名");
切换类名:有(此类名)则删除,无(此类型)则添加
dom对象.classList.toggle("类名")
判断类名是否存在:有则返回true,无则返回false
dom对象.classList.contains("类名")
注意:在项目开发中尽量不要用style去修改删除样式,太麻烦,而且还是行内样式.要有通过类名去控制的思想,通过追加或者删除类名的方法,达到为标签设置或者去除样式
dom关系(通过关系获取节点)
<div>
<div class="inner>我是子元素<div>
</div>
//获取inner的父元素
//先获取到该dom元素
var innerDiv = document.querySelector(".inner");
//获取该dom的父元素,可以通过E.parentNode属性,它存着E的父节点
var parent= innerDiv.parentNode; //获取到的就是父元素div
获取兄弟元素:
e.nextElementSibling 下一个元素节点
e.previousElementSibling 上一个元素节点
特殊:e.nextSibling e.proeviousSibling 获取下一个节点(html中换行符也是节点,注释也是节点)
//查找子元素
el.childNodes(el的所有子节点,这个会连换行什么的都获取到) 和 el.children(el的所有标签子节点)
nodeType属性
nodeType 节点类型
1 元素标签节点
3 文本节点
8 注释节点
节点操作
节点的增删改查
结构
<div class="box">
<p>这是一段文本</p>
</div>
//节点的创建
var div = documnet.creatElement("div"); //创建了一个div元素节点
var imageEl = document.creatElement("img");
imageEl.scr = "xx/xxxx.jpg";
//插入节点(父节点.appendChild(插入的子节点))
//注意:插入的位置是插入到父元素的末尾,同数组的push类似
var box = document.querySelector(".box");
box.appendChild(imageEl);
//实现插入父节点的任意位置
父节点.insertBefore(插入的节点,被插入位置的节点)
box.insertBefore(imageEl,p);//通过这样就可以把imageEl插入到p标签的前面,而不是之前的末尾
注意:插入节点时,不能对同一个节点执行多从插入(否则就是剪切的效果,原位置的会消失)
删除节点:
//删除box里面的p标签
父节点.removeChild(删除的节点)
var box = document.querySelector(".box");
box.removeChild(p);
//更简单的方法
直接 p.parentNode.removeChild(p); 更更简单的 p.remove();直接就把自己删掉了
克隆节点:cloneNode(true/false),true深克隆.false浅克隆
var box = document.querySelector(".box");
box.cloneNode(true);
节点的属性操作
1.节点属性值的获取,直接通过query就可以获取
2.添加新属性. 标签.属性名 = value
3.属性的操作方式,利用dom对象专门的方法
getAttribute() 属性的获取
setAttribute() 属性的设置
removeAttribute() 属性的删除
两种操作的区别
obj.属性名 是属性就能操作
get/set/removeAttribute() 只能操作标签的固有属性(标签本身有的属性,如用obj.属性名随意添加的属性,就不能用getAttribute获取到
标签的自定义属性
html当中的标签很多的属性,是固有的,咱们没办法去随意给标签添加属性
自定义属性可以帮助我们去为标签添加一些属性data-*
设置自定义属性,可以将一些必要的信息,保存进去,以便我们使用,自定义属性最主要的作用就是用来携带信息
结构
<ul>
<li data-color="red">red</li>
<li data-color="yellow">yellow</li>
<li data-color="blue">blue</li>
<li data-color="pink">pink</li>
<li data-color="green">green</li>
//把每个标签设置一个自定义的属性,这个属性携带了要用了设置颜色的信息
</ul>
<script>
var lis = document.querySelectorAll("li");
for(var i= 0, i < lis.length, i++){
//获取自定义属性保存的值
var colorInfo = lis[i].dataset["color"];
<!--var colorInfo= lis[i].dataset.color; 这种 方法也可以获取到自定义属性的值-->
lis[i].style.color = colorInfo;
}
</script>
innerHTML和innerText
获取:<br>
innerHTML 获取到的是内部的完整结构的字符串<br>
innerText 只能获取到里面的文本内容的字符串<br>
设置:<br>
使用innerHTML会把标签字符串当做标签解析,使用innerText只会当做纯文本处理
表单内容操作
略
addEventListener事件监听器
addEventListener事件监听器可以为一个元素绑定多个相同的事件
结构:
<div class="box">点我</div>
var box = document.querySelector(".box");
<!--box.addEventListener(事件类型,回调函数);-->
box.addEventListener("click",function(){
//执行
console.log("绑定的第一个事件")
});
//再绑定一个
box.addEventListener("click",function(){
//绑定的第二个事件
});
注意:普通绑定的时间可以用元素.onclick=null移除事件.用addEventListener绑定的事件,用removeEventListener(事件类型,回调函数)移除.移除时候的参数和绑定的时候的参数要一一对应.特别注意,移除的时候要用外部函数,直接应在addEventListener写的回调函数是无法移除的,因为再写的匿名函数和之前的匿名函数,虽然样子一样,但内存地址已经不一样了,不是同一个函数
捕获,冒泡
addEventListener()的第三个参数capture,控制机事件触发的阶段,true:代表捕获阶段触发.false/不写:代表冒泡阶段触发
捕获阶段:捕获目标的阶段,从外往里
冒泡阶段:从里往外
定时器
setTimeout(fn,dely); //延迟定时器.dely的单位为毫秒
<!--例子-->
var timer1 = setTimeout(function(){
console.log("要做的事情,是个异步任务");
},2000);
//注意:定时器是异步的
----------------------------------
setInterval(fn,interval); //循环定时器,fn要执行的任务,interval循环的时间间隔
var timer2 = setInterval(function(){
console.log("循环执行的任务");
},1000);
----------------------------------
移除/关闭定时器
clearTimeout(timer1); //用于关闭setTimeout这种的定时器,括号需要传入定时器的名字
clearInterval(timer2); //用于关闭setTnterval这种的定时器,括号需要传入定时器的名字
offest
offestParent 用于获取离自己最近的具有定位属性的父元素.如果一直找不到,就返回body元素
offestWidth/offestHeight 用于获取元素的实际宽高,只能用于获取,不能用来设置,注意:获取的是一个不带单位的数字,获取到是实际高度(边框+内容+外边距),获取的是整数.
offsetLeft/offestTop 用于获取自己的offestParent元素的左,上边框的距离.注意:当offestParent是body的时候距离是带上边框的,当不是body的时候是不带边框的,获取的是整数(小数时,四舍五入),只能获取不能设置
js动画
略过
事件对象
触发事件的同时,为我们提供了一个对象(event),包含了元素的信息,鼠标的信息,键盘的信息(比如点击了谁,点击的时候,鼠标的坐标)
type:事件的类型
event.target 触发事件的目标元素(实际触发事件的元素),获取target的兼容写法 event.target || event.scrElement
event.currentTarget 绑定事件的目标元素.
this 指向事件源
event.pageX/Y 获取鼠标点击的相对于页面的位置
event.clientX/Y 获取鼠标点击的相对于可视区域的位置
event.screenX/Y 获取鼠标相对于屏幕的位置
event.offestX/Y 表示鼠标指针位置相对于触发事件的对象的位置
键盘信息
onkeydown 按下键盘,事件对象获取按键码不区分大小写,获取功能键的按键码
onkeyup 抬起键盘
onkeypress 按下键盘 区分大小写,不识别功能键 ctrl shift Cap tab
keyCode按键码 回车13 shift 16 空格32
鼠标信息
el.onmousedown = function(){
console.log(event.button);
console.log(event.which);
};
onmousedown 鼠标按下事件(event.button/event.which)
button: 0 鼠标左键按下 1 鼠标滚轮按下 2 鼠标右键按下
which: 1 鼠标左键按下 2 鼠标滚轮按下 3 鼠标右键按下
阻止冒泡事件和阻止默认事件
阻止冒泡:点击内部元素时,父元素身上的事件也会发生冒泡(想阻止向父元素身上冒泡)
event.stopPropageation()
ie<10: event.cancelBubble = true
el.onclick = function(){
console.log("只有我子元素触发了事件");
event.stopPropageation();
//兼容写法
<!--event.stopPropageation() ? event.stopPropageation(): (event.cancelBubble = true)-->
};
阻止默认事件的发生(如a标签的跳转事件)
//event.preventDefault()
ie10兼容写法
event.preventDefault?event.preventDefault():(event.returnValue = false);
事件委托
//新增的数据没法绑上事件,可以采用委托的方式解决,也就是给他们的父元素绑定事件
el.onclick = function (){
//注意这里的标签类型需要大写
if(event.target.tagName = "DIV"){
event.target.style.color = "red";
}
};
el.close("选择器"); //匹配离el最近的符合(括号里这个选择器)的父元素(包含自己)
鼠标跟随
略过
动态渲染页面
拼接标签字符串,用innerHTML插入标签字符串
scrollWidth/Height srollTop/Left
scrollWidth/Height
返回元素内容区的大小,width/height + padding(border包含)
注意:如果元素溢出,返回溢出内容的宽高+padding(上/左的padding),如果添加了overflow,padding(上下左).
只可获取值,不能设置值,获取的值是整数
srollTop/Left
返回元素被卷入的上左边距,可读写的值,读取的值可以不是整数
监听滚动事件 element.onscroll = function(){
}
window.pageXOffest/pageYOffest 获取页面卷入的左/上边距(只读属性)
监听页面滚动 window.onscroll = function(){
}
赋值页面滚动的值 window.scroll(x,y)
window.scrollBy(x,y) 相对前位置位移
页面顺滑滚动:
方式一:
window,scroll/by{
top:xx,
left:xx,
behavior:"smooth"
}
方式二: 给html添加css样式 {scroll-behavior: smooth}
clientWidth/Height/Top/Left
clientWidth/Height:显示元素可视大小, 元素自身宽高+padding,当有滚动条时,会减去滚动条的宽度
clientTop/Left:返回元素上左边框的宽度
window.innerWidth/Height 获取页面可视区域宽高,带滚动条的宽高
window.outerWidth/Height 获取浏览器尺寸
window.screen.width/height 屏幕尺寸
window.availwidth/Height 获取浏览器最大可视区大小
补充
获取html和body也可以通过
var html = document.documentElement;
var body = document.body;
write-model 文字书写方向
user-select: none; 用户不能选中
缓动动画步骤
function move(ele, end){
if(ele.timer){
clearInterval(ele.timer);
}
ele.setIntervial(function (){
//获取起点
var start = ele.offestTop;
//设置步长
var step = (end - start) / 10;
//修正步长
if(Math.abs(step) < 1){
step = step > 0 ? 1 : Math.floor(step);
}
//运动
ele.style.top = start + step + "px";
//判断结束
if(start + step == ned){
clearInterval(ele.timer);
ele.timer = null;
}
},1000/60);
}
js三大家族
1.offest家族
2.scroll家族
3.client家族
obj.xxx 已知属性名 obj[xxx] 计算属性,属性名是变量或者表达式,或者长字符串
数组的for of遍历和for in遍历.前者返回的是数组里面的值,后者是返回对应的索引.而且后者会跳过空元素
浙公网安备 33010602011771号