[JavaScript知识库]js学习之路（三）

1. DOM

/*
      DOM - Document Object Model 文档对象模型
        + 一套操作页面元素的属性和方法

      了解 DOM
        + DOM 是一个以树状结构存在的内容
        + DOM 的顶级是 document 表示当前文档
        + 因为我们 PC 端的文档是插入 chrome 浏览器里面运行
          => 所以再 PC 端, document 上面还有一个 window

      对 DOM 的操作
        + 从 document ~ 各种标签, 文本, 属性, 样式 的操作

      问题:
        + window 下面有一个 document 对还是不对
          => 对
    */ 

2. 获取 DOM 元素

/*
      获取 DOM 元素
        + 通过 JS 获取到页面中的元素, 进行操作
        + 两类标签
          1. 非常规标签
            1-1. html
              => document.documentElement
            1-2. head
              => document.head
            1-3. body
              => document.body
          2. 常规标签
            + 不是不能获取非常规标签, 只是一般不这么用
            2-1. getElementById()
              => 语法: 查找范围.getElementById('id名称')
              => 查找范围: document 或者一个 元素
              => 返回值:
                -> 如果有这个 id 名匹配的元素, 就是这个元素
                -> 如果没有这个 id 名匹配的元素, 那么就是 null
            2-2. getElementsByTagName()
              => 语法: 查找范围.getElementsByTagName('标签名')
              => 返回值: 是一个伪数组(数组常用方法用不了)
                -> 如果有这个标签名匹配的元素, 有多少获取多少
                -> 如果没有这个标签匹配的元素, 返回一个空的伪数组
            2-3. getElementsByClassName()
              => 语法: 查找范围.getElementsByClassName('类名')
              => 返回值: 是一个伪数组(数组常用方法用不了)
                -> 如果有这个类名匹配的元素, 有多少获取多少
                -> 如果没有这个类名匹配的元素, 返回一个空的伪数组
            2-4. getElementsByName()
              => 语法: 查找范围.getElementsByName('元素name属性的值')
              => 返回值: 是一个伪数组
                -> 如果有元素的 name 属性的值匹配, 那么由多少获取多少
                -> 如果没有元素的 name 属性值匹配, 那么就是空的伪数组
            2-5. querySelector()
              => 语法: 查找范围.querySelector('选择器')
              => 选择器: 能在 css 里面写的选择器, 这里都可以写
              => 返回值:
                -> 如果找到选择器匹配的元素, 返回第一个找到的内容
                -> 如果没有选择器匹配的元素, 返回 null
              => 特点: IE 低版本不支持
            2-6. querySelectorAll()
              => 语法: 查找范围.querySelectorAll('选择器')
              => 选择器: 能在 css 里面写的选择器, 这里都可以写
              => 返回值: 是一个伪数组
                -> 如果找到选择器匹配的元素, 有多少获取多少
                -> 如果没有选择器匹配的元素, 返回一个空的伪数组
              => IE 低版本不支持
    */

    // 1. 非常规标签
    // 1-1. html
    // var html = document.documentElement
    // console.log(html)

    // 1-2. head
    // var head = document.head
    // console.log(head)

    // 1-3. body
    // var body = document.body
    // console.log(body)

    // 2. 常规标签

    // 2-1. getElementById()
    // 再 document 范围下通过 id 名称查找一个叫做 btn 的元素
    // var btn = document.getElementById('btn')
    // console.log(btn)

    // 2-2. getElementsByTagName()
    // var box = document.getElementsByTagName('p')
    // console.log(box)
    // // 你想准确的拿到某一个元素, 要吗遍历, 要吗使用 [索引]

    // var div = document.getElementsByTagName('div')[0]
    // // 再 div 范围下通过标签名查找多个叫做 p 的元素
    // var p2 = div.getElementsByTagName('p')


    // 2-3. getElementsByClassName()
    // var box = document.getElementsByClassName('box')
    // console.log(box)

    // 2-4. getElementsByName()
    // 只要有元素 name 属性的值是 username 就能获取到
    // var inp = document.getElementsByName('username')
    // console.log(inp)

    // 2-5. querySelector()
    // 通篇查找 li
    // var box = document.querySelector('ul > li:nth-child(2)')
    // console.log(box)

    // 2-6. querySelectorAll()
    // var box = document.querySelectorAll('ul > li:nth-child(odd)')
    // console.log(box)

3. 获取 DOM 元素

 <!--
    元素的属性
      id / class / style / src / type / name / href / border / ... 叫做原生属性
        => style 是属性名, 这个属性的作用就是给元素设置内联样式
      index / abc / aaa / ... 自定义属性
        => 不是标签原生自带的属性, 是我们自己随便书写的一个属性
      data-xxx 开头的属性
        => 我们都叫做 H5 自定义属性
  -->
  <!-- <div id="box" class="box" style="color: red;font-size: 20px;">我是 div 标签</div>
  <div index="hello" abc="你好世界" aaa="100">我是 第二个 div 标签</div>
  <div data-index="1" data-id="box">H5 标准下</div> -->

  <div data-a="100"></div>

  <input type="text">

  <img src="" alt="">

  <script>
    /*
      操作元素属性
        + 使用 JS 语法操作标签上的三种属性
          1. 原生属性
            => 直接操作
            => 元素.属性名
          2. 自定义属性
            => setAttribute()
            => getAttribute()
            => removeAttribute()
          3. H5 自定义属性
            => 元素.dataset.xxxxxx

      原生属性
        + 语法: 元素.属性名
          => 读: 元素.属性名
            -> 获取元素该属性的值
          => 写: 元素.属性名 = '值'
            -> 设置该元素的该属性的值
        + 注意: class 除外, 操作 类名使用 元素.className

      自定义属性
        + 不能直接点语法操作
        + 三个方法
          1. setAttribute('属性名', '属性值')
            => 给元素标签上设置属性
          2. getAtrribute('属性名')
            => 获取元素上的属性的值
          3. removeAttribute('属性名')
            => 删除元素上的属性
        + 特点:
          1. 可以操作自定义属性, 可以操作原生属性
          2. 不管你设置什么数据类型, 当你再次从标签上拿到的时候, 都是字符串

      H5 自定义属性
        + 每一个元素身上有一个属性叫做 dataset
        + 里面包含了所有 H5 自定义属性
          => key 是除了 data- 以外的内容
          => value 就是这个属性的值
        + 操作 H5 的自定义属性
          => 直接再 dataset 里面进行操作就可以
        + 获取
          => 元素.dataset.名字
            -> 名字: 标签上写 data-a, 使用 a
        + 设置
          => 元素.dataset.名字 = '值'
            -> 名字: 如果你在这里写 a, 那么映射再标签上是 data-a

    */

    var div = document.querySelector('div')
    var inp = document.querySelector('input')
    var img = document.querySelector('img')


    // 3. H5 自定义属性
    // 获取元素标签上的 data-a 属性
    var str = div.dataset.a
    console.log(str)

    // 设置元素标签上的 data-hello 属性, 设置值为 world
    div.dataset.hello = 'world'

    // 删除元素标签上的 data-hello 属性
    // 直接删除 dataset 对象中的 hello 成员
    delete div.dataset.hello




    // 2. 自定义属性
    // 设置自定义属性
    // div.setAttribute('index', 100)
    // div.setAttribute('id', 'box')

    // 获取自定义属性
    // var str = div.getAttribute('index')
    // console.log(str)

    // 删除自定义属性
    // div.removeAttribute('abc')





    // 1. 原生属性
    // 给 div 设置一个 id 属性
    // div.id = 'box'
    // 读取 div 身上的 id 属性
    // console.log(div.id)
    // console.log(div)
    // 给 input 设置一下 type 属性
    // inp.type = 'password'
    // inp.value = 'hello world'

    // 给 img 标签设置 src 属性
    // img.src = 'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg'

4. 操作元素类名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 100%;
      height: 50px;
      /* background-color: skyblue; */
      /* display: none; */
      position: absolute;
      top: -50px;
      left: 0;
      background-color: skyblue;
      transition: top .5s linear;
    }

    div.box {
      /* background-color: pink; */
      /* display: block; */
      top: 0;
    }

    button {
      margin-top: 100px;
    }
  </style>
</head>
<body>

  <button>按钮</button>

  <div class="a b c d e f g h i j">我是 div 标签</div>

  <script>
    /*
      操作元素类名
        + 我们有两种方式操作元素类名
        1. 按照原生属性操作
          => 设置类名
            -> 元素.className = 'box'
          => 修改类名
            -> 元素.className = '新值'
          => 追加类名
            -> 元素.className = 元素.className + '新类名'
            -> 注意: 新类名前面要有一个 空格
          => 删除类名
            -> 获取类名
            1. 截取字符串
            2. 按照空格切开, 循环遍历, 找到一个你想删除的删除掉
            3. 再写一遍

        2. H5 标准提供给我们的 API
          => 元素身上有一个属性叫做 classList
          => 里面包含了所有元素身上设置的类名
          => 这个 classList 提供了一系列方法来操作
            1. add()
              => 语法: 元素.classList.add('你要添加的类名')
            2. remove()
              => 语法: 元素.classList.remove('你要移除的类名')
            3. toggle()
              => 语法: 元素.classList.toggle('你要切换的类名')
              => 当元素有这个类名的时候, 就删除
              => 当元素没有这个类名的时候, 就添加
    */

    // 0. 获取元素
    var div = document.querySelector('div')

    // 1. 原生属性方式操作类名
    // 1-1. 设置类名
    // div.className = 'box'

    // 1-2. 修改类名
    // div.className = 'box2'

    // 1-3. 追加类名
    // div.className += ' abc'


    // 2. H5 方式操作类名

    // 2-1. 添加类名
    div.classList.add('box')

    // 2-2. 删除类名
    div.classList.remove('h')

    // 2-3. 切换类名
    var btn = document.querySelector('button')
    btn.onclick = function () {
      // 执行这句代码的时候, 如果 div 没有 box 类名, 就添加
      // 执行这句代码的时候, 如果 div 有 box 类名, 就删除
      div.classList.toggle('box')
    }




    console.log(div.classList)
    </script>
</body>
</html>

5. 操作文本内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div>
    hello world
    <p>你好 世界</p>
    hello world
  </div>

  <input type="text">

  <script>
    /*
      操作元素文本内容
        + 分成三种
          1. innerHTML
          2. innerText
          3. value

      innerHTML
        + 一个读写的属性
        + 操作元素的超文本内容
        + 读: 获取元素内部的所有内容
          => 文本 + 标签全部内容
          => 以字符串的形式返回
          => 语法: 元素.innerHTML
        + 写: 设置元素内部的超文本内容
          => 完全覆盖是的书写
          => 语法: 元素.innerHTML = '你要设置的内容'
          => 当你的字符串里面出现 html 结构的时候, 会自动解析

      innerText
        + 一个读写的属性
        + 操作元素的文本内容
        + 读: 获取元素内部的所有文本内容
          => 包括子元素所有后代元素里面的文本内容
          => 标签内容不获取
          => 语法: 元素.innerText
        + 写: 设置元素内部的文本内容
          => 完全覆盖式的写入
          => 语法: 元素.innerText = '你要设置的值'
          => 当你的字符串里面出现 html 结构的时候, 不会自动解析原样输出

      value
        + 一个读写的属性
        + 操作表单元素的 value 属性
        + 读: 获取表单元素的 value 值
          => 语法: 元素.value
        + 写: 设置表单元素的 value 值
          => 语法: 元素.value = '你要设置的值'
    */

    // 0. 获取元素
    var div = document.querySelector('div')
    var inp = document.querySelector('input')

    // 1. innerHTML
    // 1-1. 获取元素的超文本内容
    // var str = div.innerHTML
    // console.log(str)
    // console.log(typeof str)

    // 1-2. 设置元素的超文本内容
    // div.innerHTML = '<span>我是新来的内容</span>'


    // 2. innerText
    // 2-1. 获取元素的文本内容
    // var str = div.innerText
    // console.log(str)

    // 2-2. 设置元素的文本内容
    // div.innerText = '<span>我是新来的内容</span>'



    // 3. value 属性
    // 3-2. 设置元素的 value 值
    inp.value = '你好 世界'

    // 3-1. 获取元素的 value 值
    var str = inp.value
    console.log(str)
  </script>
</body>
</html>

6. 操作元素样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>

  <div id="box" style="width: 100px"></div>

  <script>
    /*
      操作元素样式
        + 样式分成两个大类
          1. 行内样式
          2. 非行内样式

      获取元素的样式
        1. style 的方式
          => 利用原生属性的方式
          => 元素.style
          => 获取到的内容是一个对象, 里面包含元素所有的可设置样式
          => 你想获取那一个样式的值, 就从对象里面获取就可以了
          => 但是 **只能获取到行内样式**
        2. 获取非行内样式
          2-1. window.getComputedStyle() 方法
            => 标准浏览器
            => 语法: window.getComputedStyle(要获取样式的元素)
            => 返回值: 一个对象, 里面包含所有可设置样式, 每一个样式都有值, 那你没有设置的有默认值
            => 你需要那一个样式, 直接再找个对象里面访问就可以了
          2-2. currentStyle 属性
            => IE 低版本
            => 语法: 要获取样式的元素.currentStyle
            => 得到的就是一个对象, 里面包含元素的所有可设置样式, 每一个样式都有值
            => 你需要哪一个样式, 直接再对象里面查找就可以了
        说明:
          + 当你获取样式的时候
          + 如果你使用 点语法
            -> 你获取带有中划线的样式要转化成驼峰的方式
          + 如果你使用 数组关联语法
            -> 你可以写中划线
      设置元素得样式
        + 只有一种方式
          => 设置元素得行内样式
          => 前端 JS 理论上是不可以设置元素得非行内样式
            -> 如果你要修改非行内样式
            -> 是需要修改 html 文件或者 css 文件得
            -> 但是我们前端 JS 不能操作电脑上得文件
        + 设置行内样式
          => 语法: 元素.style.样式名 = '值'




      扩展: 短路表达式
        + 什么情况用短路表达式兼容
          => 方法或者属性执行没有问题, 只是拿不到值得时候
        + 前提: 你的代码执行不能报错
    */

    // 0. 获取元素
    var div = document.getElementById('box')

    // 1. style 方式获取样式
    // console.log(div.style)
    // // 访问 div 元素的原生属性 style 里面的 width 值
    // console.log(div.style.width)
    // // 访问 div 元素的原生属性 style 里面的 height 值
    // // 但是 div 的 style 属性里面没有 height 这个值
    // console.log(div.style.height)

    // 2. 获取非行内样式
    // 标准浏览器
    // var style = window.getComputedStyle(div)
    // console.log(style.width)
    // console.log(style.height)
    // console.log(style.backgroundColor)
    // console.log(style['background-color'])

    // IE 低版本
    // var style = div.currentStyle
    // console.log(style.width)
    // console.log(style.height)
    // console.log(style.backgroundColor)
    // console.log(style['background-color'])


    // 3. 给元素设置样式
    // 只能设置行内样式
    div.style.float = 'right'


    /*
      自己封装一个方法去兼容

      1. 准备一个函数, 接收几个参数
        => 要获取样式得元素
        => 要获取什么样式
      2. 函数内部处理兼容
        => 为什么会报错 ?
        => window.getComputedStyle()
          -> IE 报错, 对象不支持 getComputedStyle 属性或方法
          -> 谷歌报错, window.getComputedStyle is not a function
        => 判断一下 getComputedStyle 是不是再 window 里面
    */ 

    // function getStyle(ele, style) {
    //   // 判断 window 里面有没有 getComputedStyle()
    //   if ('getComputedStyle' in window) {
    //     // 标准浏览器
    //     return window.getComputedStyle(ele)[style]
    //   } else {
    //     // IE 低版本
    //     return ele.currentStyle[style]
    //   }
    // }

    // var res = getStyle(div, 'width')
    // console.log(res)


    // var type = 'width'
    // // 访问对象内的 type 成员
    // console.log( window.getComputedStyle(div).type)
    // // 因为 type 变量得值是 'window'
    // // 就相当于访问 对象['width']
    // console.log( window.getComputedStyle(div)[type])


  </script>
</body>
</html>

7.了解 DOM 节点

 /*
      了解 DOM 节点
        + 我们得页面是由一个一个得节点组成
        + 页面得每一个组成部分都是一个节点
          1. document
            => 一个页面中最大得节点, 只能有一个
            => 承载所有节点得容器, 不属于元素
            => 根节点
          2. html
            => 一个页面中最大的元素节点
            => 承载所有其他节点得
            => 根元素节点
          3. 元素节点
            => head / body / div / ul / table / ...
            => 只是不同得标签再页面中得表现形式不一样
            => 特点: 是页面得标签
          4. 文本节点
            => 每一段文本内容都是一个文本节点
            => 包含 换行 和 空格
            => 一般作为元素节点得子节点存在, 用来表示该元素节点再页面上显示得内容
          5. 属性节点
            => 注意: 属性节点不作为独立节点出现, 必须依赖元素
            => 因为没有元素, 属性节点就是文本
          6. 注释节点
            => 作为独立节点出现
            => 最为说明文本使用

      节点操作
        + 不光操作元素
        + 还要操作 注释节点 文本节点 属性节点
        + 获取节点(昨天: 获取元素节点)
          => 获取节点(包含但不限于元素节点)
        + 创建节点
          => 通过 JS 得语法来制造一个 标签 / 文本 / 注释 / ...
          1. createElement()
          2. createtextNode()
          3. createComment()
          4. createAttribute()
        + 插入节点
          => 把我创造得节点插入另一个节点中, 出现父子结构
          1. appendChild()
          2. insertBefore()
        + 删除节点
          => 把一个已经存在得节点移出
          1. removeChild()
          2. remove()
        + 替换节点
          => 我创造一个节点去替换一个已经存在得节点
          1. replaceChild()
        + 克隆节点
          => 把一个已经存在得节点复制一份一模一样得
          1. cloneNode()
            -> 参数默认为 false, 不克隆后代节点
            -> 选填 true, 克隆后代节点
    */

8.获取节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!--
    div 元素内有多少个 子节点
      1. 文本节点 (一个换行 + 四个空格 + hello + 一个换行 + 四个空格)
      2. 元素节点 (p标签)
      3. 文本节点 (一个换行 + 四个空格 + world + 一个换行 + 四个空格)
      4. 元素节点 (p标签)
      5. 文本节点 (一个换行 + 四个空格)
      6. 注释节点
      7. 文本节点 (一个换行 + 两个空格)
  -->
  <p>我是 div 上面得 p 标签</p>
  <div id="box" class="abc" index="hello world">
    hello
    <p>你好</p>
    wolrd
    <p>世界</p>
    <!-- 我是一段注释 -->
  </div>
  <p>我是 div 下面得 p 标签</p>

  <script>
    /*
      获取节点
        + 两个大类
          1. 方法
            + 获取元素节点
          2. 属性

      获取节点得属性
        1. childNodes
          + 语法: 元素.childNodes
          + 得到: 元素得所有 子节点(伪数组)
        2. children
          + 语法: 元素.children
          + 得到: 元素得所有 子元素节点(伪数组)
        3. firstChild
          + 语法: 元素.firstChild
          + 得到: 元素得第一个 子节点
        4. firstElementChild
          + 语法: 元素.firstElementChild
          + 得到: 元素得第一个 子元素节点
        5. lastChild
          + 语法: 元素.lastChild
          + 得到: 元素得最后一个 子节点
        6. lastElementChild
          + 语法: 元素.lastElementChild
          + 得到: 元素得最后一个 子元素节点

        7. previousSibling
          + 语法: 元素.previousSibling
          + 得到: 元素得上一个 兄弟节点(哥哥节点)
        8. previousElementSibling
          + 语法: 元素.previousElementSibling
          + 得到: 元素得上一个 兄弟元素节点(哥哥元素)
        9. nextSibling
          + 语法: 元素.nextSibling
          + 得到: 元素得下一个 兄弟节点(弟弟节点)
        10. nextElementSibling
          + 语法: 元素.nextElementSibling
          + 得到: 元素得下一个 兄弟元素节点(弟弟元素)

        11. parentNode
          + 语法: 元素.parentNode
          + 得到: 该元素得 父节点
          + 父节点: 大部分得时候是元素, 有特殊得 document
        12. parentElement
          + 语法: 元素.parentElement
          + 得到: 该元素得 父元素节点

        13. attributes
          + 语法: 元素.attributes
          + 得到: 该元素得所有 属性节点
    */

    // 0. 获取元素
    var div = document.querySelector('div')

    // 1. childNodes
    // var child = div.childNodes
    // console.log(child)

    // 2. children
    // var childEle = div.children
    // console.log(childEle)

    // 3. firstChild
    // var first = div.firstChild
    // console.log(first)

    // 4. firstElementChild
    // var firstEle = div.firstElementChild
    // console.log(firstEle)

    // 5. lastChild
    // var last = div.lastChild
    // console.log(last)

    // 6. lastElementChild
    // var lastEle = div.lastElementChild
    // console.log(lastEle)

    // 7. previousSibling
    // var prev = div.previousSibling
    // console.log(prev)

    // 8. previousElementSibling
    // var prevEle = div.previousElementSibling
    // console.log(prevEle)

    // 9. nextSibling
    // var next = div.nextSibling
    // console.log(next)

    // 10. nextElementSibling
    // var nextEle = div.nextElementSibling
    // console.log(nextEle)

    // 11. parentNode
    // var parent = div.parentNode
    // console.log(parent)

    // 12. parentElement
    // var parentEle = div.parentElement
    // console.log(parentEle)

    // 13. attributes
    // var attrs = div.attributes
    // console.log(attrs)
  </script>
</body>
</html>

9.节点属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div id="box" class="containr">
    <!-- 你好 世界 -->
    hello world
  </div>

  <script>
    /*
      节点属性
        + 属性节点
          => 元素身上放的属性
          => 每一个属性是一个节点
        + 节点属性
          => 用来描述找个节点得信息
          => 不同的节点有相同得属性名, 但是值不一样
          => 例子:
            -> 元素节点: 编号 001
            -> 属性节点: 编号 002
        + 节点属性有三个
          1. nodeType
            => 以数字得形式来表示一个节点类型
            => 一种节点得编号
            => 元素节点: 1
            => 属性节点: 2
            => 文本节点: 3
            => 注释节点: 8
          2. nodeName
            => 节点得名称
            => 元素节点: 大写标签名(全大写)
            => 属性节点: 属性名
            => 文本节点: 所有文本节点名称全部叫做 #text
            => 注释节点: 所有注释节点名称全部叫做 #comment
          3. nodeValue
            => 节点的值
            => 元素节点: null
            => 属性节点: 属性值
            => 文本节点: 文本内容(包含换行和空格)
            => 注释节点: 注释内容(包含换行和空格)
    */

    // 0. 准备一系列节点
    // 元素节点
    var div = document.querySelector('div')
    // 属性节点
    var attr = div.attributes[0]
    // 文本节点
    var text = div.childNodes[2]
    // 注释节点
    var comment = div.childNodes[1]

    console.log('元素节点 ', div)
    console.log('属性节点 ', attr)
    console.log('文本节点 ', text)
    console.log('注释节点 ', comment)

    console.log('===========================')

    // 节点属性 - 节点类型
    // console.log('元素节点 ', div.nodeType)
    // console.log('属性节点 ', attr.nodeType)
    // console.log('文本节点 ', text.nodeType)
    // console.log('注释节点 ', comment.nodeType)

    // 节点属性 - 节点名称
    // console.log('元素节点 ', div.nodeName)
    // console.log('属性节点 ', attr.nodeName)
    // console.log('文本节点 ', text.nodeName)
    // console.log('注释节点 ', comment.nodeName)

    // 节点属性 - 节点的值
    console.log('元素节点 ', div.nodeValue)
    console.log('属性节点 ', attr.nodeValue)
    console.log('文本节点 ', text.nodeValue)
    console.log('注释节点 ', comment.nodeValue)
  </script>
</body>
</html>

10.创建节点

 /*
      创建节点
        + 使用 JS 的语法来创造一个节点出来

      1. createElement()
        + 语法: document.createElement('标签名')
        + 返回值: 一个元素节点
      2. createTextNode()
        + 语法: document.createTextNode('文本内容')
        + 返回值: 一个文本节点, 不是字符串
      3. createComment()
        + 语法: document.createComment('注释内容')
        + 返回值: 一个注释节点
      4. createAttribute()
        + 语法: document.createAttribute('属性名')
          => 添加属性值, 节点.value = '属性值'
        + 返回值: 一个属性节点
    */

    // 1. 创建元素节点
    var div = document.createElement('div')
    console.log(div)

    // 2. 创建文本节点
    var text = document.createTextNode('hello world')
    console.log(text)

    // 3. 创建注释节点
    var comment = document.createComment('我是一段注释内容')
    console.log(comment)

    // 4. 创建属性节点
    var attr = document.createAttribute('id')
    attr.value = 'box'
    console.log(attr)
    // 把找个节点添加到 div 身上

11.插入节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div class="box">
    <!-- 我把创建的节点插入到这个 div 里面 -->
    <p>我是 div 里面本身的 p 标签</p>
  </div>

  <script>
    /*
      插入节点
        + 把一个节点插入到另一个节点里面

      1. appendChild()
        + 语法: 父节点.appendChild(子节点)
        + 作用: 把子节点插入到父节点里面, 放在最后一个节点的位置

      2. insertBefore()
        + 语法: 父节点.innserBefore(要插入的子节点, 哪一个子节点前面)
        + 作用: 把子节点插入到指定父节点的指定子节点前面
    */

    // 0. 获取元素
    var box = document.querySelector('div')
    var p = document.querySelector('p')

    // 0. 创建一个节点
    var span = document.createElement('span')
    span.innerHTML = '我是新来的 span 节点'

    // 0. 再创建一个
    var h1 = document.createElement('h1')

    // 1. appendChild()
    // 把 span 节点插入到 box 节点里面
     box.appendChild(span)
    // 把 span 放在 h1 里面
    h1.appendChild(span)
    // 把 h1 放在 box 里面
    box.appendChild(h1)

    // 2. insertBefore()
    // 把 span 追加到 h1 里面
    h1.appendChild(span)
    // 把 h1 插入到 box 节点里面的 p 节点前面
    box.insertBefore(h1, p)
  </script>
</body>
</html>

12.删除节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div>
    <p>我是 div 里面得 p 标签</p>
  </div>

  <script>
    /*
      删除节点
        + 删除一个已经存在的节点
        + 可以再创建的节点里面删除, 也可以直接再页面元素里面删除

      1. removeChild()
        + 语法: 父节点.removeChild(子节点)
        + 作用: 把子节点从父节点里面移出

      2. remove()
        + 语法: 节点.remove()
        + 作用: 把自己移出父节点
    */

    // 0. 获取元素
    var div = document.querySelector('div')
    var p = document.querySelector('p')

    // 1. removeChild()
    // div.removeChild(p)

    // 2. remove()
    // 把 div 从自己的父节点(body) 里面移出
    // div.remove()
  </script>
</body>
</html>

13.替换节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div>
    <p>我是 div 里面本身的 p 标签</p>
  </div>

  <script>
    /*
      替换节点:
        + 用一个节点替换一个已经存在的节点
        + 可以直接替换页面元素, 也可以替换我们自己创建的节点

      1. replaceChild()
        + 语法: 父节点.replaceChild(新节点, 旧节点)
        + 作用: 再父节点下, 用新节点替换旧节点
    */

    // 0. 获取元素
    var div = document.querySelector('div')
    var p = document.querySelector('p')
    // 0. 创建元素
    var span = document.createElement('span')
    span.innerHTML = '我是新来的 span 标签'

    // 1. replaceChild()
    // div.replaceChild(span, div.firstChild)
    // console.log(div.childNodes)
  </script>
</body>
</html>

14.克隆节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 30px;
    }

    button {
      width: 200px;
      height: 30px;
    }
  </style>
</head>
<body>

  <div id="box" class="box">
    <button>按钮</button>
  </div>

  <hr>
  <hr>

  <script>
    /*
      克隆节点
        + 把某一个节点复制一份一摸一样出来

      1. cloneNode()
        => 语法: 节点.cloneNode(参数)
          -> 参数选填, 默认是 false, 不克隆后代节点
          -> 我们可以选填 true 表示克隆所有后代节点
        => 返回值: 一个克隆好的节点
    */

    // 0. 获取元素
    var div = document.querySelector('div')

    // 1. cloneNode()
    // var cloneDiv = div.cloneNode(false)
    var cloneDiv = div.cloneNode(true)

    // 2. 插入页面
    document.body.appendChild(cloneDiv)

    console.log(cloneDiv)
  </script>
</body>
</html>