Dom的一些操作

子元素和子节点，第一个子元素和第一个子节点以及属性操作

通过js获取父级，子级，兄弟元素（包括祖级，孙级）；

原生的JavaScript方法：

var a = document.getElementById("dom");
      del_space(a); //清理空格
      var b = a.childNodes; //获取a的全部子节点；
      var c = a.parentNode; //获取a的父节点；
      var d = a.nextSibling; //获取a的下一个兄弟节点
      var e = a.previousSibling; //获取a的上一个兄弟节点
      var f = a.firstChild; //获取a的第一个子节点
      var g = a.lastChild; //获取a的最后一个子节点

这只是一种获取节点，如果节点是文本节点，就还要做判断，可以不可以只获取子元素呢。就是子标签。答案当然是有的
获取子元素

// 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;

// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
var nodes = ele.children;    

// 查询子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

// 当前元素的第一个/最后一个子元素节点
var el = ele.firstElementChild;
var el = ele.lastElementChild;

// 下一个/上一个兄弟元素节点
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

//返回子元素（不包括文本节点和注释）的个数
var el = ele.childElementCount;

//获得className属性的添加，删除和替换类名
classList属性，
//mydiv元素的所有class属性值，
var el = ele.getElementById("MYdiv").classList
add(value) 将给定的字符串值添加到列表中，如果值存在，不添加
contains(value)表示列表中是否存在给定的值，如果存在返回true，否则返回false
remove(value) 从列表中删除给定的字符串
toggle(value) 如果列表中已经存在给定的值，则删除他，如果列表中没有给定的值，添加他

DOM更改

// 添加、删除子元素
ele.appendChild(el);
ele.removeChild(el);

// 替换子元素
ele.replaceChild(el1, el2);

// 插入子元素
parentElement.insertBefore(newElement, referenceElement);

属性操作

// 获取一个{name, value}的数组
var attrs = el.attributes;

// 获取、设置属性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');

// 判断、移除属性
el.hasAttribute('class');
el.removeAttribute('class');

// 是否有属性设置
el.hasAttributes();

innerHTML与outerHTML的区别？
DOM元素的innerHTML, outerHTML, innerText, outerText属性的区别也经常被面试官问到，比如对于这样一个HTML元素：<div>content<br/></div>。

innerHTML：内部HTML，content<br/>；
outerHTML：外部HTML，<div>content<br/></div>；
innerText：内部文本，content ；
outerText：内部文本，content ；

上述四个属性不仅可以读取，还可以赋值。outerText和innerText的区别在于outerText赋值时会把标签一起赋值掉，另外xxText赋值时HTML特殊字符会被转义。

所有节点都有的最后一个属性是ownerDocumen，该属性指向表示整个文档的文档节点，这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中，通过这个属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

Dom的一些操作

子元素和子节点，第一个子元素和第一个子节点以及属性操作

推荐阅读更多精彩内容