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

来源：互联网发布：手机画板软件哪个好编辑：程序博客网时间：2024/06/12 01:51

<%@ 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}

0 0