javascript的节点操作与事件

发表于2023-09-07更新于2023-09-07

节点

1.节点类型

1
2
3
4
节点至少拥有node type (节点类型)  nodeName(节点名称)  nodeValue(节点值)
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3(文本节点包括文字 空格 换行)

2.节点查找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
父节点查找  
子元素.parentNode                           //返回最近一级父节点找不到返回null
子节点查找
父元素.children                            //获得所有元素节点
父元素.childNodes                        //获得所有子节点包含元素文本节点等等(不常用)
父元素.firstChild                   // 第一个子节点
父元素.lastChild                    // 最后一个子节点(  包含文本节点和元素节点  不常用)
父元素.firstElementChild              // 得到第一个元素节点
父元素.lastElementChild              // 得到最后一个元素节点(ie9以上支持)
children[0]                           //得到第一个元素节点(常用)
children[父元素.children.length-1]   // 得到最后一个元素节点(常用)

查找兄弟节点                                                               
nextSibling                               //  得到下一个兄弟节点 包含元素   文本等节点
previousSibling                          // 得到上一个兄弟节点 包含元素   文本等节点
nextElementSibling                       //  下一个兄弟元素节点
previousElementSibling                   // 上一个兄弟元素节

3.操作节点(添加)

1
2
3
4
5
6
7
8
9
10
第一步   document.createElement("创建的标签")        //创建元素节点
第二步   父元素.appendChild(插入元素)                //插入元素(到父节点最后)
父元素.insertBefore(插入元素,指定元素前面)          // 添加到指定元素前面
元素.append()                                      //可插入节点文本等
克隆元素.cloneNode(布尔值 )                         // 克隆节点
元素.remove()                                       //移除元素
括号空 false 浅拷贝不复制内容
改true完全克隆完添加包括节点也克隆
父元素.removeChild( 要删除的子元素)                  //  删除一个子节点 返回删除节点

4.回流和重绘

image-20230907205249686

image-20230907205312738

事件高级导读

1.事件

1
2
3
4
5
6
7
8
注册事件    被绑定事件源.addEventListener(事件类型,事件函数,[可选参数])  ie9   常用
删除事件    事件源.事件=null
被绑定事件源.removerEventListener('数据类型',事件函数)
DOM事件流    1.捕获阶段    2.当前目标阶段    3.冒泡阶段
捕获阶段   如果addEventListener第三个参数是true 那么处于捕获阶段从外到里
冒泡阶段    如果addEventListener第三个参数是false或者是省略 那么处于捕获阶段从里到外
事件对象      写在事件函数小括号里面的参数一般用e  当形参看
事件对象 只有有了事件才会存在  他是系统单  不需要我们传递    是对我们事件的一系列相关数据集合

2.事件类型

1
2
3
4
5
6
7
8
9
鼠标事件  
click   鼠标单击    mouseenter    鼠标经过     mouseleave  鼠标离开
焦点事件  
focus   获得焦点    blur          失去焦点     mousemove  鼠标移动
键盘事件  
keydown  键盘按下   keyup        键盘抬起     scroll      滚动事件
文本事件 
 input    用户输入   load         加载事件    DOMContentLoaded  无需等待样式和图片的加载事件 
resize    窗口尺寸变化事件

3.事件对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
当判断用户按下那个键时
ie678 通过window.even  兼容 e=e||window.even
e.target    返回的是触发事件对象(元素) 
this  返回的是绑定事件对象
区别  e.target点击那个就返回那个  this 绑定个元素返回那个元素

e.type                            //  返回事件类型
e.preventDefault()               // 阻止默认行为(事件)让链链接不跳转或者是提交按钮不提交
e.returnValue                     // ie  678  阻止默认行为
e.stopPropagation                 //阻止冒泡
e.cancelBubble=trun                // 非标准阻止冒泡
e.clientX (Y)                                    //可视区域离窗口的坐标
e.pageX (Y)                                     // 返回相对于文档的指标ie9支持
e.screenX (Y)                                   // 返回鼠标相对于电脑

4.事件委托与事件对象

1
2
3
4
5
6
7
8
事件委托原理 (作用 提高了程序性能)
不是每个子节点单独设置事件监听,而是事件监听设置再父节点上然后利用冒泡原理影响设置每个子节点
contextmenu               禁用菜单事件       函数中加e.preventDefault()
selectstart               禁止文字选中       函数中加e.preventDefault()
onkeyup                   键盘按键松开
onkeydown                 键盘按下触发   (两个不区分大小写)
onkeypress                键盘按下时触发 但是不识别功能键
ekeyCode                  得到ASSCII值