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

青旅半醒 2022-05-17 01:25 311阅读 0赞

### ５大节点： ###

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部分：

JS部分：