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); // 本身与所有子节点都复制