《基于新信息技术的JavaScript程序设计基础》课件_第12章.pptx
项目12节点操作;
任务1先导知识：节点、节点的处理;
12.1.2节点的层级关系
节点树中的节点彼此拥有层级关系，父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点，同级的子节点被称为同胞(兄弟或姐妹)。
(1)在节点树中，顶端节点被称为根(root)。
(2)每个节点都有父节点，除了根(它没有父节点)。
(3)一个节点可拥有任意数量的子节点。
(4)同胞是拥有相同父节点的节点。
图12.1展示了节点树的一部分以及节点与节点之间的关系。;
;从代码中可以看出：
·html节点没有父节点，它是根节点。
·head和body的父节点是html节点。
·文本节点Helloworld!的父节点是p节点。
·html节点拥有两个子节点：head和body。
·head节点拥有一个子节点：title节点。
·title节点也拥有一个子节点：文本节点DOM。
·h1和p节点是同胞节点，同时也是body的子节点。
·head元素是html元素的首个子节点。
·body元素是html元素的最后一个子节点。
·h1元素是body元素的首个子节点。
·p元素是body元素的最后一个子节点。
JavaScript通过内建的document对象访问和操作HTMLDOM。;
12.1.3节点的属性
HTML文档中的节点主要有以下重要属性，如表12.1所示。;
程序代码演示了在节点树中按照节点之间的关系检索出各个节点、使用节点的各属性：
代码运行结果如图12.2所示。;
;
12.1.4元素的查找
JavaScript内建的document对象以及节点对象均提供了三个在HTMLDOM中查找到指定节点对象的方法。
(1)?getElementById()方法：该方法返回该对象下带有指定ID的节点对象。
(2)?getElementsByTagName()方法：该方法返回该对象下所有指定标签名称的节点对象数组。
(3)?getElementsByClassName()方法：该方法返回该对象下所有指定类名的节点对象数组。;
1.?getElementById()方法
HTML允许为每个元素指定id属性，id属性的值应该在同一HTML文档中唯一。getElementById()方法通过指定id属性的值来查找到HTMLDOM中唯一的节点对象。
通过对JavaScript内建的document对象调用getElementById()方法，查找到文档中id属性值为intro的节点对象，并将该对象赋值给变量intro。;
2.?getElementsByTagName()方法
getElementsByTagName()方法通过指定HTML标签名称来查找到所有该标签的节点对象，
通过对JavaScript内建的document对象调用getElementsByTagName()方法，查找到文档中所有的h1元素节点对象组成的数组，并将该数组赋值给变量h1。;
3.?getElementsByClassName()方法
HTML允许为每个元素指定class属性，class属性的值在同一HTML文档中允许重复。通过指定class属性的值来查找到HTMLDOM中所有class属性为该值的节点对象组成的数组，
通过对JavaScript内建的document对象调用getElementsByClassName()方法，查找到文档中所有的class属性为odd的元素节点对象组成的数组，并将该数组赋值给变量odd。;
12.1.5节点操作方法
由于节点具有易于操纵、对象明确等特点，DOM供了非常丰富的节点处理方法来对各种节点进行操作，包括的节点有对象节点、文本节点和属性节点，如表12.2所示。;;
1.创建节点、追加节点
(1)?createElement(标签名)创建一个元素节点(具体的一个元素)。
(2)?appendChild(节点)追加一个节点。
(3)?createTextNode(节点文本内容)创建一个文本节点;
2.插入节点
(1)?appendChild(节点)是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
(2)?insertBefore(a,b)是参照节点，意思是a节点会插入b节点的前面。
;
3.删除、移除节点
removeChild(节点)?删除一个节点，用于移除删除一个参数(节点)。其返回的被移除的节点，被移除的节点仍在文档中，只是文档