JS DOM 4

概念

1 DOM -- 文档对象模型, W3C推荐的处理可扩展标记语言的标准编程接口，让 JS通过编程接口操作 HTML

2 文档 -- 一个页面就是一个文档 (document) -- console.log(document)

3 节点 -- 网页中所有的内容都是节点 node

4 文档碎片: 
-----------------------------------------------------------------------------------------
1 DocumentFragment 是一个文档碎片, 轻量级节点, 虚拟的节点对象
2 常作为仓库使用, 不存在于 DOM 树上, 
3 将多个需要插入的新节点放在文档碎片上, 再插入文档中可以优化 DOM 操作
4 否则大量操作 DOM 会降低效率
5 代码说明: 
  1 nodeType == 11
  2 nodeName == #document-fraament
  3 var fragment = document.createDocumentFragment()
-----------------------------------------------------------------------------------------

5 三种动态创建节点的区别 💦
-----------------------------------------------------------------------------------------
1 document.write('<p>12345</p>')
  // 将内容写入页面, 但是文档流执行完毕, 再调用它会导致页面重绘 原来的页面内容就没有了

2 innerHTML
  //创建多个元素效率高一点 (但是不要拼接字符串, 采取数组的形式拼接), 拼接字符串的方式会特别慢, 建议创建单个

3 document.createElement("div")
  //创建多个元素节点效率稍低, 但是结构清晰, 创建单个 多个 都好使
-----------------------------------------------------------------------------------------

获取元素

  1 var hh = document.getElementById('hh')   根据 id 动态获取
  2 var hh = document.getElementsByTagName('div')   根据标签名动态获取
  3 var hh = document.getElementsByClassName("box")   根据类名动态获取 -- H5+
  4 var hh = document.querySelector('css选择器')   根据CSS选择器, 静态获取, 第一个符合条件的元素 -- H5+
  5 var hh = document.querySelectorAll("css选择器")  根据CSS选择器, 静态获取, 所有符合条件的元素集合(H5+)
  6 var hh = document.body   获取 body 元素对象
  7 var hh = document.documentElement   获取 html 元素对象

事件

1 注册事件
  1 hh.onclick = function(){}  
    DOM 0级事件 -> 同一事件类型, 只能绑定一个事件处理函数
    
  2 hh.addEventListener("click", Fn)  
    DOM 2级事件 -> 同一事件类型, 可绑定多个事件处理函数, 可设置捕获: true/false
    
2 删除事件
  1 hh.onclick = null     解除DOM 0级事件
  2 hh.removeEventListener("click", Fn)     解除DOM 2级事件
  
3 事件流
  1 说明 -- 事件发生时会在元素节点之间按照特定的顺序传播 -- 分为冒泡和捕获
  2 默认不存在冒泡的事件 -- blur   focus   mouseenter   mouseleave
  3 冒泡 -- 开始由最具体的元素触发, 然后逐级向上传播到 document的最顶层节点
  4 事件委托 -- 绑定事件在祖先元素上, 子元素可以通过冒泡触发这个事件, 来代替直接给子元素绑定事件的情况
  
4 事件对象  (包含与事件相关的所有信息的对象: div.onclick = function(e){})
  1 常见属性方法 
	1 e.target    返回触发事件的对象
	2 e.type    返回事件的类型
	3 e.preventDefault()    阻止默认事件
	4 e.stopPropagation()    阻止冒泡
	5 return false    传统事件的阻止默认事件
	
  2 鼠标相关
	1 e.clientX    返回鼠标指针相对于视口的 x 坐标 (e.clientY)
	2 e.pageX     返回鼠标指针相对于文档页面的 x 坐标 (e.pageY)
	3 e.offsetX    返回鼠标指针在事件源对象中的 x 坐标 (e.offsetY)
	4 e.button    返回鼠标按下了哪一个键, 左中右 -- 0 1 2
	5 e.wheelDelta    非火狐鼠标滚轮事件 -- 前推 == 120 / 后拉 == -120
	6 e.detail    火狐鼠标滚轮事件 -- 前推 == -3 / 后拉 == 3
	
  3 键盘相关
	1 e.keyCode     返回按键的 ASCII值, 可以用来判断用户按下了哪个键
	2 左上右下 == 37--38--39--40
	3 Enter == 13
	4 空格 == 32
	
  4 功能键
	1 说明 -- 功能键不要使用按键码判断, 用如下事件对象的属性 true/false 判断
	2 e.ctrlKey
	3 e.shiftKey    
	4 e.altKey
	5 (e.keyCode == 67 && e.ctrlKey)   判断是否按下了 Ctrl + C
	
5 事件类型

  1 鼠标相关
	1 click   点击🔹
	2 dbclick   双击🔹
	3 mousedown   按下🔸
	4 mousemove   移动🔸
	5 mouseup   弹起🔸
	6 mouseover   滑入
	7 mouseout   离开
	8 mouseenter   滑入 -- 不存在冒泡
	9 mouseleave   离开 -- 不存在冒泡
	11 mousewheel   中间滚轮  '非火狐'
	12 DOMMouseScroll   中间滚轮  '火狐, 且不支持传统绑定事件'
	13 contextmenu   右键点击
	
  2 用户触发
	1 focus   获得焦点
	2 blur   失去焦点
	3 input   输入时触发
	4 change   域的内容值改变时候, 容易和点击事件昏药
	5 submit   form 提交时
	6 selectstart   选择文字的时触发
	
  3 键盘相关
	1 keydown   按下 -- 字母都识别为大写 -- 识别功能键
	2 keypress   按下 -- 识别字母大小写 -- 不识别功能键
	3 keyup   弹起 -- 字母都识别为大写 -- 识别功能键

元素操作

1 设置元素内容
	1 e.innerHTML = "CAN"   可修改元素内容, 可识别 html标签, W3C标准, 可读写, 读取时保留空格换行和标签
	2 e.innerText = 'text';   只能设置文本内容, 非标准, 不建议使用 
	
2 设置元素属性
	1 img.src = "./img/hh.png"   读写元素对象的非自定义属性
	2 img.hh = 2    添加元素对象的属性
	3 自定义属性 -- 作用范围 -- 行间属性
	  1 设置
		1 <div data-hh="66"> </div>   为了便于识别和使用, 自定义属性一般用data开头
		2 e.setAttribute('data-hh', '66')    添加行间自定义属性
	  2 获取
		1 e.getAttribute('data-index')   可获取所有行间属性
		2 var hh = e.dataset.index   data- 开头的自定义属性的集合, 默认放在了 dataset 对象中
	  3 删除
		1 e.removeAttribute('属性')   可删除所有行间属性
	  4 元素对象常用的属性
		hh.tagName    元素对象的标签名 DIV (大写)
		hh.nodeType    元素 1, 属性 2, 文本节点3
		
3 设置元素样式
	1 e.style.width   只可获取行内样式
	2 getComputedStyle(e).width   获取带 px单位的样式属性值
	3 e.style.backgroundColor = "#008c8c"   设置行内样式
	4 e.className = "hh"    设置类名修改样式 -- 把类名全写上, 空格隔开 (不然之前类名会被取消)
	
4 元素对象方法
	e.focus()    触发聚焦事件
	e.click()    触发点击事件, 传统事件 +on
	document.hasFocus()   判断 document是否处于聚焦状态

5 元素对象的属性
  hh.tagName  元素对象的标签名, 示例: DIV //大写
  hh.nodeType    元素 1, 属性 2, 文本节点3
  hh.nodeName
  hh.nodeValue

节点操作

1 获取元素节点
---------------------------------------------------------------------------------------
	1 e.parentNode;   返回元素的父节点
	2 e.children[0];   返回元素对象的子元素集合, 最后元素的索引 [e.children.length -1]
	3 e.firstElementChild;   返回第一个子元素, IE9+
	4 e.lastElementChild;   返回最后一个子元素, IE9+
	5 e.previousElementSibling   返回元素的上一个兄弟元素
	6 e.nextElementSibling   返回元素的下一个兄弟元素
---------------------------------------------------------------------------------------
	
2 添加元素节点
---------------------------------------------------------------------------------------
  1 创建 -> (创建了 div元素对象, 且获取到JS中)
	var div = document.createElement("div")    
	  
  2 插入
	1 hh.appendChild(div)     div元素追加到 hh元素内
	2 hh.insertBefore(a,b)     把 a元素添加到, hh元素内 b元素的前面
---------------------------------------------------------------------------------------	  

3 删除元素节点
	ul.removeChild(ul.children[0])  -> 表示删除 ul 里面的第一个 li  (只能通过父元素,删除它的子元素)
	
4 复制元素节点 (注意这个深复制, 是作用于元素的, 而不是对象)
	1 hh.cloneNode()   等价于创建了一个空的hh元素, 再添加到页面就 OK  (浅复制)
	2 hh.cloneNode(true)   深拷贝内容也一起复制, 且内容动态同步  (深复制)