JS，DOM试题2，在实践中应用，非常详细！！

列表收缩

	
		
		
		
	
	
		

			
同学
			

				
同学1
				
同学2
				
同学3
			
		
	
		

			
朋友
			

				
朋友1
				
朋友2
				
朋友3
				
朋友4
			
		
	
		

			
家人
			

				
父亲
				
母亲
				
			
		
	
		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

因为是点击h3 显示出ul中的所有li的内容，并且颜色会发生改变，且点击一个后，再点击另外一个，除此之外的都要收缩回去

所以

1. 获取h3 和 ul

2. 获取h.length个h的点击事件

3. nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）

   所以，current是为了获取 h 对应的 ul 元素

4. 进入 if else

5. if：如果我点击同学，则同学展开，如果我再点击同学，则同学收缩

6. else 如果我点击同学，则同学展开，如果我点击除同学之外的 则 遍历 ul，全部收缩，for循环结束，把当前点击的进行展开和变色

代办事项

	
待办事项工具

	

		

			
			添加
		

		

			

			
		
	

	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

输入之后，点击添加，下面会显示代办事项，点击完成，显示绿色，点击删除，则删除事项

1. 获取 "添加"的点击事项，获取 input ，因为在ul中显示事项，所以也要获取 ul

2. 获取btn的点击事件，因为要在ul里填li，所以要创造一个元素document.createElement(‘li’)

3. 因为要出现删除和完成，则要用 innerHTML，text.value是为了可以让事项从上往下添加，

   li.innerHTML = text.value + " 完成" + "删除";

4. 获取 “完成” 和 “删除” 的元素

5. 设置 完成和删除的点击事件，如果完成则变为绿色

   this.parentNode.style.backgroundColor = 'green'; parentNode指li的父节点 ul整条变色

   ul.removeChild(this.parentNode); 表示删除节点，移出这个ul的父节点即div，移出掉

该套例题在我的资源里，请自行下载