05 JavaScript核心之Web APIs DOM BOM

0 说明

跳转b站黑马前端学习路线介绍
b站黑马jsWebApis（pink）视频教程
github相关代码

1 DOM

Web API是浏览器的API
Document Object Model 文档对象模型，处理可拓展标记语言（html，xml等）的接口
document(网页文档)/browser（浏览器） object model

1.1 获取dom元素

1、id获取 ，getElementById,大小写敏感

console.log(typeof(document.getElementById('time'))); // object
// 返回对象的属性方法查看
console.dir(document.getElementById('time'));

2、标签名获取 getElementsByTagName 伪数组

var li = document.getElementsByTagName('li')
// 如果页面中只有一个li 返回的还是伪数组的形式 
// 如果页面中没有这个元素 返回的是空的伪数组的形式
// 获取指定ol下的li，要先获取ol，再获取li
let ol = document.getElementById('ol')
console.log(ol.getElementsByTagName('li'));

3、类名 getElementsByClassName 伪数组
至少html5才支持
4、 css选择器-至少html5，不考虑兼容性的话首推此方法
document.querySelector('css选择器')——只匹配第一个获取到的；
document.querySelectorAll（）
5、body，html大标签的获取

let bodyEle = document.body
let htmlEle = document.documentElement

1.2 事件基础

三要素：事件源，事件类型，事件处理程序

// 获取事件源
let btn = document.querySelector('#btn')
// 绑定事件类型
// 事件处理程序
btn.onclick = function () {
    alert('按钮点击')
}
btn.addEventListener('click', function () {
    alert('anniudianji')
})

1.3 元素操作

1、元素内容 innerHTML
innerText和innerHTML区别：
innerText 不识别html标签 非标准 去除空格和换行
innerHTML 识别html标签 保留空格和换行的 W3C标准推荐
2、元素属性
src，href，id，alt，title等属性直接绑定事件后赋值形式处理
3、表单属性
type、value、checked、selected、disabled 等
4、css样式属性
驼峰命名,''包裹属性的样式
修改后style样式是行内效果，优先级高

/* background 有no-repeat；background-iamge 需要单独设置background-repeat属性 */
background: url(./images/sprite.png) no-repeat;

5、焦点的focus与blur
6、className统一更改css样式
覆盖原className，追加name
CSS样式修改时应该遵循排他思想，可以用两层循环来实现，外层循环给兄弟元素添加监听事件，内层循环用来清除所有元素的CSS样式后，再进行监听事件元素的处理。
7、鼠标经过离开
与css的hover效果相似，此处为js语法
mouseover，mouseout。

案例01 day02全选复选框

本案例判断是否全选的思维逻辑是：
运用循环判定选定状态，取反语句的结果Boolean结果借用控制变量设置全选按钮的状态。
另外的方法之前学过，利用:checked伪类选择器比较几个复选框选中状态的length与querySelectorAll获得的伪数组长度比较的结果来控制复选框状态。
鉴于学习目的，以后碰到此类稍带有逻辑的代码要多看多敲。
8、自定义属性
作用：获取以及使用特定的元素
修改属性的两个方式：

• element.属性名
• element.getAttribute(‘属性名’)：还可以获取自定义属性——建议以data-开头

div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
// 3 移除属性 removeAttribute(属性)    
div.removeAttribute('index');

console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);

案例02 day02tab栏切换

本案例主要是自定义属性确定点击列表的序号，并借助排他技巧实现tab切换
也可以借助事件委托实现效果

1.4 节点操作

节点层级关系的操作。元素节点，文本节点，属性节点，标签节点，注释节点等
节点有nodeName，nodeType（1：元素节点，2：属性节点，3：文本节点），nodeValue等属性
1、父子节点，常用
父节点parentNode，
子节点childNode（s）所有子节点，不建议用。子元素节点children，非标准规定写法，但浏览器都兼容，推荐使用起来。
firstElementNode，IE9以上才适配，实际使用children[0]（[.length-1]）的形式
2、兄弟节点，不常用
li.nextElementSibling li.previousElementSiblingie9以上才兼容
3、创建（元素）节点

// 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
let li = document.createElement('li')
li.innerHTML = text.value
ul.insertBefore(li,ul.children[0])
// 2.innerHTML+数组的形式生成效率更高
// 3、createElement（）效率一般，但是解构清晰明了

4、删除元素

// removeChild是父级的方法，此处是要删除点击元素的父级，所以需要再次获取父级
element.parentNode.parentNode.removeChild(element.parentNode)

5、复制节点

// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
const li_clone = ul.children[2].cloneNode(true)

1.5 事件高级

1、元素注册事件的3种方式
on开头，缺点：注册事件的唯一性。
addEventListener（‘click’，func（）{}），推荐，ie9以上才兼容
sttachEvent(‘onclick’.func(){}),ie9之前才支持，不推荐使用

2、删除事件的3种方式
onclick = null；
divs[1].removeEventListener(‘click’, fn);
divs[2].detachEvent(‘onclick’, fn1);

3、DOM事件流的3个阶段
事件的传播顺序，类似作用域的传递路径：

• 捕获
• 目标处理函数阶段
• 冒泡

4、冒泡

• 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
• 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
  js只能监听捕获，冒泡的一个阶段（可以认为本身就是一个完整过程，监听事件部分的代码好比打了个断点）
  blur，focus，mouseenter，mouseleave没有冒泡的

5、事件委托

• 事件对象(参数)：事件的监听函数里的默认形式参数（跟事件相关的信息——鼠标信息，键盘信息等）
  兼容性问题：ie6,7,8通过window.event来监听信息
• e.target和this区别
  e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）。换言之 ： e.target 点击了那个元素，就返回那个元素，this 那个元素绑定了这个点击事件，那么就返回谁
• 阻止默认事件
  e.preventDefault(); // dom 标准写法
  低版本ie：
  e.returnValue;也可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
• 阻止冒泡
  e.stopPropagation(); // stop 停止 Propagation 传播
  e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
• 事件委托

	<ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件e.targetd的冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

6、鼠标键盘监听事件
blur，focus，mouseenter，mouseleave没有冒泡
click,
以下两个方法结合禁用e.preventDefault()，实现类似某些文库等禁用复制效果：

	// 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })

• 鼠标事件坐标等对象

// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);

• 键盘事件
  keyup，主要用于输入框事件监听
  keydown，keypress（不能识别ctrl，shift，fn等功能键）
  keyCode（属性识别按键，不区分大小写）

2 BOM

Browser Object Model
BOM顶级对象是Document，BOM是操作浏览器的对象模型,顶级对象是window

2.1 BOM基础

2.1.1 页面加载事件

window.addEventListener('load',function(){   
                alert('window加载事件2')
        })
window.addEventListener('DOMContentLoaded',function(){   
         alert('window加载事件3')
 })

resize事件，页面响应布局

2.1.2 两种定时器函数

setTimeout（），一次调用
clearTimeout(定时器标志符)
setInterval（），反复调用
clearInterval（定时器标志符），此时的定时器标志符要全局声明变量，并赋值null

2.1.2.1 this指向问题

1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
   console.log(this);
2. 方法调用中谁调用this指向调用者
3. 构造函数中this指向构造函数的实例，也可以理解为调用者

2.1.3 JS执行机制

js单线程，H5之后支持异步处理，伪多线程
同步任务：主线程，先执行。
异步任务：通过任务（消息）队列，回调函数实现，事件循环查看异步任务
1、普通事件，click，resize等
2、加载，load，eeror等
3、定时器，setTimeout，setInterval等

2.1.4 location跳转

URL：Uniform Resource Locator
location属性 ：href（整个路径），host（域名），port，pathname（路径），search（？后的查询条件），hash（#后的链接锚点）
assign（记录历史，可以后退），repalace（不记录历史，没有后退），reload（刷新）

案例03 页面跳转

1、这里遇到一个有意思的问题，cors跨域请求问题，后面后讲到，这里仅做简单的问题介绍，主要是一个多敲代码，多踩坑的目的：

// 不加http://，直接写www.baidu.com。会产生跨域请求问题
location.href = 'http://www.baidu.com'

2、button和submit的区别:参见帖子链接
这里只摘抄两句：
提交数据是要使用JS进行校验的，但如果这时候用户禁用了JS，那么校验就失效了，如果后台也没有进行校验，那么不合法的数据就进入后台了。使用submit时需要验证请加 return true或false。 推荐：通过button提交数据，那么如果用户禁用JS,那么数据提交动作就激活不了。

<form name="form" action="跳转的页面" method="post"  onsubmit="return check()">

2.1.5 navigator对象

userAgent：浏览器信息
userAgent : "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"

2.1.6 history 刷新

back(),forward()，go():用途不多——小说的上一页下一页跳转，OA系统

2.2 复杂特效

2.2.1 offset属性

动态得到元素的大小，偏移；相对于有定位的父级元素的偏移量，返回的数值都不带单位
element.offsetTop/Left/Width(动态获取宽度，包括padding，border，不含margin)/Height/Parent(有定位的父级)
parentNode（最近一级的父级，可以不定位）

element.offset	element.style
任意样式表可获取	只可获取行内的css样式
返回值没有单位	有单位
除width外，包含padding和border	只有width
只读	读写
仅获取，更方便	变更css效果时使用

案例04 鼠标拖拽

// 获取用offsetLeft
var x = e.pageX - login.offsetLeft;
// 更改CSS样式用style.left
login.style.left = e.pageX - x + 'px';
// (3) 鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function() {
     document.removeEventListener('mousemove', move);})

案例05 模拟京东放大图片

1、项目开始变大，各类文件目录分配好，后引入
2、js逻辑步骤写好注释，再一步步敲代码

2.2.2 client属性

客户端
clientWidth，Height，包含padding，不包含边框border。
clientTop，Left返回边框border的大小。
立即执行函数的两种写法：
（function(){})(),(functon(){}())
好处是局部变量的立即使用

2.2.3 scroll属性

scrollWidth，Height，包含padding，不包含边框border。内容overflow时有包括全部
scrollTop/Left返回超出边界的上部分/左边的滚出距离。
获取距离用offset，涉及客户端适应用client，滚动距离考虑scroll。另外，元素scroll区别页面滚动距离：window.pageYOffset

2.2.4 鼠标其他操作

mouseover/leave和enter/out的区别：
mouseover会冒泡，经过父子盒子都会触发，mouseenter只触发一次

2.2.5 动画基础

案例06 封装动画对象

为避免多次触发js效果，封装的方法里先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
封装的好处之一是可以设定变量为传入对象的属性值：
obj.timer = setInterval(function() {})

1、缓动动画
（目标值-现在位置）/10

案例07 缓慢动画

数值取整计算：

var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
console.log(step);

函数可以作为参数传递，特定功能的实现

案例08 轮播图

1、轮播障眼法：在最后一张图片之后克隆一份首张图片，并且克隆要写在生成ul>li的下面

// 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
if (num == ul.children.length - 1) {
     ul.style.left = 0;
     num = 0;
 }

2、定义全局变量，同时控制箭头控制图片左右滑动与小圆圈的联动
3、自动播放，初学时以为自动切换的基础上去实现点击事件，实际代码是先实现点击事件效果，再定时器循环触发点击切换。
4、节流阀，借助特定条件下修改变量值，控制动画完成才能进行下一步js动作
5、浏览器窗口滚动
window.scroll（x，y）——x，y不带单位px

2.3 移动端特效

1、触屏事件
touchstart，end，move
2、touchevent对象:e的常见属性
touches 正在触摸屏幕的所有手指的列表
targetTouches 正在触摸当前DOM元素的手指列表,如果侦听的是一个DOM元素，他们两个是一样的。
changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无。因为我们一般都是触摸元素 所以最经常使用的是 targetTouches

案例09 移动端轮播图

classList.add/remove(‘类名’)：添加移除类名，
toggle：切换类名
区别pc端轮播图，需要判定图片滑动距离很小时候的图片回弹
z-index: 999;用来设置移动端顶部或者底部“浮动”的固定栏
移动端双击放大问题：

• 禁止双击放大
• 封装函数
• 插件fastclick.js

3、移动端插件
插件在引用时注意上下顺序

• fastclick.js:解决双击放大问题。先引动，复制使用代码即可，无需修改。
• swiper.js：触摸划动插件，丰富的轮播插件
  引入css和js文件之后，复制demo文件里的css，html，js代码分别放入自己代码的相应位置即可。具体细节可以看文档对属性参数进行更改
• zy.media.js:视频插件（移动端）
  引入相关css，js文件，复制相关css，html的结构文件，js调用代码

4、框架概述 bootstrap（react，vue）
框架大而全，插件小而精
bootstrap3依赖jQuery；4,5版本已经不依赖jQuery了。

5、本地存储

• sessionStorage
  关闭浏览器丢失信息，
  setItem,getItem,removeItem,clear
• localStorage
  永久存在，多窗口共享数据
  属性用法同上