操作DOM练习, updating…

Example 1

  1. 为 <ul> 添加一个类 bar: addClassToUl
  2. 为 <li> 添加颜色: addColorToLi
  3. 删除第 10 个 <li>: deleteListItem
  4. 在第 11 个 <li> 后面增加一个 <li> , 其文字内容为 “inserted element”: addListItem
  5. 点击任意 <li> 弹窗显示其为当前列表中的第几项以及列表的文字内容: clickAlert

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <ul id="list" class="foo">
  <li>#0</li>
  <li><span>#1</span></li>
  <li>#2</li>
  <li>#3</li>
  <li><ul><li>#4</li></ul></li>
  <li><a target="_blank" href="https://icyfish.github.io">#5</a></li>
  <li>#6</li>
  <li>#7</li>
  <li>#8</li>
  <li>#9</li>
  <li>#10</li>
  <li>#11</li>
  <li>#12</li>
  <li>#13</li>
</ul>
</body>
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
function addClassToUl(classText){
  // document.getElementById('list').className += (' '+ classText);
  document.getElementById('list').classList.add(classText);
}
addClassToUl('bar');


function addColorToLi(index, color){
  Array.from(document.getElementById('list').children)[index].style.backgroundColor = color;
};
addColorToLi(2, 'lightgreen');
addColorToLi(4, 'lightblue');
addColorToLi(6, 'lightpink');


function deleteListItem(index) {
  document.getElementById("list").children[index].remove();
}
deleteListItem(10);


function addListItem(index, content){
  var newElement = document.createElement('li');
  var newContent = document.createTextNode(content);
  newElement.appendChild(newContent);

  var parentElement = document.getElementById('list');
  var currentElement = parentElement.children[index];

  parentElement.insertBefore(newElement, currentElement);
}
addListItem(11, 'inserted element');


function clickAlert(){
  var parentElement = document.getElementById("list");

  function alertTarget(e){
      if(e.target && e.target.nodeName === "LI") {
        alert(`The index is ${Array.from(parentElement.children).indexOf(e.target)}, the content is ${e.target.innerText}`);
    }
  }

  parentElement.addEventListener('click', alertTarget);
}
clickAlert();