8_js_dom编程入门2

Objective（本课目标）

• 掌握基本课堂案例
• 掌握节点的关系操作

1. 按钮选中案例

• 课堂案例：1.显示按钮的选中效果.html

• 
  
  
  
      
      
      
      
  
  
  
      按钮1
      按钮2
      按钮3
      按钮4
      按钮5
  
      
  
  
  

  

2. 图片轮播案例

• 课堂案例：2.页面切换背景图片.html

• 

• 

3. 表格选中变色案例

• 课堂案例：3.表格选中变色.html

• 
  
  
      
      
      
      
      
  
  
          
  
                  
  
                      
  
                          
  编号
                          
  商品名称
                          
  价格
                          
  库存
                          
  当日出售
                          
  剩余
                      
                  
                  
  
                      
  
                          
  111
                          
  西瓜
                          
  11.5
                          
  555
                          
  15
                          
  333
                      
                      
  
                          
  222
                          
  苹果
                          
  11.5
                          
  555
                          
  15
                          
  333
                      
                      
  
                          
  333
                          
  香蕉
                          
  11.5
                          
  555
                          
  15
                          
  333
                      
                      
  
                          
  444
                          
  桃子
                          
  11.5
                          
  555
                          
  15
                          
  333
                      
                      
  
                          
  555
                          
  石榴
                          
  11.5
                          
  555
                          
  15
                          
  333
                      
                      
  
                          
  666
                          
  梨子
                          
  11.5
                          
  555
                          
  15
                          
  333
                      
                  
              
  
              
  
  

  

4.全选反选

• 课堂案例：4.全选反选.html

• 
  
  
      
      
      
      
      
  
  
          
  
                  
  
                          
  
                              
  
                                  
                              
                              
  商品
                              
  价格
                          
                          
  
                              
  
                                  
                              
                              
  桃子
                              
  15
                          
                          
  
                              
  
                                  
                              
                              
  猕猴桃
                              
  12
                          
                          
  
                              
  
                                  
                              
                              
  香蕉
                              
  11
                          
                          
  
                              
  
                                  
                              
                              
  枸杞
                              
  22
                          
                  
              
  
  
  
              
  
  

  

5. 自定义属性操作

5.1 获取属性值和设置属性值

• getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）；

• setAttribute() ：设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

• hasAttribute 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。

  • result 为返回的布尔值：true 或 false。

  • attName 是一个字符串，表示属性的名称。

• 课堂案例：5.元素属性的操作.html

5.2 H5自定义属性

• 只读属性 dataset 提供了对元素上自定义数据属性（data-*）读/写访问。

• 课堂案例：6.H5自定义属性.html

5.3 案例讲解

• 课堂案例：7.选项卡切换.html

6. 节点操作

6.1. 节点概述

• 节点与元素的关系是什么?

• Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。

• Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如，继承同一组方法，或者用同样的方式测试。

• 节点（Node）的基本属性：

nodeName：返回当前节点的节点名称
nodeType：返点当前节点的类型
nodeValue：返回或设置当前节点的值，只有文本节点才有值，标签元素和属性节点是没有值的。
​
Node.ELEMENT_NODE 1 元素节点
Node.ATTRIBUTE_NODE 2 属性节点
Node.TEXT_NODE 3 文本节点6.2 节点之间的关系

• 父子关系

• 兄弟关系

6.3. 获取父节点

• Node.parentNode：返回指定的节点在 DOM 树中的父节点。

• parentElement：返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。

6.4. 获取子节点

• Node.childNodes ：返回包含指定节点的子节点的集合。

• Element.children：是一个只读属性，返回 一个 Node 的子elements

• Element.childElementCount 只读属性返回一个无符号长整型数字，表示给定元素的子元素数。

6.5. 获取头尾节点

• Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。

• Node.lastChild 是一个只读属性，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 null。

6.6. 获取前后节点

• Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。

• Node.previousSibling：返回当前节点的前一个兄弟节点，没有则返回null.

6.7. 创建节点和添加节点

• Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。