获取节点
- 获取父节点： 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')
