DOM元素获取、事件

<DOM核心>

字符串操作：includes() 判断是否包含某个属性

Array.form() ; 该方法可以把一个类数组或者一个可以便利的对象转化为一个真正的数组

tagName：得到的是元素名称 console.log(e.target.tagName);

元素结构重构

1. 父元素.appendChild(元素)：在某个元素末尾插入一个子元素；
   1. 类似的方法：父元素.append(元素)；
2. 父元素.insertBefore(待插入的元素，哪个元素之前)；
3. 父元素.replaceChild(替换的元素，被替换的元素)；
4. 调用者.replace(替换的元素，被替换的元素)

创建和删除元素

1. 创建元素 ：document.createElement(‘元素名’)；

2. 创建文本 ：document.createTextNode(‘文本’)；

3. 创建文档片段：document.createDocumentFragment();

4. 克隆元素

   1. dom对象.cloneNode(里面有值(true)，就是深度克隆，没有就是浅克隆)；复制一个新dom对象并返回

   div.cloneNode(true);深度克隆；
   div.cloneNode(); 浅克隆；
   

5. 删除元素

   1. removeChild():父元素调用删除子元素 ；

   2. remove(); 删除调用者，自己删除自己。

添加自定义属性名

1. dom.setAttribute(‘data-123’,‘abc’); 给元素添加自定义属性名
2. dom.removeAttribute(‘data-123’); 删除自定义属性名
3. delete dom.dataset.属性名 ； 删除自定义属性名

DOM元素样式：(袁dom核心7-7 )

1. 控制DOM元素的样式

   1. className: 获取或设置元素的类名
   2. classList: dom4 的新属性，是一个用于控制元素类名的对象
      1. add( ‘red’ ):用于添加一个类名
      2. contains( ‘red’ )：用于判断一个类名是否存在
      3. toggle(’ ')：用于添加/或移除一个类名
      4. remove( ‘’ ):用于移除一个类名

2. 获取样式

   1. div . style . 属性： 得到行内样式对象 (css 里面的短横线命名需要装换为小驼峰命名)
      1. 只写background，不写后面的横杠 — 表示速写属性
   2. window.getComputedStyle(dom元素) ：得到某个元素最终计算的样式
      1. var style = getComputedStyle(div); getComputedStyle(div) ：可以得到元素所有的css属性
      2. 可以有第二个参数，得到的是某个元素的某个伪元素样式

3. 设置样式

   1. dom.style.样式名 = 值 (设置的是行内样式 ，也只能设置元素行内样式style)

DOM事件

1. 事件流

1. 当某个事件发生的时候，哪些元素监听到该事件发生，这些元素发生该事件的顺序。
2. 当一个元素发生了某个事件时，该元素的所有祖先元素都发生了改事件
3. 事件冒泡：先触发最里层的元素，然后再依次触发外层的元素
4. 事件捕获：先触发外层的元素，然后再依次触发里面的元素
5. 事件源就是事件目标
6. 事件委托：通过各祖先元素注册事件，在程序处理中判断事件源进行不同的处理

2. 事件对象

​ console.log(e);

1. 事件对象封装了事件的相关信息

3. 获取事件对象

1. 通过事件处理函数的参数获取
2. 旧版本的IE浏览器通过window.event获取  
3. 判断兼容性：e = e || window.event

4. 事件对象的通用成员

1. target & srcElement(旧版本的IE浏览器)
   1. 兼容性写法：var source = e.target || e.srcElement;
   2. 事件目标(事件源） ：就是事件目标阶段
   3. 事件委托：通过各祖先元素注册事件，在程序处理中判断事件源进行不同的处理
2. currentTarget
   1. 表示当前目标，获取绑定事件的元素，等效于this currentTarget === this
3. type
   1. 表示事件类型，是什么事件
4. preventDefault & returnValue
   1. 通过preventDefault这个方法，阻止浏览默认行为
   2. dom0中还可以使用return false阻止默认行为 onclick 就是dom0
5. stopPropagation
   1. 阻止事件冒泡，调用这个方法冒泡到此为止，不在往上冒泡，调用者也不会触发事件冒泡
6. eventPhase
   1. 得到事件所处的阶段
      1. 事件捕获
      2. 事件目标
      3. 事件冒泡

鼠标事件

事件类型

​ 可以通过e.bubbles查看是否可以事件冒泡

​ 都要加on

1. click：用户单机鼠标按钮，(一般是左键)；
2. dblclick:双击主鼠标按键触发(频率取决于操作系统)；
3. mousedown：用户按下鼠标任意键时触发；
4. mouseup:抬起鼠标任意键时触发；
5. mousemove:鼠标在元素上移动时触发；
6. mouseover:鼠标进入元素时触发；
7. mouseout:鼠标离开元素时触发；
8. mouseenter:鼠标进入元素时触发，该事件不会冒泡
9. mouseleave:鼠标离开元素时触发，该事件不会冒泡
   1. 区别：over和out，不考虑子元素，从父元素移动到子元素，对于父元素而言，仍然算作离开；
   2. enter和leave，考虑子元素，子元素仍然是父元素的一部分

事件对象

所有鼠标事件，事件处理程序中的事件对象，都为MouseEvent

1. altKey:触发事件时，表示是否按下了键盘的alt键；
2. ctrlKey:触发事件时，表示是否按下了键盘的ctrl键；
3. shiftKey:触发事件时，表示是否按下了键盘的shift键；
4. button:触发事件时，按下的鼠标按键类型 (onmousedown、onmouseup检测)
   1. 0：左键
   2. 1：中键
   3. 2：右键

位置：

​ 原点永远在左上角，向右x增加，向下y增加

1. page：pageX pageY 当前鼠标距离页面的横纵坐标
2. client：clientX clientY 鼠标相对于视口的坐标(整个浏览器页面的可视区窗口)
3. offset: offsetX offsetY 鼠标相对于事件源内边距的坐标 ,包含padding内容等的填充和(事件源:某个方块区域等)；
4. screen： screenX、screenY 鼠标相对于屏幕 的坐标
5. x、y等同于clientX和clientY

后面还有，持续更新！