JS 节点

节点基础

1. 节点类型
   元素节点：node.element_node()
   属性节点：node.attribute_node()
   文本节点：node.text_node()

2. 节点属性

   节点类型	nodeName	nodeValue	nodeType
   元素节点	元素名	null	1
   属性节点	属性名	属性值	2
   文本节点	text	节点内容	3
   document	document	null	9

3. 获取元素节点的方法

   1. getElementById();
   2. getElementsByName();获取到的是伪数组
   3. getElementsByTagName();获取到的是伪数组

4. 元素节点常用的属性

   1. tagName
   2. innerHTML/innerText
   3. id
   4. style
   5. className

遍历节点

1. 子节点

   方法	说明	备注
   childNodes	所有直接子节点(包括文本节点，属性节点，换行，空格)	伪数组
   children	所有直接元素子节点	伪数组
   childElementCount	所有直接元素子节点的个数	children.length
   firstchild	第一个子节点	childNodes[0]
   firstElementChild	第一个元素子节点	children[0]
   lastchild	最后一个节点
   lastElementChild	最后一个元素的子节点

2. 父节点
   parentNode

3. 兄弟节点

   方法	说明	备注
   previousSibling	前面一个节点
   previousElementSibling	前面一个元素节点
   nextSibling	后面一个节点
   nextElementSibling	后面一个元素节点

4. 获取属性节点
   Attributes[‘属性名’]

5. 查看/修改属性节点
   getAttribute(‘属性名’)
   setAttribute(‘属性名’,’属性值’)

6. 创建和增加节点
   creatElement()创建节点
   appendchild()以末尾追加的方式插入节点
   cloneNode(true) 克隆节点，true表示深度复制

7. 删除和替换节点
   removeChild():删除节点
   replaceChild():替换节点

   //获取div01
   let div01=document.querySelector('.div01');
   //创建节点
   let div=createElement('div');
   //添加元素属性
   div.setAttibute('class','div-inner');
   //添加元素内容
   let txt=document.createTextNode('hello world');
   div.appendChild(txt);
   //添加节点
   div01.appendChild(div);
   //克隆节点
   let div02=div.cloneNode(true);
   div02.innerText='div02';
   div01.appendChild(div02);

事件冒泡

1. this的用法，表示当前对象

   let div03=document.querySelector('.div03');
   div03.onclick=function(e){
       alert(this===div03);
       //这里的this===div03===e.target
   
       setTimeout(function(){
           alert(this.className);
       },2000)
       //这里的this是window
   
       //lambda表达式 this===div03
       setTimeout(()=>{
           alert(this.className)
       },2000)
   }
   

2. 事件冒泡
   父元素有监听时，对子元素进行操作也会影响到父元素
   阻止冒泡：e.stopPropagation()

   div02.onclick=function(e){
   //e.target是当前事件，this表示div02
       if(e.target===this){
           alert(e.target.className);
       }
   }

3. 事件冒泡的好处
   为父元素添加一个监听，动态添加子元素时就不必为子元素一个个添加监听了