JS高级. 04 增删改查面向对象版歌曲管理、递归、

增数组.push()

删数组.splice(开始删除索引,删除几个)

在当前对象中调用当前对象的方法中和属性,必须用this调用

nodeType判断节点类型

节点.nodeType == 1:元素节点/2:属性节点/3:文本节点

concat 返回的是一个新的数组

封装歌曲列表管理（函数）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         window.onload = function () {
 8             //给页面中所有的元素添加一个边框  1px solid pink
 9             //DOM中，没有提供直接获取后代元素的API
10             //但是可以通过childNodes来获取所有的子节点
11 
12             //先找body的所有子元素
13             //再找body的子元素的所有子元素
14 
15             function getChildNode(node){
16                 //先找子元素
17                 var nodeList = node.childNodes;
18                 //在用子元素再找子元素  这里就可以递归了
19                 //for循环中的条件，就充当了结束的条件
20                 for (var i = 0; i < nodeList.length; i++) {
21                     //childNode获取到到的节点包含了各种类型的节点
22                     //但是我们只需要元素节点  通过nodeType去判断当前的这个节点是不是元素节点
23                     var childNode = nodeList[i];
24                     //判断是否是元素节点
25                     if(childNode.nodeType == 1){
26                         childNode.style.border = "1px solid pink";
27                         getChildNode(childNode);
28                     }
29                 }
30             }
31             getChildNode(document.body);
32         }
33     </script>
34 </head>
35 <body>
36 <div>1div
37     <p>1p<span>1span</span><span>2span</span><span>3span</span></p>
38     <p>5p<span>1span</span><span>2span</span><span>3span</span></p>
39 </div>
40 <div>10div
41     <p>1p<span>1span</span><span>2span</span><span>3span</span></p>
42     <p>5p<span>1span</span><span>2span</span><span>3span</span></p>
43 </div>
44 <p>我是第1个p标签</p>
45 <p>我是第10个p标签</p>
46 </body>
47 </html>

View Code