dom节点操作方法与事件冒泡总结
文章目录
- DOM节点操作
- 事件冒泡
DOM节点操作
dom树也就是由html标签之间的关系结构组成的树，如图
对其中的节点进行操作，如增删改查js都有对应的方法
从当前节点获得其父，子，兄弟节点
- 父节点
nowelement.parentNode为nowelement的父节点 - 子节点
nowelement.children为nowelement所有子节点
是一个伪数组，类似querySelectorAll() - 兄弟节点
nowelement.previousElementSibling为nowelement的上一个并列节点
nowelement.nextElementSibling为nowelement的下一个并列节点
以上方法在找不到对应节点时值为null
节点的增删 - 增
先使用document.createElement('标签名')得到一个新的对应的标签对象，用newnode接收
则有如下添加方法
父.appendChild(newnode)将新节点加在父元素的末尾
父.insertBefore(newnode, 参考节点)将新节点加到参考节点之前
还可以通过复制得到新的节点
原节点.cloneNode(true/false)true时会包含其子节点，反之
由于内容也算一个节点，故为flase时并不会复制其中内容，而是像创建了一个与源节点标签名相同的新节点 - 删
删除只能通过父节点来删除
父.removeChild(子节点)
事件冒泡
事件冒泡是指当某个元素上的事件被触发时，该事件会向父级元素传递，直到传递到 document 对象的过程。在此过程中，所有绑定在这些父级元素上的相同类型的事件处理程序都会依次被触发。
举例如a是b的父元素，当b的一种事件发生后，触发事件监听的函数，则a对应的函数也会触发
利用事件冒泡
在之前，要监听多个元素的事件要用for循环来逐个添加较为麻烦
利用此机制可以给父元素设置监听，当子元素触发时就会自动转为父元素的函数触发
如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 对于同时给多个元素注册事件，（以往使用的循环注册）可以给父级设即可--><br><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>const ul=document.querySelector(`ul`)ul.addEventListener('click',function(e){e.target.style.color='blue';})</script>
</body>
</html>
若想要取消父元素也会触发则检测触发对象的tagname是否为子元素即可