《Web前端基础》课件——任务7：学习DOM模型 节点操作.pptxVIP

节点操作

1获取节点获取父节点：在JavaScript中，可以使用parentNode属性获取当前节点的父节点，如果该节点没有父节点，那么parentNode属性返回null。获取父节点的示例代码如下。node.parentNodeDOM节点对象

1获取节点属性说明firstChild获取当前节点的首个子节点lastChild获取当前节点的最后一个子节点firstElementChild获取当前节点的首个子元素节点lastElementChild获取当前节点的最后一个子元素节点children获取当前节点的所有子元素节点集合childNodes获取当前节点的所有子节点集合获取子节点：在DOM中，用来获取子节点的属性有很多，可以结合子节点的特征进行获取。

1获取节点childNodes属性浏览器兼容性IE6~IE8中childNodes属性不会获取文本节点。在IE9及以上版本和主流浏览器中则可以获取文本节点。

在开发过程中，有时需要创建一个新节点并添加到文档中。例如，在“百度”有哪些信誉好的足球投注网站引擎中进行有哪些信誉好的足球投注网站后，有哪些信誉好的足球投注网站框下方的有哪些信誉好的足球投注网站记录列表中会增加一个新历史记录，这个新历史记录就可以通过创建并添加节点实现。2创建并添加节点

2创建并添加节点创建节点：使用document对象的createElement()方法可以创建元素节点，语法如下。创建节点的示例代码如下。使用createElement()方法创建的节点是页面中原本不存在的，所以这种方式也称为动态创建节点。Tipvardiv=document.createElement(div);console.log(div);//结果为：div/divdocument.createElement(标签名);

2创建并添加节点添加节点：节点创建后，我们需要根据实际的开发需求将节点添加到文档中的指定位置。添加节点的方法：DOM中提供了appendChild()方法和insertBefore()方法用于添加节点，这两个方法都由父节点的对象调用。appendChild()方法表示将一个节点添加到父节点的所有子节点的末尾。insertBefore()方法表示将一个节点添加到父节点中的指定子节点的前面，该方法需要接收两个参数，第1个参数表示要添加的节点，第2个参数表示父节点中的指定子节点。

移除节点：在DOM中，可以通过removeChild()方法将一个父节点的指定子节点移除，语法格式如下。node.removeChild(child)父节点3移除节点移除指定的子节点child

4复制节点复制节点：在DOM中，可以通过cloneNode()方法复制节点。通过一个节点对象调用cloneNode()方法后，该方法会返回节点对象的副本。该方法的第1个参数是可选参数，具体说明如下。默认为false，表示只复制节点本身，不复制节点内部的子节点。如果设为true，表示复制节点本身及里面所有的子节点。

案例实现步骤搭建页面结构。实现单击“发布”按钮发表留言的功能。实现删除留言功能。5【案例】简易留言板

左图为单击“发布”按钮添加留言效果，右图为单击第一条留言中“删除”按钮后的效果。5【案例】简易留言板

THANKYOU!