《JavaScript程序设计》课件——项目5-3 节点基础和操作.pptx

JavaScript程序设计2021

1课程导入2任务导入3知识讲解4任务实施项目5-3节点基础和操作5任务总结

知识回顾任务导入知识讲解任务实施任务总结获取元素的方法有几种?document.getElementsByTagName()获取的元素是什么数据类型？提问

知识回顾任务导入知识讲解任务实施任务总结任务重难点完成下拉菜单完成简易留言板重点：节点基础节点操作

知识回顾任务导入知识讲解任务实施任务总结节点基础1.节点基础1.1什么是节点HTML文档可以看作是一个节点树，网页中的所有内容都是节点，一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性。下面列举常见的节点类型：元素节点，nodeType为1属性节点，nodeType为2文本节点，nodeType为3，文本节点包含文字、空格、换行等

知识回顾任务导入知识讲解任务实施任务总结节点基础1.2节点层级一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title测试/title/headbodyahref=#链接/ap段落.../p/body/html

知识回顾任务导入知识讲解任务实施任务总结节点基础DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点。节点之间的层级关系如下：根节点：html标签是整个文档的根节点，有且仅有一个父节点：指的是某一个节点的上级节点子节点：指的是某一个节点的下级节点兄弟节点：两个节点同属于一个父节点

知识回顾任务导入知识讲解任务实施任务总结节点基础1.3获取节点属性说明firstChild访问当前节点的首个子节点lastChild访问当前节点的最后一个子节点nodeName访问当前节点名称nodeValue访问当前节点的值nextSibiling返回同一树层级中指定节点之后紧跟的节点previousSibling返回同一树层级中指定节点的前一个节点parentNode访问当前元素节点的父节点childNodes访问当前元素节点的所有子节点的集合

知识回顾任务导入知识讲解任务实施任务总结节点基础获取父级节点在JavaScript中，可以使用parentNode属性来获得离当前元素的最近的一个父节点，如果找不到父节点就返回为?null，语法格式为：obj.parentNode，obj是一个DOM对象。body??div?class=demo????div?class=boxspan?class=childspan元素/span/div??/div??script????var?child=?document.querySelector(.child);//获取类名为child的span元素????console.log(child.parentNode);//输出离child元素最近的父级节点(box)???/script/body示例代码案例演示：如何获取当前元素的父节点。

知识回顾任务导入知识讲解任务实施任务总结节点基础获取子级节点在JavaScript中，可以使用childNodes属性或者children属性两种方式来获得当前元素的所有子节点的集合，接下来我们就分别介绍这两种方式的用法。方式1：childNodes属性获得的是当前元素的所有子节点的集合，该集合为即时更新的集合。下面通过案例的形式演示如何获取当前元素子节点。

知识回顾任务导入知识讲解任务实施任务总结节点基础ulli我是li/lili我是li/lili我是li/lili我是li/li/ulscript??var?ul?=?document.querySelector(ul);??var?lis?=?ul.querySelectorAll(li);console.log(lis)???console.log(ul.childNodes);???console.log(ul.childNodes[0].nodeType);???console.log(ul.childNodes[1].nodeType);/script示例代码案例演示：如何使用childNodes属性获取当前元素的子节点。

知识回顾任务导入知识讲解任务实施任务总结节点基础注意childNodes属性返回的是NodeList对象的集合，返回值里面包含了元素节点、文本节点等其他类型的节点。

知识回顾任务导入知识讲解任务实施任务总结节点基础方式2：children是一个可读的属性，返回所有子元素节点。children