Javascript基础-DOM

WEB APIS

作用：使用JS去操作html元素和浏览器。
操作DOM (文档对象模型)、BOM (浏览器对象模型)，达到控制网页元素，交互等各种网页交互效果

DOM-Document Object Model

概念

文档对象模型，是用来呈现以及与任意HTML或XML文档交互的API，比如对页面元素进行移动，大小，添加删除等操作。

DOM对象

DOM对象：浏览器根据html标签生成的JS对象
    ➢所有的标签属性都可以在这个对象上面找到
    ➢修改这个对象的属性会自动映射到标签身上
最大的对象是Document，所以它提供的属性和方法都是用来访问和操作网页内容的
例: document.write()
网页所有内容都在document里面

获取DOM对象

通过css选择器获取

1、语法
	选择匹配的第一个元素：document.querySelector('css选择器')   
		eg.document.querySelector('div')  document.querySelector('.box') 
		document.querySelector('#nav')  document.querySelector('ul li:first-child')
		总结：本质上css怎么选js就怎么选 
	选择所有匹配的元素：document.querySelectorAll('css选择器')    用Nodelist对象存储
		Nodelist:
		➢有长度有索引号的数组
		➢但是没有pop() push()等数组方法
		想要得到里面的每一个对象，则需要遍历(for)的方式获得。
		
1
2
3
4
5
6
7
8
9
10
11

其他获取方式

现在使用的很少了。
document.getElementById('nav')      //根据id获取一个元素
document.getElementsByTagName('div')  //根据标签获取一类元素 获取页面所有div
document.getElementsByClassName('w')  //根据类名获取元素 获取页面所有类名为w的
1
2
3
4

操作元素内容

操作标签里的内容本质上就是操作DOM对象的属性和方法
最开始都是获取元素内容，eg.const box= document.querySelector('.box')
1、对象.innerText属性
	box.innerText若是直接打印，则可直接获取元素内容（本质上就是一个属性）
	因此修改里面内容就是box.innerText='新内容'。
	但是内容里面要是有标签:eg.'CSDN'，此时不会识别，显示纯文本内容，不解析文本
2、对象.innerHTML属性
	与innerTex唯一区别就是会解析标签，多标签建议使用它，其他都一样。
1
2
3
4
5
6
7
8

操作元素属性

1、常用属性：
	通过JS设置/修改标签元素属性,比如通过src更换图片。
	最常见的属性比如: href、title、src 等。
	本质就是对象.属性 = 值
2、样式属性：
	通过style属性操作CSS：对象.style.样式属性='值';(有单位要加单位)
		PS:属性类似于background-color的不行这样写，此时可以写成backgroundColor
	操作类名(className)操作CSS：元素.className =‘类名'  
		如果修改的样式比较多,直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
		此时创建一个类，再将所选标签的类改成这个即可（不需要加.，只需要写类名）。
		eg.div.classname='box';   如果需要多个则div.classname='nav box'
		className是使用新值换旧值,直接覆盖之前的类名，如果需要添加一个类需要保留之前的类名
	通过classList操作类控制CSS
		为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名		
		元素.classList.add('类名')      //追加一个类
		元素.classList.remove('类名')     //删除一个类
		元素. classList.toggle('类名')       //切换一个类  有就删除，没有就加上
3、	自定义属性
	在html5中推出来了专门的data-自定义属性
	在标签上一律以data-开头
	在DOM对象.上一律以dataset对象方式获取
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

定时器

网页中的倒计时

1、开启定时器：：setInterval(函数名，间隔时间)   函数名不加括号
	➢作用:每隔段时间调用这个函数
	➢间隔时间单位是毫秒
	let n = setInterval(function()，
	console.log('一秒执行一次")
	},1000 )         //一般是匿名函数
	定时器返回的是一个id数字（用let存，因为可能开关会改变Id）
2、关闭定时器：clearInterval(n)
	重新开启：n =  setInterval(函数名，间隔时间)
1
2
3
4
5
6
7
8
9

DOM-事件监听

概念

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等

1、语法：元素对象.addEventListener('事件类型'，要执行的函数)
2、事件监听三要素:
	➢事件源: 哪个dom元素被事件触发了，要获取dom元素
	➢事件类型:用什么方式触发，比如鼠标单击click. 鼠标经过mouseover等
	➢事件调用的函数: 要做什么事
3、注意:
	事件类型要加引号
	函数是点击之后再去执行，每次点击都会执行一次
1
2
3
4
5
6
7
8

案例-关闭广告

老版本

1、事件源.on事件= function() {}    eg.btn.onclick = function () {}  
	类似于变量赋值形式，因此后面的会把前面的覆盖
	而上面新版本的语法不会直接覆盖，而是按顺序执行。而且旧版本只能冒泡不能捕获，新版本两者都可
1
2
3

事件类型

1、鼠标触发：click鼠标点击   mouseenter鼠标经过    mouseleave鼠标离开
2、表单获得光标：focus获得焦点/blur失去焦点
3、键盘触发：Keydown键盘按下触发/Keyup键盘抬起触发
4、表单输入触发：input用户输入事件
1
2
3
4

事件对象

获取事件对象

事件对象是什么
    ➢也是个对象，这个对象里有事件触发时的相关信息
    ➢例如:鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景
    ➢可以判断用户按下哪个键，比如按下回车键可以发布新闻
    ➢可以判断鼠标点击了哪个元素，从而做相应的操作

在事件绑定的回调函数的第一个参数就是事件对象,一般命名为event. ev、e
	元素.addEventListener('click', function (e) {
		
	}
1
2
3
4

属性

1、常见属性
	type:获取当前的事件类型  eg.click
	clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
	offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
	key:用户按下的键盘键的值      现在不提倡使用keyCode（以后按回车发布的案例可以用到）
1
2
3
4
5

环境对象

指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境，即this指向函数调用者
普通函数里this指向window（本质上每个函数都是window.函数，只是省略了 ）
函数调用不同，this指向对象也不同，在按钮的点击事件中，this就指向button

回调函数

如果将函数A做为参数传递给函数B时，我们称函数A为回调函数
简单理解:当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
        setInterval(fn, 1000)中fn就是回调函数
使用匿名函数做为回调函数比较常见

事件流

事件流指的是事件完整执行过程中的流动路径

简单来说:捕获阶段是从父到子冒泡阶段是从子到父。实际工作都是使用事件冒泡为主

事件捕获

从DOM的根元素开始去执行对应的事件(从外到里)
事件捕获需要写对应代码才能看到效果

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
之前默认第三个参数都是false从而省略掉，true代表捕获阶段触发，flase代表冒泡阶段触发
1
2

若是用L0事件监听,则只有冒泡阶段，没有捕获

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程 被称为事件冒泡
简单理解:当一个元素触发事件后，会依次向上调用所有父级元素的同名事件（例如都是click才行）
事件冒泡是默认存在的

阻止冒泡

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，若想把事件就限制在当前元素内，就需要阻止事件冒泡，阻止事件冒泡需要拿到事件对象

事件对象.stopPropagation( )    既能阻止冒泡也能阻止捕获
放到开始运行的第一个事件，冒泡则放在子元素里，捕获放在父元素里
1
2

阻止默认行为

我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转,表单域跳转

e.preventDefault()
场景：注册的时候要填信息，有些信息填的不对或者漏填就不允许提交，此时就需要阻止
1
2

解绑事件

1、on事件直接赋值即可
//绑定事件
btn.onclick = function () {
	alert('点击了') 
}
//解绑事件
btn.onclick = null
2、新版本
	removeEventListener(事件类型,事件处理函数，[获取捕获或者冒泡阶段])
	因此匿名函数无法被解绑
1
2
3
4
5
6
7
8
9
10

其他

mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果(推荐)
1
2

事件委托

同时给多个元素注册，此时可以通过冒泡将事件委托给父元素来执行，这样减少注册次数，可以提高程序性能.

案例：ul里面有五个li，想要点击一个li，将其变成红色可以这么写：
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
	e.target.style.color =red 
})
e.target是我们点击的对象，即点击的li，而不是ul
可以打印e,console(e)来看e里面的元素。然后采取相应措施，比如e.tagname即标签名字
1
2
3
4
5
6
7

其他事件

加载外部资源( 如图片、外联CSS和JavaScript等)加载完毕时触发的事件

页面加载事件

一般javascript需要在定义元素之后再写，但老代码喜欢把script写在head中,这时候直接找dom元素找不到。有些时候需要等页面资源全部处理完了做一些事情

1、给window加load事件,等待页面所有资源加载完毕，就回去执行回调函数
window.addEventListener( 'load', function () {
	//执行的操作,在里面即可写相应操作，不用注重顺序
})
若是
img.addEventListener( 'load', function () {
}
则是等待图片加载完毕再去执行
PS：注意:不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
2、当初始的HTML文档被完全加载和解析完成之后, DOMContentLoaded 事件被触发,而无需等待样式表、图像等完全加载
即标签初始化完成即可，因此速度更快
给document添加DOMContentLoaded事件
document。addEventListener( 'DOMContentLoaded', function () {
	//执行的操作
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

元素滚事件

很多网页需要检测用户把页面滚动到某个区域后做一 些处理，比如固定导航栏，比如返回顶部

1、监听整个页面滚动
window.addEventListener( 'scroll', function () {
	//执行的操作
})
PS：给window或document添加scroll事件都可
PS：如果想要页面顺滑的滚动，只要添加一个css
	html{
		scroll-behavior: smooth ;  //默认是auto，自动跳转
	}
2、监听某个元素
场景：我们想要页面滚动一段距离，比如100px,就让某些元素显示隐藏，就可以使用scroll来检测滚动的距离
3、属性：scrollLeftscrollTop 
	➢获取被卷去的大小
	➢获取元素内容往左、往上滚出去看不到的距离，不带单位
	➢这两个值是可读写的
	document.documentElement  获取整个页面html的标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

页面尺寸事件

1、窗口尺寸改变的时候触发事件:
window.addEventListener('resize', function () {
	// 执行的代码
})
2、获取宽高属性属性：
	clientWidth和clientHeight：获取元素的可见部分宽高(不包含边框，margin, 滚动条等)
	offsetWidth和offsetHeight：获取元素的自身宽高、包含元素自身设置的宽高、padding、border
	注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0。
3、获取位置属性
	获取元素距离自己定位父级元素的左、上距离
	offsetLeft和offsetTop注意是只读属性
1
2
3
4
5
6
7
8
9
10
11

日期对象

掌握日期对象，可以让网页显示日期。得到系统时间
在代码中发现了new关键字时，一般将这个操作称为实例化

实例化

1、语法
	  系统时间：const dater = new Date( )  
	  指定时间：const date1 = new Date('2022-5-1 08:30:00') 
1
2
3

日期对象方法

能够使用日期对象中的方法写出常见日期
因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

getFullYear()  获得年份            获取四位年份
getMonth()     获得月份            取值为0~ 11(得到月份要+1)
getDate()      获取月份中的每一天    不同月份取值也不相同
getDay()       获取星期            取值为0~6（星期天是0）
getHours()     获取小时            取值为0~ 23
getMinutes()   获取分钟            取值为0~ 59
getSeconds()   获取秒              取值为0~ 59
1
2
3
4
5
6
7

时间戳

如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一 种特殊的计量时间的方式
将来的时间戳-现在的时间戳=剩余时间毫秒数
剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
比如将来时间戳 2000ms -现在时间戳1000ms = 1000ms
1000ms转换为就是0小时0分1秒

三种方式获得时间戳：
1、使用getTime()方法：需要实例化
2、简写+new Date("指定时间")：new Date()就是实例化，+把时间转化为数字型
3、使用Date.now()：只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳
PS：利用类似于h=parseInt(总秒数/60/60%24)计算小时，此时就能做倒计时操作
1
2
3
4
5

节点操作

标签的增删改查

DOM节点

DOM树里每个内容都为节点

类型

元素节点

● 所有的标签比如body、div
● html是根节点

属性节点

● 所有的属性比如href，id，class

文本节点

● 所有的文本
其他

增删改查

这里讲的是用节点之间关系去找标签，而不是用query方法。

查

1、父节点查找：
	parentNode属性，返回最近一级的父节点找不到返回为null
	子元素. parentNode
2、子节点查找：
	childNodes
		获得所有子节点、包括文本节点(空格、换行)、注释节点等
	children属性(重点)
		仅获得所有元素节点，	重点是这个，因为拿所有子节点没很大用处
		返回的还是一个伪数组
		父元素. children
3、兄弟关系查找
	下一个兄弟节点：nextElementSibling属性
上一个兄弟节点：previousElementSibling 属性
1
2
3
4
5
6
7
8
9
10
11
12
13

增

动态增加标签。创建一个新的节点，把创建的新的节点放入到指定的元素内部

1、创建节点：
	语法：document.createElement( '标签名')
		要想在界面看到，还得插入到某个父元素中
2、放入指定元素内部
	父元素. appendChild(要插入的元素)   //不加引号
	父元素. insertBefore(要插入的元素，在哪个元素前面)    //不加引号 
	元素.CloneNode(布尔值)   复制原有节点，返回值即克隆后对象
		若为true,则代表克隆时会包含后代节点一起克隆
		若为false,则代表克隆时不包含后代节点
		默认为false
1
2
3
4
5
6
7
8
9
10

删

若一个节点在页面中已不需要时，可以删除它。在JavaScript原生DOM操作中，要删除元素必须通过父元素删除

父元素.removeChild(要删除的元素)
	如不存在父子关系则删除不成功
	删除节点和隐藏节点( display:none)有区别的:隐藏节点还是存在的，但是删除,则从html中删除节点
1
2
3

M端事件

移动端也有自己独特的地方。比如触屏事件touch (也称触摸事件) , Android 和I0S都有。
●触屏事件touch ( 也称触摸事件)，Android 和I0S都有。
●touch对象代表-个触摸点。触摸点可能是- -根手指，也可能是一-根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
●常见的触屏事件如下:

touchstart：手指触摸到一个DOM元素时触发
touchmove：手指在一个DOM元素上滑动时触发
touchend：手指从一个DOM元素上移开时触发
1
2
3

JS插件

插件即别人封装好的代码可以直接使用
熟悉官网,了解这个插件可以完成什么需求
看在线演示,找到符合自己需求的demo
查看基本使用流程
查看APi文档,去配置自己的插件
注意:多个swiper同时使用的时候,类名需要注意区分
复制黏贴即可