原生JS实现节点增、删、改、查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS原生增、删、改、查操作</title>
</head>
<body>
    <form id="theForm">
        <p><textarea id="textArea" cols="30" rows="10"></textarea></p>
        <p>
            <label><input type="radio" name="nodeAction">Add Node</label>
            <label><input type="radio" name="nodeAction">Del Node</label>
            <label><input type="radio" name="nodeAction">Ins Node</label>
            <label><input type="radio" name="nodeAction">Replace Node</label>
        </p>
        <select id="grafCount"></select>
        <input type="submit" value="Submit">
    </form>
    <div id="modifiable"></div>
    <script>
        window.addEventListener("load" , init, false);
        var nodeChgArea;

        function init(){
            nodeChgArea = document.getElementById("modifiable");
            document.getElementById("theForm").addEventListener("submit", nodeChanger, false);
        }

        function addNode(){
            var inText = document.getElementById("textArea").value;
            /**创建文本节点**/
            var newText = document.createTextNode(inText);
            console.log(newText)
            /**创建元素节点**/
            var newGraf = document.createElement("p");
            /**文本节点追加到元素节点中**/
            newGraf.appendChild(newText);

            nodeChgArea.appendChild(newGraf);
        }

        function delNode(){
            /**获取下拉框的Index值**/
            var grafChoice = document.getElementById("grafCount").selectedIndex;

            var allGrafs = nodeChgArea.getElementsByTagName("p");
            /**获取下拉框中序号为grafChoice的元素节点<p>111</p>**/
            var oldGraf = allGrafs.item(grafChoice);

            nodeChgArea.removeChild(oldGraf);
        }

        function insertNode(){
            var grafChoice = document.getElementById("grafCount").selectedIndex;
            var allGrafs = nodeChgArea.getElementsByTagName("p");
            var oldGraf = allGrafs.item(grafChoice);

            var inText = document.getElementById("textArea").value;
            /**创建文本节点**/
            var newText = document.createTextNode(inText);
            /**创建元素节点**/
            var newGraf = document.createElement("p");
            newGraf.appendChild(newText);

            nodeChgArea.insertBefore(newGraf, oldGraf);
        }

        function replaceNode(){
            var grafChoice = document.getElementById("grafCount").selectedIndex;
            var allGrafs = nodeChgArea.getElementsByTagName("p");
            var oldGraf = allGrafs.item(grafChoice);

            var inText = document.getElementById("textArea").value;
            /**创建文本节点**/
            var newText = document.createTextNode(inText);
            /**创建元素节点**/
            var newGraf = document.createElement("p");
            newGraf.appendChild(newText);

            nodeChgArea.replaceChild(newGraf, oldGraf);
        }

        function nodeChanger(evt){
            var actionType;
            var pGrafCt = nodeChgArea.getElementsByTagName("p").length;
            var radioButtonSet = document.getElementById("theForm").nodeAction;


            for (var index = 0; index < radioButtonSet.length; index++){
                if (radioButtonSet[index].checked){
                    actionType = index;
                }
            }

            switch(actionType){
                case 0:
                    addNode();
                    break;
                case 1:
                    if (pGrafCt>0) {
                        delNode();
                        break;
                    }
                case 2:
                    if(pGrafCt>0){
                        insertNode();
                        break;
                    }
                case 3:
                    if(pGrafCt>0){
                        replaceNode();
                        break;
                    }
                default:
                    console.log("No item!");
            }

            /**初始化下拉框**/
            for (var index1 = 0; index1 < nodeChgArea.getElementsByTagName("p").length; index1 ++) {
                document.getElementById("grafCount").options[index1] = new Option(index1 + 1);              
            }
            /**阻止默认事件发生。阻止了submit表单提交**/
            evt.preventDefault();
        }
    </script>
</body>
</html>
原生JS实现节点增、删、改、查

TCR030

引用和评论

vue3使用element-plus中的自定义指令 clickOutside解决点击外部自动收起的需求

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包
