dom操作获取元素的若干方法

// 1,getElementById:返回元素节点
document.getElementById();

// 2,getElementsByClassName:返回HTMLCollection对象(IE9以下不支持。)
document.getElementsByClassName();

// 3,getElementsByTagName:返回HTMLCollection对象
document.getElementsByTagName();

// 4,getElementsByTagName:返回nodeList对象,第0项为元素节点
document.getElementsByName();

// 5,querySelector:返回选择器匹配到的第一个元素节点(选择器同css用法一致,支持由外到内的嵌套写法)
document.querySelector('#box em');

// 6,querySelectorAll:返回nodeList对象(类似数组对象,每个值为选中元素节点)
document.querySelectorAll();

// 7,获取子元素集合
// childNodes(IE：只获取元素节点；非IE：获取元素节点与文本节点；)
document.getElementById().childNodes;
// children(只获取元素节点，浏览器表现相同)
document.getElementById().children;

// 8,获取最后一个元素节点:lastElementChild(IE<9不支持)
document.getElementById().lastElementChild;

// 9,获取第一个元素节点:firstElementChild(IE<9不支持)
document.getElementById().firstElementChild;

// 10,获取后一个兄弟元素节点
// nextSibling(IE<9：后一个兄弟元素节点；非IE6,7,8：后一个兄弟节点，文本节点或者元素节点)
document.getElementById().nextSibling;
// nextElementSibling(IE<9不支持)
document.getElementById().nextElementSibling;

// 11,获取前一个兄弟元素节点
// previousSibling(IE<9前一个兄弟元素节点；非IE6,7,8：前一个兄弟节点，文本节点或者元素节点)
document.getElementById().previousSibling;
// previousElementSibling(IE<9不支持)
document.getElementById().previousElementSibling;

// 12,parentNode:获取父元素节点(parentElement用法一致,仅IE支持)
document.getElementById().parentNode;

// offsetParent：获取第一个设置定位的上级元素,返回元素节点
console.log(document.getElementById().offsetParent)

// 14,获取指定的某个上级元素的方法
let el = document.getElementById();
getParents(el, {id: 'box'})

function getParents (el, option) {
  let ele = null;
  while (el.tagName !== 'BODY') {
    const attr = Object.keys(option)
    if (el[attr].toUpperCase() === option[attr].toUpperCase()) {
      ele = el;
      break;
    }
    el = el.parentNode;
  }
  return ele
}