节点：
1.返回父节点
parentNode
let par = li1.parentNodepar.style.border = '1px solid red'2.获取所有子节点的集合
childNodes
let nodes = par.childNodes3.第一个子节点
firstChild
let frist = par.firstChild4.最后一个
lastChild
let last = par.lastChildlet li3 = document.getElementById('li3')5.上一个
previousSibling
alert(li3.previousSibling.nodeType)6.下一个
nextSibling
alert(li3.nextSibling.nodeType)7.获取父节点
firstElementChild(第一个子标签元素）
lastElementChild（最后一个子标签元素）
let p=document.getElementsByTagName('ul')[0]// alert(p.firstElementChild)p.firstElementChild.style.border='1px solid blue'p.lastElementChild.style.border='1px solid blue'全部：
<ul><li id="li1">1</li><li>2</li><li id="li3">322222</li><li>4</li><li>5</li></ul><script>let li1 = document.getElementById('li1')//返回父节点let par = li1.parentNodepar.style.border = '1px solid red'//获取所有子节点的集合let nodes = par.childNodes// alert(nodes[0])// nodes[0].style.color='red'//第一个子节点let frist = par.firstChild// alert(frist.nodeValue)//最后一个let last = par.lastChildlet li3 = document.getElementById('li3')//上一个//alert(li3.previousSibling.nodeType)//下一个// alert(li3.nextSibling.nodeType)//获取父节点let p=document.getElementsByTagName('ul')[0]// alert(p.firstElementChild)p.firstElementChild.style.border='1px solid blue'p.lastElementChild.style.border='1px solid blue'</script>图片来回切换
<input type="radio" name="book" value="1">图书1<input type="radio" name="book" value="2">图书2<br><img src="" alt="" height="300px" width="500px"><p></p><script>let img=document.querySelector('img')let p=document.querySelector('p')document.getElementsByName('book')[0].onchange=function(){img.setAttribute('src','img/1.jpg')let val=document.getElementsByName('book')[0].valuep.innerHTML=val}document.getElementsByName('book')[1].onchange=function(){img.setAttribute('src','img/2.jpg')let val=document.getElementsByName('book')[1].valuep.innerHTML=val}</script>创建一个node，追加元素
（createElement是用于创建虚拟DOM节点）
（appendChild追加元素）
<input type="radio" name="book" value="1">图书1<input type="radio" name="book" value="2">图书2<br><!-- <img src="" alt="" height="300px" width="500px"> --><p></p><script>let p=document.querySelector('p')document.getElementsByName('book')[0].onchange=function(){//创建一个nodelet img=document.createElement('img')img.setAttribute('src','img/1.jpg')img.style.height='200px'//追加元素p.appendChild(img)}document.getElementsByName('book')[1].onchange=function(){//创建一个nodelet img=document.createElement('img')img.setAttribute('src','img/2.jpg')img.style.height='200px'//追加元素p.appendChild(img)}</script>删除
需要通过父元素，才能删除
<img src="img/1.jpg" alt=""><script>document.querySelector('img').onclick=function(){let img=document.querySelector('img')//需要通过父元素，才能删除img.parentNode.removeChild(img)}</script>
