js的DOM获取标签对象

        /*

            js的组成:ECMAJavaScript BOM(Browser Object Model)浏览对象模型

                     DOM(Document Object Model) 文档对象模型

        */

        // DOM

        // 获取标签的方法

        // 通过id获取

        // _box = document.getElementById("box")

        // 获得对象:<div id="box">idbox</div>

        // console.log(_box)

        // 通过class获取

        // _box = document.getElementsByClassName("box")

        // HTMLCollection(2) [div.box, div.box],获取所有的class为box的标签，伪数组

        // console.log(_box)

        // 选择第二个class为box的标签

        // <div class="box">类2box</div>

        // console.log(_box[1])

        // 通过标签名获得标签

        // _box = document.getElementsByTagName("div")

        // HTMLCollection(3) [div#box, div.box, div.box, box: div#box]

        // 获取所有的div的标签，伪数组

        // console.log(_box)

        // 选中第二个div标签

        // <div class="box">类1box</div>

        // console.log(_box[1])

        // 通过标签属性name获得标签

        // _box = document.getElementsByName("username")

        // NodeList(2) [input, input].获取两个

        // console.log(_box)

        // 选中第二个的value值  bbb

        // console.log(_box[1].value)

    </script>

    <script>

        // 常用的两种方法

        // 只能选择第一个元素  document.querySelector(".box  #box div name username")

        // _box = document.querySelector(".box")

        // // <div class="box">类1box</div>

        // console.log(_box)

        // 选中多个符合的元素  document.querySelectorAll

        // _box = document.querySelectorAll(".box")

        // NodeList(2) [div.box, div.box]

        // console.log(_box)

        // <div class="box">类2box</div>

        // console.log(_box[1])

        // 可以是复合选择器（结合css的复合选择器）

        _box = document.querySelectorAll(".fo>#ipt1")

        // NodeList [input#ipt1]

        console.log(_box)

    </script>

<!-- <div id="box" class="box" name="div">

        <h1>我是id为box的div的子标签h1标签</h1>

        <h2>我是id为box的div的子标签h2标签</h2>

    </div>

    <script>

        // dom节点  ：1.元素节点（标签） 2.属性节点  3.文本节点（空格换行符也是）

        var _box = document.querySelector('#box')

        // 得到的是html标签的所有内容

        // console.log(document.documentElement)

        // 获得div的子节点:NodeList(5) [text, h1, text, h2, text]  ,text就是div到h1之间的空格

        // 换行符。

        // console.log(_box.childNodes)

        // dom对象.children  只获取标签节点  :HTMLCollection(2) [h1, h2]

        // console.log(_box.children)

        // 通过下标获取h1标签  :<h1>我是id为box的div的子标签h1标签</h1>

        // console.log(_box.children[0])

        // 获取 第一个子元素节点：<h1>我是id为box的div的子标签h1标签</h1>

        // console.log(_box.firstElementChild)

        // 获取 最后一个子元素节点:<h2>我是id为box的div的子标签h2标签</h2>

        // console.log(_box.lastElementChild)

        // 获取 所有的子元素节点:HTMLCollection(2) [h1, h2]

        // console.log(_box.children)

        // 获取下一个兄弟元素节点:script标签

        // console.log(_box.nextElementSibling)

        // 获取上一个兄弟元素的节点：<h1>我是id为box的div的子标签h1标签</h1>

        // var _h2 = document.querySelector("h2")

        // console.log(_h2.previousElementSibling)

        // 两种获取父节点:  body标签

        // console.log(_box.parentElement)

        // console.log(_box.parentNode)

    </script> -->