js的文档对象模型

  DOM树
    文档：页面就是文档，在DOM中用document表示
    元素：页面标签就是元素，在DOM中用element表示
    节点：网页所有内容就是节点（标签、属性、文本、注释等），在DOM中用node表示
              DOM把以上内容看作对象

  DOM 文档对象模型
    js操作html、xml文档的api
    1998年10月
    IE中的DOM对象是以COM对象的形式实现的

  实例化
    1. 通过dom拿到我们想要的节点
        var myDiv = document.getElementById("myDiv");
        console.log(myDiv);
        var div1 = document.getElementById("div1");
        console.log(div1);

    2. 通过dom创建节点
        // 创建一个li节点
        var node = document.createElement("LI");
        // 创建一个text节点
        var textNode = document.createTextNode("Hello");
        // 将text节点追加到li节点上
        node.appendChild(textNode);
        // 找到id为myDiv的节点
        var myDiv = document.getElementById("myDiv");
        // 将刚刚创建的node节点追加为myDiv的子节点
        myDiv.appendChild(node);
  
  Document类型———表示整个html文档 
    属性 
      body       直接指向body元素
      head       获取html头部内容
      title      获取文档标题
      doctype    获取<!DOCTYPE> 兼容性不太强 很少用
      URL        获取完整的URL
      domain     获取域名
      referrer   获取链接到当前页面的那个页面的url
      images     获取页面所有的img对象 返回值HTMLCollection
      forms      获取所有的form对象 返回值HTMLCollection
      links      获取文档中带有href属性的a元素

    方法
      getElementById("")          
        作用：    通过元素的id获取元素节点
        调用者：document
        参数：    想要获取的元素id
        返回值：  找到的第一个元素，如果没有，返回null
      getElementsByClassName("app app1")
        作用：    通过元素的class name 获取元素节点
        调用者：  document
        参数：    为一个字符串 表示元素的类名 可以由空格隔开
        返回值：  HTMLCollection list 包含一个或多个元素 可以使用数组的操作方式
                  去处理结果
      getElementsByTagName("")
        作用：    通过元素的元素名（标签名）找到对应的元素
        调用者：  document
        参数：    为一个字符串 表示元素的元素名（标签名）
        返回值：  HTMLCollection list 包含一个或多个元素 可以使用数组的操作方式
                  去处理结果
      getElementsByName("")
        作用：    通过元素的name属性找到对应的元素
        调用者：  document
        参数：    为一个字符串 表示元素name
        返回值：  NodeList list 包含一个或多个元素 可以使用数组的操作方式
                  去处理结果

  Element类型
    属性
      id          元素在文档中的唯一标识符
      className   与元素的class特性相对应 可以重复 可以有多个 用空格分割
      title       与元素相关的附加说明信息
      src
      alt
    获取或设置属性
      设置属性
        node.className = "two";   //设置类名第一种方式
        node.setAttribute("class", "three"); //设置类名第二种方式

        setAttribute();
        作用：    给获取到的元素设置属性
        调用者：  要设置属性的元素
        参数：    两个参数 属性名 对应的值
        返回值：
        注意点：  要设置的值存在的话 修改原来的值 不存在的话 添加
      获取属性
        node.getAttribute("class")
        作用：    获取到的相应元素的某个属性
        调用者：   元素
        参数：    属性名
        返回值：  对应的属性值
        注意点：  
      移除属性
        myDiv.removeAttribute("id");
        作用：    移除相应元素的某个属性
        调用者：   元素
        参数：    属性名
        返回值：  
        注意点：  
    创建元素
      createElement();
        作用：    创建一个dom元素节点
        调用者：  document
        参数：    一个参数 ，要创建元素的标签名 在html中不区分大小写  但是在XML中区分大小写
        返回值：
        注意点：  
        var node = document.createElement("LI");
        // 创建一个text节点
        var textNode = document.createTextNode("Hello");
        // 将text节点追加到li节点上
        node.appendChild(textNode);
    兄弟、孩子节点属性
      firstElementChild         某个节点的第一个孩子元素节点
      lastElementChild          某个节点的最后一个孩子元素节点

      nextElementSibling        某个节点的下一个兄弟元素节点
      previousElementSibling    某个节点的上一个兄弟元素节点

      childElementCount         该节点子元素的数量
      innerHtml                 该元素的内容
      textContent               该元素内部的text

  Text类型
    length        // 文本长度
    appendData    
      作用：给文本节点 追加文本
      调用者：文本节点
      参数：要追加的文本内容
      var textNode = document.createTextNode("hello,");
      textNode.appendData("world");
    deleteData(0, 2);
      作用：删除文本
      调用者：文本节点
      参数：两个参数 开始的位置 要删除的数量
    insertData();
      作用：插入文本
      调用者：文本节点
      参数：两个参数 开始的位置 要插入的文本
        var textNode = document.createTextNode("hello,");
        textNode.insertData(6, "world!")
    replaceData();
      作用：替换文本
      调用者：文本节点
      参数：三个参数 开始的位置 要替换文本长度 替换的文本
        var textNode = document.createTextNode("hello,");
        textNode.replaceData(0, 2, "-"); // "-llo,"
    splitText()
      作用：  将一个文本节点分为两个
      调用者：文本节点
      参数： 分割点的位置
      返回值：分割好的后面的文本节点
        var textNode = document.createTextNode("helloworld");
        console.log(textNode); // "hello"
        console.log(textNode.splitText(5)); // "world"
    substringData()
      作用：  提取文本节点中的字符串
      调用者：文本节点
      参数： 两个参数 开始的位置 要提取文本的个数
      返回值：提取出来的字符串
      注意点：不改变原文本
        var textNode = document.createTextNode("helloworld");
        console.log(textNode.substringData(0, 5)); // hello
        console.log(textNode); // "helloworld"
    createTextNode()
      作用：  创建一个文本节点
      调用者：document
      参数： 文本内容
      返回值：
      注意点：
        var textNode = document.createTextNode("helloworld");

  Comment类型
    注释
    方法
      createComment();
      作用：创建注释节点
      var cNode = document.createComment("这是一个注释");