JavaScript 获取节点，操作节点

获取节点

父节点.childNodes 获取子节点（包含一切节点）

p.nodeType == 1// true 判断是否存在节点 是不是一个元素 
// 1 元素节点 2 属性节点 3 文本节点

p.nodeName
// #text 文本节点的名字
// P  元素节点的元素名 大写
// #comment 注释节点的名字

p.nodeValue // 文本节点的内容 
// 必须是文本节点，元素节点会返回 null

父元素.children 获取子节点 
// IE9+ 正常
// IE8-中 会获取 注释和元素节点

// 父节点
p.parentNode;// 获取直系父元素
p.offsetParent;// 获取上一个带有定位的父元素，position:stalic不算
/* 
兼容方法
  firstchild 都有值，firstElementChild IE 会 undefined
  短路运算 
  firstElementChild || firstchild;
*/

// 子节点 
p.firstChild;// 标准浏览器获取第一个 文本或换行 节点，IE 只获取第一个元素
p.firstElementChild;// 标准浏览器只获取第一个元素，IE 为 undefined
lastElementChild || lastChild; 最后一个子节点

// 兄弟节点
p.previousElementSibling || p.previousSibling;// 上一个兄弟节点
p.nextElementSibling || p.nextSibling;// 下一个兄弟节点

操作节点

// 新建节点
var li = document.createElement("p"); // 新建li元素
var text = document.createTextNode("wenben"); // 新建文本

// 插入节点
父节点.appendChild(li);// 父节点的末尾插入
父节点.insertBefore(li,参照子节点);// 在参照子节点前插入

// 替换节点 
  // 替换之前的文本依然还在 ，但它在文档中已经没了自己的位置
父节点.replaceChild(新节点,被替换的子节点);// 替换

// 删除节点 
  // 移除的节点仍然为文档所有，只不过没有了自己的位置
父节点.removeChild(子节点);// 删除子节点
节点.remove();// 自己删除自己

// 克隆节点
节点.cloneNode(false);// 默认：只复制本身空标签
节点.cloneNode(true);// 本身与所有子节点都复制