node节点使用：

节点：

1.返回父节点

parentNode

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

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

childNodes

 let nodes = par.childNodes

3.第一个子节点

firstChild

 let frist = par.firstChild

4.最后一个

lastChild

 let last = par.lastChild
        let 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.parentNode
        par.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.lastChild
        let 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].value
           p.innerHTML=val
        }
        document.getElementsByName('book')[1].onchange=function(){
           img.setAttribute('src','img/2.jpg')
           let val=document.getElementsByName('book')[1].value
           p.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(){
         //创建一个node
         let img=document.createElement('img')
         img.setAttribute('src','img/1.jpg')
         img.style.height='200px'
         //追加元素
         p.appendChild(img)
        }
        document.getElementsByName('book')[1].onchange=function(){
         //创建一个node
         let 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>

原文地址：https://blog.csdn.net/2301_80839686/article/details/142498156

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！