JS基础 DOM 语法大总结

一、认识DOM

Document Object Model 文档对象模型
就是一整套操作文档流的属性和方法
对 DOM 树进行操作的语法：修改标签的 样式；修改标签的 类名；修改标签的 属性；修改标签的 文本内容；对于标签的 增删改查等。

二、操作元素

DOM操作一定是从 获取元素 开始的，先捕获需要操作的标签结构 就是先在JS里定义一个变量

1.获取元素

获取非常规标签 html body head
var html=document.documentElement
var body=document.body
var head=document.head

获取常规标签
1、根据ID获取元素 document.getElementById('ID名字')
   如果没有对应的ID元素，就是null
2、根据类名获取元素 document.getElementsByClassName('类名')
   返回伪数组，伪数组内第[n]个才是元素
3、根据标签名 document.getElementsByTagName('标签名')
   返回伪数组，伪数组内第[n]个才是元素
4、根据name属性获取 document.getElementName('name属性')
   返回伪数组，伪数组内第[n]个才是元素
5、根据选择器获取一个元素 document.querySelector('选择器')
   返回第一个选择器元素，如果没有，就返回null
6、根据选择器获取一组元素 document.querySelectorAll('选择器')
   返回一组选择器，如果没有就返回null

2.操作元素内容

1、innerText
 读：元素.innerText 该元素内的文本内容
 写：元素：innerText='值' 覆盖式书写该元素内的文本内容
 如果设置html格式的字符串，不会解析出来
2、innerHTML
 读：元素.innerHTML 该元素内的所有内容，返回字符串
 写：元素.innerHTML='值' 
 覆盖式书写该元素内的超文本内容，能解析html标签的内容
3、value
 读：表单.value 获取该元素的value值
 写：表单元素.value='值' 完全覆盖书写该表单元素的value的值

3.操作元素属性

元素的属性由属性名＝“属性值”组成
属性的分类：
１、原生属性
　id class style type .....
　操作原生属性：
　读：元素.属性名
　写：元素.属性="值"
　布尔类型的属性可以直接使用true或false来赋值
2、自定义属性
 获取：元素.getAttribute('属性名') 得到string类型
 设置自定义属性：元素.setAttribute('属性名'，属性值)
 删除自定义属性：元素.removeAttribute('属性名')
3、操作H5自定义属性
 在元素身上有一个dataset的成员，类似对象数据类型，存储着以data- 开头的自定义属性
  增加：元素.dataset.属性名=属性值
  删除：delete 元素.dataset.属性名
  修改：元素.dataset.属性名=属性值
  查：元素.dataset.属性名

4.操作元素样式style

１行内样式
 获取：元素.style  元素.style.fontSize 元素.style.['font-size']
 设置：元素.style.backgroundColor='red'
2 非行内样式
 标准浏览器 window.getComputedStyle(元素).样式名
 IE低版本 元素.currentStyle.样式名
 注意：
 带中划线的样式，要用驼峰命名法，或者数组关联语法['font-size']

5.操作元素类名

1 className
 获取：元素.className  得到字符串类型
 设置：元素.className='新类名' 覆盖式替换
 追加：元素.className+= '空格新类名' 
   注意： 当追加新类名的时候 一定要敲空格
2  classList
 添加：元素.classList.add('新类名') 不会重复添加类名
 删除：元素.classList.remove('新类名')
 切换：元素.classList.toggle('新类名') 本身有的话就删除，没有该类名就添加

三、 操作元素尺寸 偏移量

1. offset

一个元素在页面（文档流）的占位
元素.offsetWidth
元素.offsetHeight
得到该元素的内容+padding+border的尺寸
display:none是拿不到尺寸的,在页面上占位才能拿到尺寸, 如果不占位, 那么拿不到尺寸

2. client

元素.clientWidth
元素.clientHeight
得到元素的内容+padding的尺寸
display:none是拿不到尺寸的,在页面上占位才能拿到尺寸, 如果不占位, 那么拿不到尺寸

3. 元素偏移量

结构父级：该标签外的标签
定位父级：假设给该标签设置绝对定位时，根据谁来定位的，谁就是定位父级，获取偏移量就参考谁
元素.offsetLeft
元素.offsetTop
该元素相对于参考元素左边和上边的距离。
元素.clientLeft
元素.clientTop
该元素自己 padding 区域相对于自己 border 左上角的尺寸，就是上边框 + 左边框

4. 获取窗口尺寸

document.documentElement.clientWidth
document.documentElement.clientHeight
不包含滚动条

四、 DOM事件

了解事件：
由代码方式和页面内容约定好的一个行为,当 用户 操作的时候, 就会触发对应的函数
事件三要素：
1、事件源：和谁约定事件（并不一定由事件源触发事件）
2、事件类型：约定了一个事件
3、事件处理函数：当行为发生时，需要执行的函数

1.事件绑定

1 DOM 0级事件
 语法：事件源.on事件类型=事件处理函数
 特点：只能给同一个事件源同一事件类型绑定一个事件处理函数
2 DOM 2级事件：事件监听
 标准浏览器：
 语法：事件源.addEventListener('事件类型'，事件处理函数)
 特点：可以给同一个事件源同一个事件类型绑定多个事件处理函数，
      当有多个事件处理函数的时候, 顺序绑定顺序执行
      事件类型位置没有 on
 IE低版本：
 语法：事件源.attachEvent('on事件类型'，事件处理函数)
 特点:
    1. 可以给同一个事件源同一个事件类型绑定多个事件处理函数
    2. 当有多个事件处理函数的时候, 顺序绑定倒序执行
    3. 事件类型位置需要书写 on

2.事件解绑

1 DOM 0级 事件解绑
 事件源.on事件类型=null
 等号赋值为null覆盖原来的事件处理函数，相当于解绑
2 DOM 2级 事件解绑
 标准浏览器：
 事件源.removeEventListener('事件类型'，事件处理函数)
IE低版本：
事件源.detachEvent('on事件类型'，事件处理函数)
function handlerA() { console.log('111111111111') }
box.addEventListener('click', handlerA)
btn.onclick = function () {box.removeEventListener('click', handlerA)}

3.事件类型

<1> 鼠标事件

click:鼠标左键单击
dblclick:鼠标左键双击
contextmenu:鼠标右键单机
mousedown:鼠标按下(左右键按下都会触发)
mouseup：鼠标抬起
mousemove：鼠标移动（只要鼠标移动就触发）
mouseover：鼠标移入
mouseout: 鼠标移出
mouseenter:鼠标移入
mouseleave:鼠标移出
注意点：
over 和 out 一套, 当你移入后代元素的时候, 一样会触发
enter 和 leave 一套, 当你移入后代元素的时候, 不会触发

<2> 键盘事件

任何元素都能绑定，但不是所有元素都能触发
触发键盘事件，不会考虑中文输入法
一般window,document，表单元素，
keydown 键盘按下事件，任何键盘按键都会触发
keyup 键盘抬起
keypress 键盘键入事件，必须按下真实键入内容的按键 或者回车才会触发

<3> 表单事件

绑定给表单元素的事件 form input textarea select
focus 聚焦事件
blur 失焦事件
change 改变事件，在失焦的时候判断, 如果和聚焦的时候不一样, 就会触发
input 输入事件，只要你在表单内输入内容或者删除内容都会触发
reset 重置事件 事件需要绑定在form身上，点击 reset 按钮的时候, 会触发 form 的表单重置行为, 此时触发事件
submit 提交事件 事件需要绑定在 form 标签身上，当你点击 submit 按钮的时候, 会触发 form 的表单提交行为, 此时触发事件

<4> 触摸事件

touchstart 触摸开始，当手指触到屏幕的瞬间
touchmove 触摸移动，当手指在屏幕上移动时
touchend 触摸结束，当手指离开屏幕的瞬间

<5> 其他事件

selectstart 当需要开始选中文的时候触发
transitionend 过度结束的时候触发，过度多少个属性就触发多少回

4. 事件对象 event

<1>含义

事件对象：一个对象数据类型，记录了本次事件的所有信息
获取事件对象：
标准获取：直接在事件处理函数位置书写一个形参，在事件触发时由浏览器自动传递实参，传递的实参就是事件对象
IE低版本 window.event
兼容 var e=e||window.event

<2>事件对象信息–键盘事件 keyCode

键盘事件就是按下的哪一个键，是否是组合按键
键盘按下事件onkeydown 
e = e || window.event
兼容：FireFox<20的版本用 e.which
2 组合按键：
shiftkey ctrlkey altkey metakey(win command)
返回布尔值：true表示按下，false表示没按下

<3>事件对象信息 – 鼠标事件

1 clientX 和 clientY
 光标相对于浏览器可是窗口左上角的坐标位置
2 pageX 和 pageY
 光标相对于文档流左上角的位置
3 offsetX 和 offsetY
 光标相对于 触发事件的元素 左上角的坐标位置

5.事件传播

<1> 事件传播的过程

事件传播不是在传播事件，是在传播行为，传播路径一定是结构父子级的顺序
传播的过程: 假设你点击在了 inner 元素身上

浏览器对于事件处理的机制
+ 所有浏览器都会只在一个传播阶段触发事件
要么把事件触发在 从外向里 的阶段
要么把事件触发在 从里向外 的阶段
+ IE 低版本浏览器
只能在 从里向外 的阶段触发事件
+ 标准浏览器
默认在 从里向外 的阶段触发事件
事件的传播：捕获，目标，冒泡

<2> 事件传播问题思考

• 问题1: 如果在传播过程中, 某一个环节没有事件绑定, 还会不会继续传播了 ?
  => 会
  => 因为传播的是你点击的这个行为, 不是事件
  => body 上没有点击事件, 只是在 body 上触发点击行为的时候, 没有对应的处理函数
  => 但是点击行为会继续传播到 html 身上
  + 问题2: 如果我给某一个环节绑定一个其他的事件, 会不会触发 ?
  => 不会
  => 因为你传播的是当前的行为, 你点击, 只是传播点击行为
  => document 身上的 contextmenu 需要右键单击行为
  + 问题3: 如果我把 inner 通过定位的方式移出 outer 范围, 还会不会触发了 ?
  => 会
  => 因为事件的传播是按照 结构父子级 的顺序传播
  + 问题4: 把一个 other 元素定位在 inner 内部的时候, 会不会传播到 inner 身上 ?
  => 不会
  => 因为事件的传播是按照 结构父子级 的顺序传播
  => 虽然你定位在了 inner 身上, 但是你的结构父级中没有 inner
  => 就不会传播到 inner 身上

<3>事件冒泡和捕获

1 事件目标 
  因为事件传播，一个事件不一定由事件源触发，当事件触发的时候，准确触发事件的元素就是事件目标
  获取事件目标：var target=e.target || e.srcElement
2 事件捕获，从window到事件目标的过程
3 事件冒泡，从事件目标到window的过程
  一个事件：捕获--目标--冒泡
触发事件的时机：
 IE低版本只能在冒泡阶段触发事件
 标准浏览器：默认在冒泡阶段触发
 DOM0级事件不能修改触发阶段
 DOM2级事件可以修改触发时机
 addEventListener() 第三个参数，默认false冒泡，true捕获

<4> 阻止事件传播

就是事件行为到该事件源为止，不再向上传播
语法：
标准浏览器：事件对象.stopPropagation()
IE低版本：事件对象.cancelBubble=true
兼容：try { e.stopPropagation() } catch(err) { e.cancelBubble=true }

<5>默认行为

含义：不需要绑定事件，不需要和事件源约定，当触发行为的时候，就会出现效果的事情
例：a标签，点击跳转，form自动提交
阻止默认行为：
标准浏览器：事件对象.preventDefault()
IE浏览器：事件对象.returnValue=false
兼容：
try { 事件对象.preventDefault } catch(err) { 事件对象.returnValue=false }

<6>事件委托

就是利用事件冒泡，把自己的事件委托给 结构父级 中的某一个
在结构父级的事件内，利用是事件目标去判断准确点击的元素
事件委托的原则上越近越好
优点：对动态渲染的元素比较友好，当元素过多时，减少对DOM的频繁操作

五、操作 DOM 节点

节点：页面的每一个组成部分
节点操作：增删改查
元素节点、文本节点、注释节点、属性节点、、、
document是根节点但不是标签，html是根元素，属性节点不作为独立节点出现，只是对某一个元素的描述

1.获取节点

1、获取元素节点
 非常规标签：
  var html=document.documentElement
  var head=document.head
  var body=document.body
2、获取节点（包含但不限于元素节点）
 专门获取元素节点：
  getElementById()
  getElementsByClassName()
  getElementsByTagname()
  getElementsByName()
  querySelector()
  querySelectorAll()
获取节点，包含但不限于元素节点：
父节点.childNodes 父节点下的所有子节点 伪数组，
父节点.children 父节点下的所有子元素节点 伪数组
父节点.firstChild 得到父节点下的第一个子节点
父节点.firstElementChild 得到父节点下的子元素节点
父节点.lastChild 得到父元素下的最后一个子节点
父节点.lastElementChild 得到父元素下最后一个子元素节点

节点.previousSibling 该节点的上一个兄弟节点
节点.previousElementSibling 该节点的上一个兄弟元素节点
节点.nextSibling 该节点的下一个兄弟节点
节点.nextElementSibling 该节点的下一个兄弟元素节点

节点.parentNode 该节点的父节点
节点.parentElementNode 该节点的父元素节点

节点.attributes 该节点的所有属性节点 得到类似数组的数据结构

2.创建节点

１、创建元素节点
document.createElement('div') 返回一个元素节点
2、创建文本节点
document.createTextNode('文本内容') 返回文本节点，不是字符串
3、创建节点对象 document.createDocumentFragment()

3.操作节点

插入节点：
 把一个节点插入另一个节点内容里：
 父节点.appendChild(子节点) 把该节点插入父节点内容里，排列在最后位置
 父节点.insertBefore(字节点，谁的前面) 把该节点插入父节点，排在哪一个节点前面
删除节点：
 父节点.removeChild(子节点) 删除该父节点里的这个子节点
 节点.remove() 删除自己
替换节点：
 父节点.replaceChild(换上节点，换下节点)
克隆节点：
 节点.cloneNode(参数) 返回一模一样的节点
 参数：默认是false，不克隆后代节点
     true，表示克隆后代节点

4.节点属性

用来描述一类节点特点的一个属性
1、nodeType 表示节点类名
   元素节点.nodeType:1
   属性节点.nodeType:2
   文本节点:nodeType:3
   注释节点：nodeType:8
2、nodeName 表示节点名称
   元素节点.nodeName:大写标签名
   属性节点.nodeName:属性名
   文本节点.nodeName:#text
   注释节点.nodeName:#comment
3、noceValue 表示节点的内容部分
  元素节点.nodeValue:null
  属性节点.nodeValue:属性值
  文本节点.nodeValue:文本内容(包含换行和空格)
  注释节点.nodeValuwe:注释内容(包含换行和空格)```