js获取节点

柠檬の夏季

于 2024-09-24 20:44:14 发布

阅读量251

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/performer02/article/details/142499747

版权

获取节点

1层级节点

<ul>
    <li id="li1">1</li>
    <li>2</li>
    <li id="li3">3</li>
    <li>4</li>
    <li>5</li>
        
 </ul>
 
<script>
 
    //获取id名为li1的元素赋值给li1
    let li1=document.getElementById(li1)
    //返回父节点:parentNode
    let par=li1.parentNode
    //给父节点添加1像素红色实线边框
    par.style.border='1px solid red'
 
 
    //获取所有子节点的集合:childNodes
    let nodes=par.childNodes
    // 第一个子节点文本颜色改为红色
    nodes[1].style.color='red'
 
    //第一个子节点:firstChild
    let frist=par.firstChild
 
    //最后一个节点:lastChild
    let last=par.lastChild
 
    //上一个:previousSibling
    let li3=document.getElementById('li3')
    console.log(li3.previousSibling)
    
    //下一个:nextsibling
    console.log(li3.nextsibling)
</script>

通过获取父节点修改第一个子节点和最后一个子节点元素

 <ul>
        <li id="li1">1</li>
        <li>2</li>
        <li id="li3">3</li>
        <li>4</li>
        <li>5</li>
        
 </ul>
 
<Script>
        // 获取父节点
        let p=document.getElementsByTagName('ul')[0]
        p.firstElementChild.style.border='1px solid blue'
        p.lastElementChild.style.border='1px solid blue'
</script>

2通过点击单选按钮，实现图片的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

3追加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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>
</body>
</html>

4通过父元素删除子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除</title>
</head>
<body>
    <img src="img/1.jpg" alt="">
    <script>
        document.querySelector('img').onclick=function(){
            let img=document.querySelector('img')
            // 需要通过父元素,才能删除
            img.parentNode.removeChild(img)
        }
    </script>
</body>
</html>