6、JS-DOM：节点操作

1、节点概述：
a、网页中的所有内容都是节点(标签、属性、文本、注程等)，在DOM中，节点使用node来表示。
b、HTML DOM树中的所有节点均可通过 Javascript进行访问，所有HTML元素（节点）均可被修改，也可以
创建或除。

c、节点就是获取元素的新方法。

2、为什么学节点操作：
a、利用DOM提供的方法获取元素比较繁琐、逻辑性不强。

b、利用节点层级关系获取元素逻辑性强，但是兼容性差。

 

2、节点层级：

利用DOM树可以把节点划分为不同的层吸关系，常见的是父子兄层级关系

 

 

1、父节点：parentNode

    <div class="bigbox">

        <div class="box">

            

        </div>

    </div>

// 1、父节点：parentnode
    var box = document.querySelector('.box');
    var bigbox = document.querySelector('.bigbox');
// 得到的是离元素最近的父节点，如果没有返回为null
    console.log(box.parentNode);

　　

2、子节点：children

 

        var ul = document.querySelector('ul');
        console.log(ul.children);

// 获取 第一个 或者 最后一个 子节点：
　　　　

console.log(ul.children[0]);

console.log(ul.children[ul.children.length - 1]);