1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 .fontColor {
10 color: pink;
11 }
12 </style>
13
14 </head>
15
16 <body>
17 <ul id="myList">
18 <li id='listOne'>Coffee</li>
19 <li>Tea</li>
20 <li>Milk</li>
21 </ul>
22 <button onclick="myFunction()">移除列表的第一项</button>
23 <button onclick="myFunction2()">溢出属性</button>
24 <button onclick="myFunction3()">添加class、style</button>
25
26 <script>
27 var targetNode = document.getElementById('myList');
28
29 var config = { attributes: true, childList: true, subtree: true };
30
31 var callback = function (mutationsList) {
32 for (var mutation of mutationsList) {
33 if (mutation.type == 'childList') {
34 console.log('A child node has been added or removed.');
35 }
36 else if (mutation.type == 'attributes') {
37 console.log('The ' + mutation.attributeName + ' attribute was modified.');
38 }
39 }
40 };
41
42 var observer = new MutationObserver(callback);
43
44 observer.observe(targetNode, config);
45
46
47 function myFunction() {
48 var myList = document.getElementById("myList");
49 var listOne = document.getElementById("listOne");
50 myList.removeChild(listOne);
51 }
52
53 function myFunction2() {
54 var myList = document.getElementById("myList");
55 myList.removeAttribute('lee');
56 }
57
58 function myFunction3() {
59 var myList = document.getElementById("myList");
60 myList.classList = ['fontColor'];
61 myList.style.color = 'pink'
62 }
63 </script>
64 </body>
65
66 </html>
