节点(一)

DOM 就是我们 html 结构中一个一个的节点构成的
不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点

DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
比如我们标签里面写的文字，那么就是文本节点
写在每一个标签上的属性，就是属性节点

1. 元素节点
   我们通过 getElementBy… 获取到的都是元素节点
2. 属性节点
   我们通过 getAttribute 获取的就是元素的属性节点
3. 文本节点
   我们通过 innerText 获取到的就是元素的文本节点

获取节点
1.childNodes：获取某一个节点下 所有的子一级节点
var oDiv = document.querySelector(‘div’)
console.log(oDiv.childNodes)

2.children ：获取某一节点下所有的子一级 元素节点

3.firstChild：获取某一节点下子一级的 第一个节点

4.lastChild：获取某一节点下子一级的 最后一个节点

5.firstElementChild：获取某一节点下子一级 第一个元素节点

6.lastElementChild：获取某一节点下子一级 最后一个元素节点

7.nextSibling：获取某一个节点的 下一个兄弟节点

8.previousSibling：获取某一个节点的 上一个兄弟节点

9.nextElementSibling：获取某一个节点的 下一个元素节点

10.previousElementSibling：获取某一个节点的 上一个元素节点

11.parentNode：获取某一个节点的 父节点

12.attributes：获取某一个 元素节点 的所有 属性节点

nodeType

nodeType：获取节点的节点类型，用数字表示

console.log(eleNode.nodeType) // 1
console.log(attrNode.nodeType) // 2
console.log(textNode.nodeType) // 3
nodeType === 1 就表示该节点是一个 元素节点
nodeType === 2 就表示该节点是一个 属性节点
nodeType === 3 就表示该节点是一个 注释节点

nodeName

nodeName：获取节点的节点名称
console.log(eleNode.nodeName) // LI
console.log(attrNode.nodeName) // test
console.log(textNode.nodeName) // #text
元素节点的 nodeName 就是 大写标签名
属性节点的 nodeName 就是 属性名
文本节点的 nodeName 都是 #text

nodeValue

nodeValue： 获取节点的值

console.log(eleNode.nodeValue) // null
console.log(attrNode.nodeValue) // 我是 ul 的一个属性
console.log(textNode.nodeValue) // 换行 + 空格
元素节点没有 nodeValue
属性节点的 nodeValue 就是 属性值
文本节点的 nodeValue 就是 文本内容

创建一个节点

createElement：用于创建一个元素节点

向页面中加入一个节点

appendChild：是向一个元素节点的末尾追加一个节点
语法： 父节点.appendChild(要插入的子节点)

insertBefore：向某一个节点前插入一个节点
语法： 父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)

 获取特殊元素的方式
         1、document.head
         console.log(document.head);
         2、document.body
         console.log(document.body);
         3、document.title  拿到title里面的内容
         console.log(document.title);
         4、 document.documentElement html标签
         console.log(document.documentElement);
         5、通过name属性获取元素
         console.log(document.getElementsByName("username"))