原生js的DOM相关操作

获取节点

• 获取父节点： parentNode
• 获取兄弟节点：
  nextElementSibling || nextSibling
  previousElementSibling || previousSibling
• 获取子节点
  firstElementChild || firstChild
  lastElementChild || lastChild
  childNodes =>获取所有子节点
  children =>获取所有元素节点（低版本浏览器不支持）

CRUD操作

• 创建节点
  var img = document.createElement('img');
• 插入节点
  var box = document.getElementByClassName('box')[0];
  • 插入方式一
    box.insertBefore(img,box.firstChild);
box.insertBefore(img,children[0]);
box.insert(img,children[0]);
  • 插入方式二
    box.appendChild(img);
• 删除节点
  • 删除方式一
    img.remove();
  • 删除方式二
    box.removeChild(img);
• 克隆节点
  • 浅克隆
    var newBox = box.cloneNode();
  • 深克隆
    var newBox1 = box.cloneNode(true);

节点属性操作

• 获取标签的属性： img.getAttribute('src') || img.src
• 设置属性： img.setAttribute('src',' img/a.jpg')
• 删除属性： img.removeAttribute('src')