第7章 DOM（下）-补充案例.docVIP

第8章 JavaScript编程基础 PAGE 2 PAGE 9 第7章补充案例 【案例7-1】删除页面上指定的p元素 一、案例描述 考核知识点 DOM对象、removeChild() 练习目标 掌握DOM对象的概念。 掌握removeChild()方法。 掌握parentNode属性。 需求分析 DOM（文档对象模型），利用DOM可以完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。本案例将完成对文档中id=p1的元素进行删除操作。 案例分析 效果如图7-1、7-2所示。 原始文本内容 单击删除按钮后 具体实现步骤如下： 在页面编写父元素div。 在div中，设置4个子元素p，给第一个p元素设置id=p1。 给input按钮设置delp()单击事件。 处理delp()函数： 第一种方式：找到父元素，找到要删除的子元素，parent.removeChild(child) 将子元素从父元素中删除。 第二种方式：找到要删除的子元素，用其parentNode 属性来找到父元素。方法为child.parentNode.removeChild(child)。 二、案例实现 1、制作页面结构 新建HTML页面，具体代码如下： pJavaScript程序设计/p div id=Odiv p id=p1什么是JavaScript/p pJavaScript是一门功能强大