DOM节点介绍以及获取

一、节点

1. 介绍节点

整个网页的组成部分有标签、文本（空格、换行）、注释和标签属性，我们将每一个组成部分都叫做节点。

2. 获取节点

经常使用到的节点（如下）：

父节点.children - 获取所有子节点

父节点.firstElementChild - 获取第一个标签子节点

父节点.lastElementChild - 获取最后一个标签子节点

子节点.parentElement - 获取父节点

节点.previousElementSibling - 获取上一个兄弟标签节点

节点.nextElementSibling - 获取下一个兄弟标签节点

先获取ul，通过ul获取其它标签内的属性
var ul=document.querySelector('ul')

01、获取某个标签内部的所有节点 - 标签对象.childNodes
console.log(ul.childNodes);

02.获取标签内的所有标签节点 - 标签对象.children
console.log(ul.children);

03.获取父标签内的第一个子节点 - 标签对象.firstChild
console.log( ul.firstChild );

04.获取父标签内的最后一个子节点  - 标签对象.lastChild
console.log(ul.lastChild);

05.获取父标签内的第一个子标签节点 - 标签对象.firstElementChild
var first = ul.firstElementChild
console.log(first);

06.获取父标签内的最后一个子标签节点  - 标签对象.lastElementChild
var last = ul.lastElementChild
console.log(last);

07.获取上一个兄弟节点 - 节点.previousSibling
console.log(last.previousSibling);

08.获取上一个兄弟标签节点 - 节点.previousElementSibling
console.log(last.piousElementSibling);

09.获取下一个兄弟节点 - 节点.nextSibling
console.log(first.nextSibling);

10.获取下一个兄弟标签节点 - 节点.nextElementSibling
var next = first.nextElementSibling
console.log(next);

11.获取父节点 - 子节点.parentNode
console.log(next.parentNode);

12.获取父标签节点 - 子节点.parentElement
var parent = next.parentElement
console.log(parent);

3. 节点操作

1、创建节点：
    document.createElement(标签名-字符串)

2、插入节点：
    父节点.appendChild(子标签-对象)
    父节点.insertBefore(新的子标签-对象，旧的子标签-对象)

3、替换节点：
    父节点.replaceChild(新的子标签-对象，旧的子标签-对象)

4、删除节点：
    父节点.removeChild(子标签-对象)

5、复制节点：
    节点.cloneNode(true)