JS对象字面值编程--动态DOM框架例子

最新推荐文章于 2021-12-30 17:13:58 发布

足境

最新推荐文章于 2021-12-30 17:13:58 发布

阅读量828

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/Im_KK/article/details/24872463

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="10_7ObjectCompile.aspx.cs"
    Inherits="WebApplication1._10_7ObjectCompile" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="10_7ObjectCompile.js" type="text/javascript"></script>
</head>
<body>
    <form action="#">
    <p>
        <textarea id="textArea" rows="5" cols="30"></textarea></p>
    <p>
        <label>
            <input type="radio" name="nodeAction">Add node</label>
        <label>
            <input type="radio" name="nodeAction">Delete node</label>
        <label>
            <input type="radio" name="nodeAction">Insert before node</label>
        <label>
            <input type="radio" name="nodeAction">Replace node</label></p>
    Paragraph #:
    <select id="grafCount">
    </select>
    <input type="submit" value="Submit">
    </form>
    <div id="modifiable">
    </div>
</body>
</html>

下面是对应的JS脚本

window.onload = initAll;
function initAll() {
    //Call nodeChanger method when click the submit button
    document.getElementsByTagName("form")[0].onsubmit = nodeChanger;
    chgNodes.init();
}

function nodeChanger() {
    return chgNodes.doAction();
  
}

var chgNodes = {
    actionType: function () {
        var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;
        for (var i = 0; i < radioButtonSet.length; i++) {
            if (radioButtonSet[i].checked == true) {
                return i;
            }
        }
        return -1;
    },

    init: function () {
        this.nodeChgArea = document.getElementById("modifiable");
    }, //Use "," between elements

    doAction: function () {
        switch (this.actionType()) {
            case 0: //Add
                this.nodeChgArea.appendChild(this.newGrafs());
                break;
            case 1: //Delete
                if (this.pGrafCt() > 0) {
                    this.nodeChgArea.removeChild(this.oldGrafs());
                }
                break;
            case 2: //Insert
                if (this.pGrafCt() > 0) {
                    this.nodeChgArea.insertBefore(this.newGrafs(), this.oldGrafs());
                }
                break;
            case 3: //Replace
                if (this.pGrafCt() > 0) {
                    this.nodeChgArea.replaceChild(this.newGrafs(), this.oldGrafs());
                }
                break;
            default:
                alert("No valid action was chosen !");
        }
        document.getElementById("grafCount").options.length = 0;
        for (var i = 0; i < this.pGrafCt(); i++) {
            document.getElementById("grafCount").options[i] = new Option(i + 1);
        }
        return false; //The page value will be clear if set to true here
    },

    allGrafs: function () {
        return this.nodeChgArea.getElementsByTagName("p");
    }, //Get All 'p' tag

    pGrafCt: function () {
        return this.allGrafs().length;
    }, //Get 'p' length

    inText: function () {
        return document.getElementById("textArea").value;
    }, //Get textArea value

    newText: function () {
        return document.createTextNode(this.inText());
    }, //CreateTextNode including textArea's value

    grafChoice: function () {
        return document.getElementById("grafCount").selectedIndex;
    }, //Select paragraph's num

    oldGrafs: function () {
        return this.allGrafs().item(this.grafChoice());
    }, //Get selected Node for existing

    newGrafs: function () {
        var myNewGraf = document.createElement("p");
        myNewGraf.appendChild(this.newText());
        return myNewGraf;
    } //Create 'P' node
}

足境

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS对象字面值编程--动态DOM框架例子

window.onload = initAll;function initAll() { //Call nodeChanger method when click the submit button document.getElementsByTagName("form")[0].onsubmit = nodeChanger; chgNodes.init();}fu
复制链接

扫一扫

专栏目录