【DOM】常用DOM API

        【类型检测】
node.nodeType
    9 | 1
    var __nodeType = element && element.nodeType;
    if(__nodeType !== 1 && __nodeType !== 9){ return element; }

node.tagName
    'IMG' ...



        【查找DOM---查找型】
node.querySelector(cssSelector) //nd
node.querySelectorAll(cssSelector) //NodeList
document.getElementById(id) //nd
node.getElementByTagName(tagName) //NodeList
node.getElementByClassName(className) //NodeList
node.getElementByName(name) //NodeList
document.images //NodeList
    scripts | styleSheets | links | forms | embeds



        【查找DOM---关系型】
node.children //NodeList
    .children.length === .childElementCount
node.parentElement //nd | null
node.firstElementChild //nd | null
node.lastElementChild //nd | null
node.nextElementSibling //nd | null
node.previousElementSibling //nd | null
node.offsetParent //nd | body | null
document.documentElement //html
document.body
document.head
document.activeElement //获得焦点的元素



        【text string】
node.textContent
    对HTML标签进行剔除（不解析）

node.innerText
    对HTML标签进行解析
        <br> ←→ \n

document.title

        【html string】
node.innerHTML
node.outerHTML
node.insertAdjacentHTML(position,htmlStr)
    position：'beforeBegin'前 | 'afterEnd'后 | 'afterBegin'内前 | 'beforeEnd'内后



        【生成DOM】
var nd = document.createElement('div')
var fragment = document.createDocumentFragment() //生成一个碎片容器

        【克隆DOM】
var copy = nd.cloneNode(false|true)
    无法克隆事件
    参数false：只克隆本身

        【插入DOM】
node.appendChild(nd) //nd
node.before(nd) //undefined
node.parentElement.insertBefore(nd,node) //nd
node.after(nd) //undefined

        【替换DOM】
node.replaceWith(nd) //nd
node.parentElement.replaceChild(nd,node) //node

        【删除DOM】
nd.remove() //undefined
nd.parentElement.removeChild(nd) //nd

        【DOM的包含关系】
node.contains(nd) //boolean



        【其它】
node.scrollIntoView(true|false) //定位功能



        【DOM属性】
node.getAttribute('name')
    .attributes
node.setAttribute('name', value)
node.hasAttribute('name')
node.removeAttribute('name')
node.dataset

        【属性class】 //ie10
node.className
node.classList.add('name1', 'nameN')
node.classList.remove('name1', 'nameN')
node.classList.contains('name')
node.classList.toggle('name', true|false)

        【属性style】
node.style.lineHeight = '18px';
    node.style.getPropertyValue('line-height')
node.style.lineHeight = '';
    node.style.removeProperty('line-height')
node.style.cssText



        【尺寸】
window.getComputedStyle(nd).height
window.getComputedStyle(nd).width
nd.clientHeight //content + padding
nd.clientLeft //左边框尺寸
nd.clientTop //上边框尺寸
    .offsetWidth - .clientWidth - .clientLeft //右边框尺寸
    .offsetHeight - .clientHeight - .clientTop //下边框尺寸
nd.offsetHeight //content + padding + border
nd.offsetTop //top + marginTop
nd.offsetLeft //left + marginLeft
nd.scrollWidth //.clientWidth - scrollBarWidth
nd.scrollTop //定位
nd.scrollLeft //定位

        【getComputedStyle】
window.getComputedStyle(nd).lineHeight
window.getComputedStyle(nd, ':after').lineHeight

        【getBoundingClientRect】
var __bcr = node.getBoundingClientRect()
    .bottom | .left | .right | .width | .height



        【Event】
参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events
var long = new Event('mouselong', true, true);
            new CustomEvent('mouselong', {detail:data});
nd.addEventListener('mouselong', fn);
nd.dispatchEvent(long);

var long = document.createEvent('Event');
long.initEvent('mouselong', true, true);
nd.addEventListener('mouselong', fn);
nd.dispatchEvent(long);

var fireEvent = function(element, event) {
    var evt = document.createEvent('HTMLEvents');
    evt.initEvent(event, true, true);
    return element.dispatchEvent(evt);
};
fireEvent(document.body, 'click'); //false：默认行为未执行