事件监听

事件监听就是检测程序是否有事件发生，一旦有事件触发就立即调用一个函数做出相应操作

语法：元素.addEventListener('事件类型'，要执行的函数,false/true)；

第三个参数是true的话在捕获阶段先触发,从最高级输出

第三个参数是false的话在冒泡阶段先触发本身(默认值)

事件类型

1.鼠标事件

click 鼠标点击事件
mouseenter 鼠标经过事件
mouseleave 鼠标离开事件
mousemove 鼠标移动事件
contextmenu 鼠标右键事件

2.焦点事件（表单获得光标）

focus 获得焦点事件
blur 失去焦点

3.键盘事件

Keydown 键盘按下触发
Keyup 键盘抬起触发

4.文本事件

input 用户输入事件

5.获取文本内容

获取文本内容设置到控制台需要innerText/innerHTML

扩展:

获取textarea(文本框)与input的内容使用input.value ;
想获取textarea长度的写法是用 input.value.length

节点操作

关于DOM节点是什么?

文档里面的每一个内容都称为节点

节点有:元素节点(div) , 属性节点(class) 文本节点(标签里的文字),换行也算节点

一.查找节点

1.父节点查找 : parentNode

写法: li.parentNode;就可以找到ul了.

注意:父节点返回的是最近一级的父元素,找不到的话返回null

2.子节点查找:children (重点)

写法: ul.children; 就可以获取到 li 了

注意:仅获得所有元素的节点,返回的是一个伪数组

3.兄弟关系查找

上一个兄弟节点(previousElementSibling)

写法: li.previousElementSibling

下一个兄弟节点(nextElementSibling)

写法: li.nextElementSibling

二.增加节点

什么是增加节点?

增加节点就是创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

1.创建节点

使用createElement 元素创建

创建元素节点的方法: document.createElement('标签名')

注意: 每次创建一次节点只能用一次

扩展: 创建一个文本内容的话需要这样写

let tex1=document.createTextNode("在这")//就可以创建一个文本了

添加进去就用这个 div.appendChild(tex1) //div里面就会有这个内容了

2.追加节点(想在界面看到，还得插入到某个父元素中)

插入到父元素的最后一个子元素 使用appendChild 元素追加

父元素.appendChild(要插入的元素)

append()可以同时插入多个标签,用逗号分开
如果追加的这个节点本身页面就有没有创建的话,他就会变成切换

3.插入到父元素中某个子元素的前面

使用insertBefore元素追加到前面

父元素.insertBefore(要插入的元素,在那个元素前面)

三.克隆节点

关于克隆节点:cloneNode(布尔值)

一般情况下,新增节点需要复制一个原有的节点,在把复制的节点放入到指定的元素内部

克隆一个原有节点使用: 元素.cloneNode(布尔值); //默认为false

cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值

括号里为true的时候,则代表克隆时会包含后代节点一起克隆-------深拷贝

深拷贝为克隆元素以及内容

括号里为false的时候,则代表克隆时不包含后代节点------浅拷贝

浅拷贝为克隆元素

四.删除节点

删除节点必须通过父元素删除,使用removeChild元素

语法: 父元素.removeChild(要删除的元素)

删除自己用div.remove(); //就可以删到div

注意:(1)如果不存在父子关系则删除不成功

(2)删除节点和隐藏节点(display: none)有区别的,隐藏是还存在,删除是不存在了

webAPIs/DOM --- DOM的基本事件和节点操作