日期:2014-05-16  浏览次数:20410 次

DOM遍历节点的问题

<form id="form1">
    <input type="text" value="fdsa" />
    <input type="button" value="btn" />
</form>

<script type="text/javascript">
    function nodeContent(e) {
        var type, child, s, nodename = "";
        for (child = e.firstChild; child != null; child=child.nextSibling) {
            type = child.nodeType;
            nodename = child.nodeName;
            document.write("nodeName:" + nodename + "的nodeType是:" + type + "<br />")
        }
    }
    var ele = document.getElementById("form1");
    nodeContent(ele);
</script>


为什么结果会是:
nodeName:INPUT的nodeType是:1
nodeName:#text的nodeType是:3
nodeName:INPUT的nodeType是:1
nodeName:#text的nodeType是:3

明明form下面只有两个节点啊

------解决方案--------------------
标准浏览器会把回车换行解释为一个text节点。对比下面两段html

<form id="form1">
    <input type="text" value="fdsa" />
    <input type="button" value="btn" />
</form>


<form id="form1"><input type="text" value="fdsa" /><input type="button" value="btn" /></form>