求解：运行出来为什么不显示第一个子结点和最后一个子结点的值？详细见主内容。

Question

求解：运行出来为什么不显示第一个子结点和最后一个子结点的值？为什么第一个子结点名字显示不是TEXT，最后一个子结点名字显示不是BUTTON？最后一个结点的类型明明是按钮，但检测到是文本（类型值为3）？

    <form action="#" name="form1" id="form1">
        <input type="text" name="txt" id="txt" value="value_text_input"><br>
        <input type="button" name="button" id="button" value="value_btn"><br>
        <button type="submit" id="btn_submit">提交按钮</button>
    </form>

        var node_form= document.getElementById("form1");
        document.write("打印表单1的第一个子元素的各个属性： ");
        document.writeln(node_form.firstChild);
        document.writeln(node_form.firstChild.nodeName);
        document.writeln(node_form.firstChild.nodeType);
        document.writeln(node_form.firstChild.nodeValue);
        document.write("<br>打印表单1的最后一个子元素的各个属性：");
        document.writeln(node_form.lastChild);
        document.writeln(node_form.lastChild.nodeName);
        document.writeln(node_form.lastChild.nodeType);
        document.writeln(node_form.lastChild.nodeValue);

打印表单1的第一个子元素的各个属性： [object Text] #text 3
打印表单1的最后一个子元素的各个属性：[object Text] #text 3

运行结果见最后一张图 

Answer 1

1.首先得清楚dom结构有哪些组成(文档节点, 元素节点, 文本节点, 属性节点, 注释节点 )
2.区分children和childNodes的区别;
3.解答: 编写html文档标签的时候, 每一个回车换行...符号都会创建出一个文本节点, 本题中可以看出form元素节点包含了4个回车换行符也就是创建了4个文本节点, form的childNodes打印出来就是text -> input -> br -> text -> input -> br -> text -> button -> text共计九个子节点; 所以打印出来的答案跟你所想的有出入是肯定的;