day01

1.写一下节点增删改

(1) document.createElement()
(2).appendChild()
(3).insertBefore()
(4).cloneNode(true) / .cloneNode(false)
(5).removeChild()
(6).replaceChild()

var parent = document.getElementById('.parent');
var d = document.createElement('div');     //动态创建元素div,不会在页面显示
var s = document.createElement('span');
parent.appendChild('d')     //在parent的最后一个子节点后面添加 d
parent.insertBefore(s,d)  //(新元素，已有元素) 要判断第二个参数是否存在
s.cloneNode(true)   //克隆
parent.removeChild('d');  //移除
var a = document.createElement('a'); 
parent.replaceChild(a,s);   //（新元素节点，原有元素节点）

2.如何获取元素的父节点和兄弟节点

父节点：
.parentNode
.parentElement
.offsetParent
子节点：
.parentNode.children[n];
.previousElementSibling;
.previousSibling (previousSibling会匹配字符， 包括换行和空格，而不是节点。)
.nextElementSibling
.nextSibling (nextSibling会匹配字符， 包括换行和空格，而不是节点。)

// 获取父节点:

// 1. parentNode获取父节点
// 获取的是当前元素的直接父元素。
var p = document.getElementById("test").parentNode;

// 2. parentElement获取父节点
// parentElement和parentNode一样，只是parentElement是ie的标准。
var p1 = document.getElementById("test").parentElement;

// 3. offsetParent获取所有父节点
var p2 = document.getElementById("test").offsetParent;

获取兄弟节点:

// 1. 通过获取父亲节点再获取子节点来获取兄弟节点
var brother1 = document.getElementById("test").parentNode.children[1];

// 2. 获取上一个兄弟节点
// 在获取前一个兄弟节点的时候可以使用previousSibling
// 和previousElementSibling。
// 他们的区别是previousSibling会匹配字符，
// 包括换行和空格，而不是节点。
// previousElementSibling则直接匹配节点。
var brother2 = document.getElementById("test").previousElementSibling;
var brother3 = document.getElementById("test").previousSibling;

// 3. 获取下一个兄弟节点
var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;