JavaScript节点操作-CSDN博客

本文链接：https://blog.csdn.net/qq_45982114/article/details/120471074

基本的操作如下

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul1">
        <li>1班</li>
        <li>2班</li>
        <li>3班</li>
        <li id="li4">4班</li>
        <li>5班</li>
    </ul>
    <button onclick="addNode()">添加班级</button>
    <button onclick="insertNode()">插入班级</button>
    <button onclick="replaceNode()">替换班级</button>
    <button onclick="removeNode()">删除班级</button>
    <button onclick="findNode()">查找班级</button>


</body>
</html>

js部分


    // 节点操作
    //添加班级
    // 1.添加子节点
    function addNode(){
    // 1.创建元素节点
    var newNode=document.createElement("li");
    // 2.创建文本节点
    var txt=document.createTextNode("计网6班");
    // 3.将文本节点添加到元素节点上
    neNnode.appendChild(txt);
    // 设置元素节点的文本
    newNode.textContent="计网6班";
    newNode.textContent=prompt("请输入班级","计网1班");
    // 4.通过父节点添加子节点
    var parent =document.getElementById("ul1");
    parent.appendChild(newNode);
    }
    //插入班级
    function insertNode(){
        var newNode=document.createElement("li");
        newNode.textContent=prompt("请输入班级","计网1班");
        var parent=document.getElementById("ul1");
        var insertNode=document.getElementById('li4');
        parent.insertBefore(newNode,insertNode);
    }
    // 替换班级
    function replaceNode(){
        var newNode=document.createElement("li");
        newNode.textContent=prompt("请输入班级","计网1班");
        var parent=document.getElementById("ul1");
        var replaceNode=document.getElementById('li4');
        parent.replaceChild(newNode,replaceNode);//replaceNode替换newNode
    }
    //删除班级
    function removeNode(){
        //获取要删除的节点
        var delNode=document.getElementById('li4');
        //获取删除节点的父节点
        var parent=document.getElementById('ul1');
        var parent=delNode.parentNode
        // 执行删除
        parent.removeChild(delNode);
    }
    //查找班级
    function findNode(){
        var parent=document.getElementById('ul1');
        var frist=parent.firstElementChild; 
        var last=parent.lastElementChild;
        //nextElementSibling获取下一个同辈节点
        var next=frist.nextElementSibling;
        //previousElementSibling获取上一个同辈节点
        var prev=last.previousElementSibling;
        //childElementCount获取所有子节点的数量
        var count=parent.childElementCount;
        alert(count);
    }