节点：

1.返回父节点

parentNode

 let par = li1.parentNodepar.style.border = '1px solid red'

2.获取所有子节点的集合

childNodes

 let nodes = par.childNodes

3.第一个子节点

firstChild

 let frist = par.firstChild

4.最后一个

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>