javascript - 迭代指定 DIV 标记内的所有表单字段

Question

我需要能够迭代指定 DIV 标记内的所有表单字段。基本上，任何给定的 DIV 标记都可以有多个表单字段(这很容易解析)，但它也可以有任意数量的表甚至附加的 DIV 标记(添加额外的层次结构级别)。

我编写了一个基本函数，它遍历父节点(在本例中为 DIV 标记)的每个直接后代，并清除其值。这部分工作正常。问题是让它解析自己的 child (孙子)。它最终陷入了无限循环。

在这种情况下，我需要能够找到 DIV 标记“panSomePanel”中的所有表单字段，其中包括一些直接子项 (txtTextField1)，但也包括嵌套 TABLE 对象和/或嵌套 DIV 标记内的一些孙子项(radRadioButton，DESC_txtTextArea)。

这是一个示例 DIV 及其内容:

<DIV id="panSomePanel">

    <INPUT name="txtTextField1" type="text" id="txtTextField1" size="10"/><BR><BR>
    <TABLE id="tblRadioButtons"  border="0">
        <TR>
            <TD>                    
                <INPUT id="radRadioButton_0" type="radio" name="radRadioButton" value="1" /><LABEL for="radRadioButton_0">Value 1</LABEL>
            </TD>
            <TD>                    
                <INPUT id="radRadioButton_5" type="radio" name="radRadioButton" value="23" /><LABEL for="radRadioButton_5">Value 23</LABEL>
            </TD>
        </TR>
        <TR>
            <TD>                    
                <INPUT id="radRadioButton_1" type="radio" name="radRadioButton" value="2" /><LABEL for="radRadioButton_1">Value 2</LABEL>
            </TD>
            <TD>                    
                <INPUT id="radRadioButton_6" type="radio" name="radRadioButton" value="24" /><LABEL for="radRadioButton_6">Value 24</LABEL>
            </TD>
        </TR>
        <TR>
            <TD>                    
                <INPUT id="radRadioButton_2" type="radio" name="radRadioButton" value="3" /><LABEL for="radRadioButton_2">Value 3</LABEL>
            </TD>
            <TD>                    
                <INPUT id="radRadioButton_7" type="radio" name="radRadioButton" value="25" /><LABEL for="radRadioButton_7">Value 25</LABEL>
            </TD>
        </TR>
        <TR>
            <TD>                    
                <INPUT id="radRadioButton_3" type="radio" name="radRadioButton" value="21" /><LABEL for="radRadioButton_3">Value 21</LABEL>
            </TD>
            <TD>                    
                <INPUT id="radRadioButton_8" type="radio" name="radRadioButton" value="4" /><LABEL for="radRadioButton_8">Value 4</LABEL>
            </TD>
        </TR>
        <TR>
            <TD>                    
                <INPUT id="radRadioButton_4" type="radio" name="radRadioButton" value="22" /><LABEL for="radRadioButton_4">Value 22</LABEL>
            </TD>
        </TR>
    </TABLE>
    <DIV id="panAnotherPanel"><BR>
        <TABLE cellpadding="0" cellspacing="0" border="0" style="display:inline;vertical-align:top;">
            <TR>
                <TD valign="top">
                    <TEXTAREA name="DESC:txtTextArea" rows="3" cols="48" id="DESC_txtTextArea"></TEXTAREA>&nbsp;
                </TD>
                <TD valign="top"><SPAN id="DESC_lblCharCount" style="font-size:8pt;"></SPAN>
                </TD>
            </TR>
        </TABLE>
    </DIV>
</DIV>

这是我编写的函数:

function clearChildren(node) {

var child;
if (node.childNodes.length > 0) {
    child= node.firstChild;
}

while(child) {
    if (child.type == "text") {
        alert(child.id);
        child.value = "";
    }
    else if (child.type == "checkbox") {
        child.checked = false;
    }
    else if (child.type == "radio") {
        alert(child.id);
        child.checked = false;
    }
    else if (child.type == "textarea") {
        child.innerText = "";
    }

    //alert(child.childNodes.length);

    if (child.childNodes.length > 0) {
        var grandchild = child.firstChild;

        while (grandchild) {
            clearChildren(grandchild);
        }
        grandchild = grandchild.nextSibling;
    }

    child = child.nextSibling;
}

}

Answer 1

function clearChildren(node){

    if(node.childNodes.length >0){
        for(var index=0;index<node.childNodes.length;index++){
            clearChildren(node.childNodes[index]);
        }
    }

    if(node.localName == "input"){
        if (node.type == "text") {
            alert(node.id);
            node.value = "";
        }
        else if (node.type == "checkbox") {
            node.checked = false;
        }
        else if (node.type == "radio") {
            alert(node.id);
            node.checked = false;
        }
        else if (node.type == "textarea") {
            node.innerText = "";
       }
    }
}

clearChildren(document.getElementById("panSomePanel"));