DOM 接口
    dom 结构树代表的是一系列继承关系
    image.png
    相当于查看父类
    image.png

    1.getElementById 方法定义在 Document.prototype 上，即 Element 节点上不能使用。
    2.getElementsByName 方法定义在 HTMLDocument.prototype 上，即非 html 中的document 以外不能使用(xml document,Element)
    3.getElementsByTagName 方法定义在 Document.prototype 和 Element.prototype 上
    4.HTMLDocument.prototype 定义了一些常用的属性，body,head,分别指代 HTML 文档
    中的标签。
    5.Document.prototype 上定义了 documentElement 属性，指代文档的根元素，在 HTML
    文档中，他总是指代元素
    6.getElementsByClassName、querySelectorAll、querySelector 在 Document,Element 类中均有定义

    DOM 基本操作
    1、增
    document.createElement(); //增加或创建元素节点（标签）——常见
    image.png
    document.createTextNode(); //创建文本节点
    document.createComment(); //创建注释节点
    document.createDocumentFragment(); //创建文档碎片节点

    2、插——剪切操作
    PARENTNODE.appendChild(); 可以理解成.push
    image.png
    PARENTNODE.insertBefore(a, b);一定是 先 insert a，before b
    image.png

    3、删
    parent.removeChild(); //就是被剪切出来了
    child.remove(); //自尽，完全删除
    image.png
    4、替换
    parent.replaceChild(new, origin); //用新的 new 去置换旧的 origin

    DOM 基本操作
    1、Element 节点的一些属性
    innerHTML ==> 可取，可写，可赋值（覆盖）image.png
    innerText ==> 可取，可赋值 (老版本火狐不兼容) / textContent(火狐使用这个，老版本 IE 不好使)

    赋值会覆盖掉（能覆盖标签）
    下面的 innerText 让 span 没有了，所以赋值要谨慎
    image.png

    2、Element 节点的一些方法
    ele.setAttribute() //设置
    ele.getAttribute(); //取这个值
    image.png