节点操作案例10-选择水果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select {
            width:200px;
            height: 200px;
            background-color: #33cccc;
            font-size: 20px;
        }
    </style>
</head>
<body>
  <select id="all" multiple="multiple">
    <option>苹果</option>
    <option>橘子</option>
    <option>梨</option>
    <option>西瓜</option>
    <option>水蜜桃</option>
  </select>

  <input type="button" value=">>" id="btn1">
  <input type="button" value="<<" id="btn2">
  <input type="button" value=">" id="btn3">
  <input type="button" value="<" id="btn4">

  <select id="select" multiple="multiple">
    
  </select>
  
  <script src="common.js"></script>
  <script>
    var all = my$('all');
    var select = my$('select');

    all.children[0].onclick = function () {
      alert('hello');
    }

    // 1 全部选择
    my$('btn1').onclick = function () {
      // 先获取子元素的个数，将来再发生变化不会受影响
      // 现在len的值始终是当前获取到的all.children.length 当前个数5
      // var len = all.children.length;
      // for (var i = 0; i < len; i++) {
      //   var option = all.children[0];
      //   select.appendChild(option);
      // }
      // 
      // 
      // 使用这种方式移动子元素的话，如果子元素有事件，移动之后元素的事件丢失
      select.innerHTML = all.innerHTML;
      // 当我们是用innerHTML 清空子元素的时候
      // 如果子元素有事件，此时会发生内存泄漏
      all.innerHTML = '';  // 清空标签之间的内容
    }

    // 3 移动选中的水果
    my$('btn3').onclick = function () {
      // 找到所有选中的option
      var array = []; // 存储选中的option
      for (var i = 0; i < all.children.length; i++) {
        var option = all.children[i];
        if (option.selected) {
          array.push(option);
          // 去掉当前option的选中效果
          option.selected = false;
        }
      }

      // 把数组中的option移动到第二个select中
      for (var i = 0; i < array.length; i++) {
        var option = array[i];
        select.appendChild(option);
      }
    }
  </script>
</body>
</html>

common中的代码

function my$(id) {
  return document.getElementById(id);
}

// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {
    var node, nodes = element.childNodes, i = 0;
    while (node = nodes[i++]) {
        if (node.nodeType === 1) {
            return node;
        }
    }
    return null;
}

// 处理浏览器兼容性
// 获取下一个兄弟元素
 function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
      if (el.nodeType === 1) {
          return el;
      }
    }
    return null;
  }


// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
  // 判断当前浏览器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}