JS：包括JS基础知识、BOM和DOM
API：应用程序接口，写好的一整套的可以实现某种功能的复用代码。
Web API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM&DOM）
浏览器功能通过BOM实现，页面元素通过DOM实现
web API一般有传入和传出

DOM

DOM是处理html或xml的接口，可以改变页面的内容、结构和样式

  1. 能够获取页面元素
  2. 能够给元素注册事件
  3. 能够操作DOM元素的属性
  4. 能够创建元素（html中没有这个元素，通过js生成元素）
  5. 能够操作DOM节点

简介

文档：一个页面就是一个文档（document）
元素：页面中的所有标签都是元素（element）
节点：页面中所有内容都是节点（标签、属性、文本、注释）（node）
以上所有内容在DOM中是对象

获取元素

根据ID获取

  1. document.getElementById(id)   // id是大小写敏感的字符串

返回的是一个元素对象（元素的类型）
console.dir 可以打印我们返回的元素对象

根据标签名获取

  1. document.getElementsByTagName("li")    //返回带有指定标签的对象合集，括号中标签以字符串形式显示

返回的是 获取过来的元素对象的集合，以伪数组的形式储存
打印可以使用for循环遍历的形式
如果有两个列表怎么办？-使用的时候可以指定父元素 

  1. var ol= document.getElementsByTagName('ol')//得到一个ol的伪数组
  2. ol[0].getElementsByTagName//选择第一个列表

通过html5新增方法获取-类名

  1. get.getElementsByClassName //无需加符号
  2. document.querySelector() //返回指定选择器的第一个元素对象，选择的内容需要带符号，类选择器就用.box id选择器就用#box 不考虑兼容可以使用这个，html5新增方法。这个方法也可以获取元素
  3. document.querySelectorAll()//返回指定选择器的所有元素对象

特殊元素获取

  1. //获取body元素
  2. document.body
  3. //获取html元素
  4. document.documentElement

事件基础

事件：触发响应的机制

  1. //事件三部分组成 事件源 事件类型 事件处理程序
  2. //事件源  谁被触发
  3. var btn = document.getElementById('btn') //html中要先创建一个id为btn的按钮，这里才能获取到
  4. //事件类型 如何触发 点击(onclick) 还是鼠标经过，还是键盘按下
  5. //事件处理程序 通过函数赋值的方式完成
  6. btn.onclick = function(){
  7.   alert('点秋香')
  8. }

执行事件步骤

  1. 获取事件源
  2. 注册事件（绑定事件）
  3. 添加事件处理程序（采取函数赋值形式）

常用鼠标事件

  1. //鼠标事件
  2. onclick 鼠标点击左键触发
  3. onmouseover 鼠标经过触发
  4. onmouseout 鼠标离开触发
  5. onfocus 获得鼠标焦点触发
  6. onblur 失去鼠标焦点触发
  7. onmousemove 鼠标移动触发
  8. onmousedown 鼠标按下触发

操作元素🌟

DOM和BOM（了解即可） - 图1

改变元素内容

  1. //改变&获取元素内容
  2. element.innerText   //innerText 不识别html标签 非标准 去除空格和换行
  3. var div = document.querySelector('div')
  4. div.innerText = '2019'
  6. element.innerHTML //标准
  7. var div = document.querySelector('div')
  8. div.innerHTML = '<strong>2019</strong>'

改变元素属性

  1. src 
  2. title
  3. href

改变表单属性（选中、禁用、焦点）

  1. type //类型  输入框、密码框等
  3. value //表单内的值通过value来修改
  4. input.value ='被点击了'
  6. checked //选择
  7. selected //
  9. disabled //禁用状态 点击一次
  10. button.disabled = true
  12. onfocus //得到焦点
  13. onblur //失去焦点

样式属性操作

可以通过js修改元素的大小、颜色、位置等样式
js修改的是行内样式，js权重较高

使用className修改样式属性

  1. 修改样式较少
  2. .style
  3. 修改样式较多-在css中写一个类，将要改变的数据都写在类中，然后js中使用类名调用.
  4. .className //会直接覆盖原来的类名，要保留就写上原来的和加上的，然后用空格分割

排他思想

1.所有元素清除样式（排除其他人）
2.给当前元素设置样式 （设置自己）
顺序不能颠倒

连续选择

  1. document.queryselector('ul').querySelectorAll('img')

自定义属性

自定义属性的目的：保存并使用数据，不需要保存到数据库中。

获取自定义属性值

两种方法

  1. element.属性  //获取内置属性
  2. getAttribute("属性")  //可以获取自定义属性

自定义属性

  1. element.属性='值'  //给内置属性重新赋值
  2. element.setAttribute('属性','值')  //自定义属性值

移除属性

  1. element.removeAttribute('属性') //移除属性值

注意：H5规定自定义属性以data-开头做属性名并赋值

  1. data-index='2'  //h5自定义属性
  2. element.getAttribute('data-index') //获取自定义属性
  3. element.dataset.index 或 element.dataset['index']  //dataset 是一个集合，里面存放了所有data开头的自定义属性。有兼容性问题，ie 11才支持
  5. //如果其中有一个自定义属性有-分割
  6. <div data-list-name='andy'></div>
  7. //那么用dataset方法获取它的时候，data后面的部分要采取驼峰命名法。其余的方法还是一样
  8. console.log(div.dataset.listName)

节点操作

前面的都是使用DOM进行获取操作，而节点可以使用节点层次关系获取元素 节点概述

  • 利用父子兄节点关系获取元素
  • 逻辑性强，但兼容性不是很好

元素节点 nodetype 1
属性节点 nodetype 2
文本节点 nodetype 3（文本节点包括空格和换行）
开发中操作的主要是元素节点

节点层级

屏幕快照 2021-04-16 下午4.19.48.png

  1. //父级节点 parentNode  得到的是离元素最近的父节点,如果找不到父节点，返回为null
  2. .parentNode
  3. //子节点（标准） childNodes 所有的子节点 包含元素节点 文本节点（换行）等 所以不提倡使用childNodes
  4. parentNode.childNodes
  5. //子节点（非标准）children 可以得到所有元素节点。实际开发中常用的。
  7. .firstchild 获取第一个子节点  无论是文本节点还是元素节点
  8. .lastchild 获取最后一个元素  无论是文本节点还是元素节点
  10. .firstElementchild  获取第一个元素节点
  11. .lastElementchild  获取最后一个元素节点
  13. children[0]
  14. children[ol.children.length-1]
  16. //兄弟节点 node.nextSibling 下一个兄弟节点，包括文本和元素节点
  17. //node.previousSibling 上一个兄弟节点 包括文本和元素节点
  19. node.nextElementSibling  下一个兄弟元素节点
  20. node.previousElementSibling   上一个兄弟元素节点

创建和添加节点

创建节点

  1. document.createElement('tagName')
  2. document.createElement('li')

添加节点

  1. node.appendChild(child)   //node 父级  child子级  后面追加元素，已有元素时在元素后面添加
  2. node.insertBefore(child,指定元素)  //指定元素 ul.children[0]  的前面
  4. 示例 ul.insertBefore(child,ul.children[0])

删除节点

  1. node.removeChild(child)

阻止链接跳转

  1. <a href='javascript:;'></a>

复制节点(复制之后还需要添加)

  1. node.cloneNode();括号为空或里面是false，浅拷贝，只复制标签不复制内容
  2. node.cloneNode(true);括号里面为true，都复制

事件高级

注册事件

传统注册方式具有唯一性，同一个元素同一个事件只能设置一个处理函数，后面的会覆盖前面的函数

监听器
按注册内容依次执行

  1. eventTarget.addEventListener(type,listener[,useCapture])
  2. //type 事件类型字符串，比如click、mouseover，不要带on 要带引号
  3. //listener 事件处理函数，事件发生时，调用该函数(用函数名称)，函数内容单独写出来。
  4. //useCapture 可选参数，是一个布尔值，默认是false
  5. ie9以前用attachEvent()代替

删除事件

  1. //传统注册方式
  2. eventTarget.onclick=null;
  3. //方法监听
  4. eventTarget.removeEventListener(type,listener[,useCapture])
  6. ie9 用detachEvent()移除

DOM事件流

3个阶段

  1. 向下捕获
  2. 目标阶段
  3. 向上冒泡

js代码中只能执行捕获或冒泡其中一个阶段
onclick和attachEvent只能得到冒泡阶段
onblur、onfocus、onmouseenter、onmouseleave没有冒泡阶段

  1. eventTarget.addEventListener(type,listener[,useCapture])  //usecapture的值为true-捕获阶段  值为false或者省略-冒泡阶段

事件对象

写到侦听函数的小括号里面，有事件（onclick）才能存在。事件对象与事件相关，与鼠标相关的信息或与键盘相关的信息。
事件对象可以自己命名。

  1. target.onclick=function(event){}

事件对象的属性和方法

  1. target 返回触发事件的对象
  2. this 指向绑定事件的对象
  3. type 返回事件类型
  4. preventDefault 阻止默认行为
  5. stopPropagation 阻止事件冒泡

兼容性都使用if函数来解决的。

事件委托
原理：不是给每个子节点单独设置监听器，而是把事件监听器设置在父节点上，冒泡原理下，无论点击哪个子节点都能得到事件效果。

常用鼠标事件

  1. //鼠标事件
  2. contextmenu 禁止鼠标右键菜单
  3. selectstart 禁止鼠标选中
  5. 示例
  6. document.addEventListener('context',function(e){
  7.   e.preventDefault();
  8. })  
  10. //获得鼠标坐标
  11. clientX 相对于窗口
  12. clientY
  13. pageX 相对于页面
  14. pageY
  15. screenX 相对于电脑屏幕
  16. screenY

常用键盘事件

  1. keyup 按键弹起的时候触发 不区别字母大小写
  2. keydown 按键按下的时候触发   不区别字母大小写
  3. keypress 按键按下的时候触发 不能识别功能键ctrl shift  区别字母大小写
  4. keycode 判断用户按下哪个键 根据ASCIIcode码显示