开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

DOM节点

节点类型

    常用的三大类节点
        1.元素节点(又可以叫做标签节点)
            通过getElementBy..获取到的都是元素节点
        2.属性节点
            通过getAttribute获取到的都是属性节点
        3.文本节点
            通过innerText获取到的都是文本节点
            (这里容易搞错的就是几个我们在敲代码的过程中不可避免特殊的字
            符，比如：空格、回车，这些在我们的系统看来都将他们归于文本
            节点)

    其实还有两种不是很常用的节点，但还是做一下了解
        1.document节点(也叫做根节点)
        他是我们整个html文件中最大的节点
        2.注释节点
        这种节点一般不会再页面中显示，但还是会有这些节点占据空间
        
        <div class="box">
           楠楠
           <p>lalala</p>
           <!-- 我是一个小注释呀 -->
        </div>
        这是一个小案例，我们不妨猜一下这个box里面会有多少节点呢
        在看完下面的获取节点方式之后，我想咱们就应该能判断自己的
        答案对不对了^_^
        
        
        
        

获取节点的方式

两种方式 childNodes vs children

    childNodes 表示的是所有节点
    children 表示的是所有元素节点

    知道了这两种方式，对于上面的案例也就有了结果
    当我们用child这种方式来获取节点时，他展示的结果如下：
    /*
           1.\n     
             楠楠 
             \n  (text 文本节点) 
           2.<p>lalala</p> (p 元素节点)
           3. \n (text 文本节点)
           4.<!-- 我是一个小注释呀 --> (comment 注释节点)
           5. \n  (text 文本节点)
       */
       怎么样猜对了嘛^_^
       
   如果我们用另外一种children方式呢，他的结果是什么呢？
   我们在控制台输出一下：