哈喽大家好，今天开始学习 gs 的节点操作。
节点操作是 dom 树里边每一个内容都叫节点，节点分为：
1. 元素节点，比如所有的标签，如 body、di、v、p 标签等等，这叫元素节点。
2. h、t、m、l 是根节点，根节点、根节点。
3. 还有属性节点，属性节点就是所有的属性，比如 herf、a 标选的 herf、class 等等。
4. 还有文本节点，文本节点就是所有的文本。
首先查找元素的节点，它跟数组还有对象都是一样的，都会有增删改查。首先是查找元素，元素的节点，它的节点关系，节点关系分父节点、子节点、子节点还有兄弟节点。
先来看父节点，父节点是通过元素的 note 属性，返回最近一级的父节点，找不到就返回 null，它的语法是子元素.点 note。这个方法直接在上边弄一个点 box1，点 box2。
先拿到 box2 的 document.点 variousdirector，box2，点 box2。
拿到它之后直接 console.log 是 box2.点 pardon，note 保存。
打开浏览器，控制台看，首先拿了之后就会直接先把 bose1 打印出来，如果不写点后面的属性，保存只会打印出 box2。
写上了之后就会把 box2 的父节点也打印出来，如果在 box1 外面还有一层，比如还有一层 box，把 box1 跟 box2 放到 box 里面，它也是只能是打印出 box1。
这样还想要 box1 最外层的 box，在后面可以接着写 print node。
box1 里面是 box2，有了这个节点操作，比如之前做的一点元素，这里一个框，一点这里的元素，整个元素就会删除掉或者是消失。
但是当时做的时候是获取到两个元素 box1 跟 box2，如果有了这个节点，学习了些节点操作，就只需要获取一个就行。
写一下，比如写一个 style.点 box1，等于它的长度是二百，加上它的宽度也是二百，它的背景颜色是一个红色。
box2 里边写一个 x，写一个 x，给 xbox2 报起来 positionOfASalute，top 是十像素，rat 也是十像素。
在 boss1 的父元素上面 position，这里会有一个小 x，一个叉号，就是一点击叉号整个元素就都没有了。之前写的是这里，还得需，要获取到获取到 const box 一等于 document.点 querySelector，还得获取到 box 一，但是现在有了这个父节点操作之后不需要了，直接就可以。
box2.点 addEventListener，一个点击事件，有点击事件之后 box2.点 print node，先拿到它的父节点，拿到它的父节点之后通过它的 style 标签的 display 属性改为 display 的样式，直接一点保存。
click box2 的把外面给外面这个 box 删了，直接点整个就消失了。而且还有一个优点，就比如这里复制三份，复制三份之后写一个 box1，给 box1 用 margin 二是像素，让它横过来 body 一个 display blacks black，让它横过来，横过来之后比如一点击就会少剪一个，再一点击没有效果了，就可以使用 for 循环的方式来给它删除。
就可以直接在这里快循环循环一个 leftInsideIndex 等于零，index 就小于 box2 的长度。
然后在这里面循环的 box2 的 index 的点 addEventListener 给它点，有一个点击事件，点击事件里面再循环的把每一个一二三的元素给拿到，拿到之后把 box1 的元素，box2 的元素拿到，拿到了之后把在点拿到它的父节点，将 style 的 display 改为。
然后打开浏览器，在这里点击，没效果，效果这里就改为 out，拿到它全部的 box2。
再来看，点击最后一个消失，点击第一个消失，点击最后一个消失。