WebAPI DOM基础

Web API

1.作用和分类

作用：使用js操作html和浏览器

分类： DOM(文档对象模型)、BOM(浏览器对象模型)

一、DOM

console.dir(); //查看dom对象

1.获取DOM元素（返回的是object）

1)通过css选择器获取

//获取匹配的第一个选择器（返回对象）
document.querySelector('css选择器'); 

//获取匹配的所有选择器（返回对象集合，是个伪数组）
document.querySelectorAll('css选择器');

//注 伪数组：有索引但没有方法如pop()、push()等

//获取html文件的方法 只读属性
document.dcoumentElement

2）其他方法获取

//id获取一个元素
document.getElementById('id名');

//获取一类标签 伪数组
document.getElementsByTagName('标签名');

//类名获取同名元素 伪数组
document.getElementsByClassName('类名');

2.操作元素内容(对象.属性)

//获取元素内容(显示纯文本，不解析标签)
对象.innerTest

//获取元素内容(解析标签)
对象.innerHTML

3.操作元素样式属性

1）通过style属性操作css（对象.style.样式属性 = ‘值’）

注：多组单词的样式属性如带’-'的采用小驼峰命名法

2）通过类名(className)操作css（对象.className = ‘新类名’）会覆盖

3）通过classList操作css（对象.classList.方法名(‘类名’)）追加

//追加一个类
对象.classList.add('类名');

//删除一个类
对象.classList.remove('类名');

//切换一个类（有就删，无就加）
对象.classList.toggle('类名');

4.操作表单元素属性（对象.属性）

checkobx checked = ture 勾选

button disabled = ture 禁用

5.自定义属性（data-）

对象.dataset //对象的所有自定义属性(返回对象集合)
对象.dataset.属性 //获取某个自定义属性(返回字符串) 如data-par 对象.dataset.par

6.定时器-间歇函数

//开启定时器 
setInterval(函数,间隔时间); //间隔时间单位毫秒，如果函数是调用的不要小括号（返回一个id）

//关闭定时器
clearInterval(变量名);

7,事件监听（注册事件）

对象.addEventListener('事件类型', 函数, [可选ture捕获，默认false冒泡]);
//事件源:对象
//事件处理程序

8.事件解绑（匿名事件无法解绑）

L0 对象.onclick = 0
L2 对象.removeEventListener('事件类型', 函数名, [可选ture捕获，默认false冒泡])

9.事件

1)捕获事件和冒泡事件

捕获事件：从最外层元素向子元素传播直到目标元素

冒泡事件：从选中的元素开始向父级传播直到根节点

//取消事件的默认行为（如链接跳转）但会冒泡
事件对象.preventDefault(); 

//阻止冒泡，但不阻止默认行为（如链接跳转）
1）事件对象.stopPropagation(); //阻断事件流的传播，捕获也有效
2）事件对象.cancelBubble = ture;

//阻止默认行为和冒泡
return false

2)事件委托：通过冒泡原理给 父元素 添加注册事件

事件对象.target 是点击的对象
//通过父元素获得子元素
事件对象.target.tagName //触发对象的大写标签名

//通过标题切换下面内容可以给标签添加自定义属性（data-）注获取的是字符串

好处：减少注册次数，提高性能

3)页面加载事件

//等待页面所有资源加载完成
window.addEventListener('load', 函数);

//等待html文档加载完成,而无需等待样式表、图像和子框架的完成加载。
document.addEventListener('DOMContentLoaded', 函数);

4)页面滚动事件

对象.addEventListener('scroll',function(){
    对象.scrollTop //向下滚动了多少距离无单位
    对象.scrollLeft //向右滚动了多少距离无单位
	对象.scrollTo(x, y) //滚动到哪个位置
});

5)页面尺寸事件

window.addEventListener('resize', function (){
    对象.clientWidth //获取对象的宽包含padding 注：不包含magin、border和垂直滚动条
    对象.clientHeight 获取对象的高包含padding 注：不包含magin、border和水平滚动条
})

6)元素位置和尺寸事件

对象.offsetWidth //获取对象的宽包含padding、border和滚动条
对象.offsetHeight //获取对象的、高包含padding、border和滚动条


//只读属性，获取元素距离自己父级定位元素的左、上距离
对象.offsetLeft
对象.offsetTop

//相对于视口元素大小和位置
对象.getBoundingClientRect();

10.时间对象

//实例化
const date = new Date();
const date1 = new Date('2022-5-1 08:30:00');
//调用
date.方法名(); //getFullYear(),getMonth()0-11,getDate(),getDay()0-6星期，getHours()0-23,getMinutes()0-59,getSeconds()0-59


/*//时间戳
1)getTime()
const date = new Date();
console.log(date.getTime());

2)+new Date() //推荐
3)Date.now() //无需实例化，但只能获取当前的时间
*/

11.节点操作

1)元素节点

//查找父节点
子节点.parentNode(); //返回dom对象
//查找子节点
//1)childNodes 获得所有子节点如元素节点(标签名)、文本节点(text)、注释节点(comment)等
父节点.childNodes
//2)children 仅获取所有节点元素（亲儿子） 注：返回伪数组
父节点.children

//查找兄弟节点
元素节点.nextElementSibling //下一个兄弟
元素节点.previousElementSibling //上一个兄弟

2）增加节点

const 名 = document.createElement('标签名');
父元素.appendChild(插入的元素); //加到最后子元素后面
父元素.insertBefore(插入的元素,在哪个元素前); //插入某个元素前

//克隆节点
元素.cloneNode(布尔值); //true:包含后代节点  false（默认）:不包含后代节点

3）删除节点

父元素.removeChild(删除的元素)

11.M端

//插件
https://www.swiper.com.cn/