DOM 的增删改查

get和query(NodeList)获取到的元素是一样的, 但是集合表示是不一样的.
NodeList和HTMLCollection是两个不同的构造函数, 构造出来的数组

......
<ul class='box'>
  <li class='item'>1</li>
  <li class='item'>2</li>
  <li class='item'>3</li>
</ul>

<script>
  var box = document.querySelect('.box')
  var getLi = document.getElementsByClassName('.item')
  var queryLi = document.querySelectAll('item')
  /* 先获取,再修改 */
  box.innerHTML += <li>4</li>
</script>
......

innerHTML,非常不理想的修改方式, box里面所有的内容都被修改了添加了一遍,并且重新生成了.
query获取的元素是静态的, get动态获取
请不要使用innerHTML增加节点添加节点的方式, 可以使用以下方式:

<ul class='box'>
  <li class='item'>1</li>
  <li class='item'>2</li>
  <li class='item'>3</li>
</ul>

<script>
  var box = document.querySelect('.box')  
  var li = document.createElement('li')  // 创建了一个不属于dom结构的全新标签
  li.textContent = '4'
  li.className = 'item'

  var getLi = document.getElementsByClassName('.item')
  var queryLi = document.querySelectAll('.item')

  box.appendChild(li)  // 添加到box中

  box.removeChild(getLi[1])  // 删除
  // getLi.parentNode.removeChild(getLi[1])
  // getLi.parentElement.removeChild(getLi[1])

</script>