通过DOM关系获取元素节点和操作节点的基本方法

５大节点：

HTML文档中的每个成分都是一个节点．

（１）整个文档是一个文档节点

（２）每个HTML标签是一个标签节点

（３）包含在HTML标签中的文本是文本节点

（４）每个HTML属性是一个属性节点

（５）注释属于注释节点

注意：换行和空格都属于节点，称为＂空白节点＂．

DOM树：

HTML文档中的所有节点组成了一个文档树模型，HTML文档中的每个标签，属性，文本等都是树中的一个节点，这些节点相互联系，相互影响，构成一个完整的页面，称之为＂模型＂．

获得节点关系的属性：

对象．parentNode　获得父节点的引用

对象．childNodes　获得子节点的集合

对象．firstChild　获得第一个子节点的引用

对象．lastChild　获得最后一个节点的引用

对象．nextSibling　获得下一个兄弟节点的引用

对象．previousSibling　获得上一个兄弟节点的引用

操作节点：

（１）appendChild():用于向childNodes列表的末尾添加一个节点，如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置.

var returnNode = someNode.appendChild(newNode);
        alert(returnNode == newNode);//true
        alert(someNode.lastChild == newNode);//true

var returnNode = someNode.appendChild(someNode.firstChild);
        alert(returnNode === someNode.firstChild);//false
        alert(returnNode === someNode.lastChild);//true

（２）insertBefore():将节点放在childNodes列表的某个特定位置上

 var returnNode = someNode.insertBefore(newNode,someNode.childNodes[3]);
        alert(returnNode === someNode.childNodes[3]);//true

（３）replaceChild():替换节点

 var returnNode = someNode.replaceChild(newNode,someNode.firstChild);

（４）removeChild():移除节点

var returnNode = someNode.removeChild(someNode.lastChild);

（５）cloneNode()：创建调用此方法的节点的完全相同的副本（即复制节点）true表示深复制

var returnNode = someNode.cloneNode(true);

点击按钮增加上传框的效果实现：（这个效果是基本功，必须掌握）

给按钮加单击事件，创建input标签，设置input标签的属性为file，将其追加到父级元素里面

body部分：

<body>
<input type="button" id="btn" value="点我增加上传框">
<div id="box">
    <input type="file">
</div>
</body>

JS部分：

 <script>
   window.onload = function () {
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    btn.onclick = function () {
   //     创建新的input标签
        var newfile = document.createElement('input');
   //        设置type属性为file
        newfile.setAttribute('type','file');
   //        追加到父级元素里面
        box.appendChild(newfile);
    }
 }
    </script>