节点介绍:
1、一个页面(DOM树)只由标签组成:不严谨的
2、页面(DOM树)主要由节点(Node)组成:
一切内容皆节点
元素节点(标签)
属性节点
文本节点
注释节点
3、实际开发中是用户最多的是:元素节点
查找结点子节点:
1、子节点(了解):父元素 .childNodes
2/子元素节点:父元素 .children
let li = document.querySelector('ul>li') //1.子节点 : 包含标签、文本、注释 console.log(ul.childNodes)//13个 两个标签之间的空格也算空文本节点 //2.子元素节点: 只会获取元素节点 console.log( ul.children)//5个li元素
查找结点的父节点 :
1.子元素节点 : 父元素.children
2.查找兄弟节点 :
(1)获取上一个元素节点 : 元素.previousElementSibling
(2)获取下一个元素节点 : 元素.nextElementSibling
3.查找父节点 : 元素.parentNode
let li2 = document.querySelector('#li2') console.log(li2.parentNode);//ul console.log(li2.parentNode.parentNode)//body console.log(li2.parentNode.parentNode.parentNode)//html console.log(li2.parentNode.parentNode.parentNode.parentNode)//document console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode)//null
查找兄弟节点:
1、子元素节点: 父元素.childer
2.查找兄弟节点:
(1)获取上一个元素节点:元素.previousElementSiblings
(2)获取下一个元素节点:元素.nextElementSiblings
let li2 = document.querySelector('#li2') document.querySelector('.btn').onclick = function () { console.log(li2.previousElementSibling) console.log(li2.nextElementSibling) li2.previousElementSibling.style.color = 'yellow' li2.nextElementSibling.style.color = 'red' }
新增节点:
1创建空标签:let li =document.createElement('标签名')
2设置节点内容
3追加到页面:
(1)追加到后面: 父元素.appendChild(子元素)
(2)追加指定元素前面: 父元素.insertBefore(子元素,要加到哪个元素前面)
*DOM中没有追加到后面的方法。因为insertBefore可以实现追加到任意位置
//1.在内存中创建空标签 //参数传 '标签名' let li = document.createElement('标签名') //2.设置内容 li.innerText = '我是新创建的li元素' console.log(li) //3.追加到页面 (默认创建元素只是在内存中,不会添加到DOM树,所以渲染引擎不渲染) let ul = document.querySelector('父元素')//获取父元素 //3.1 追加到最后面 父元素.appendChild(子元素) // ul.appendChild(li)//追加到ul中 //3.2 追加到指定位置 父元素.insertBefore(子元素,要加到哪个元素的前面) let li2 = document.querySelector('#li2')//班长2 ul.insertBefore(li, li2 )//li 追加到 li2的前面
克隆节点:
克隆节点=复制节点
元素.cloneNode(布尔类型)
false:不克隆后代元素
true:克隆所有后代
let box = document.querySelector('.box') document.querySelector('.btn').onclick = function(){ let cloneBox = box.cloneNode(true) //追加到body document.body.appendChild(cloneBox)
删除节点
节点操作:
1查询子元素节点:父元素.children
2.查找兄弟节点:
(1)获取上一个元素节点:元素.previousElementSibling
(2)获取下一个元素节点:元素.nextElementSibling
3查找父节点:元素.parentNode
4.新增节点
5删除节点:父元素.removeChild(子元素)
*注意是父元素调用,删除子元素
let ul = document.querySelector('ul') let li2 = document.querySelector('#li2') document.querySelector('.btn').onclick = function () { //父元素.removeChild(子元素) ul.removeChild(li2) }
总结:
1.子元素节点 : 父元素.children
2.查找兄弟节点 :
(1)获取上一个元素节点 : 元素.previousElementSibling
(2)获取下一个元素节点 : 元素.nextElementSibling
3.查找父节点 : 元素.parentNode