JS WebAPIs DOM节点概述
1.DOM节点:DOM树里每一个内容都称之为节点
2.分类:
-元素节点:比如div标签
-属性节点:比如class属性
-文本节点:比如标签里的文字
3.查找结点
通过节点之间的亲戚关系来查找
//父节点查找const baby = document.querySelector('.baby')console.log(baby.parentNode);//得到最近一级父节点 //子节点查找//childNodes:获得所有子节点,包括文本节点(空格换行)、注释节点等//children属性:仅获得所有元素节点,返回的还是一个伪数组const ul = document.querySelector('ul')console.log(ul.children);//查找兄弟节点const li2=document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling)console.log(li2.nextElementSibling)
4.增加节点
一般操作为:创建一个新的节点,把创建的新的节点放入到指定元素的内部 ,创建节点追加节点
5.删除节点
//1.创建节点const ul=document.querySelector('ul')const li=document.createElement('div')li.innerHTML='我是li'//插入到ul的最后//ul.appendChild(div)//插入到某个元素的前面ul.insertBefore(li,ul,children[0])//元素克隆ul.cloneNode(true)//true表示连着后代一起克隆,false表示不克隆后代//删除节点ul.removeChild(ul.children[0])//注意和隐藏节点display:none区别