节点操作
DOM节点
- DOM树: DOM 将 HTML文档以树状结构直观的表现出来，我们称之为 DOM 树 或者 节点树
- 节点（Node）: 是DOM树(节点树)中的单个点。包括文档本身、元素、文本以及注释都属于是节点。
节点的返回值
- 节点一般都有nodeType(节点类型)、nodeName(节点名称)、nodeValue（节点值）三个基本属性。
- 元素节点 nodeType 值为 1
- 属性节点 nodeType 值为 2
- 文本节点 nodeType 值为 3 （包含文本、空格、换行等）
查找节点
一、父节点查找：
子元素.parentNode返回最近一级的父节点对象，找不到返回null- 拓展：
子元素.parentNode.parentNode也可以多次套用找出 父亲的父亲
二、子节点查找：
1.children
- 语法：
DOM.children - 找不到返回 undefined
- 获得所有子元素节点，返回的是一个伪数组
2.children[n]
- 语法：
DOM.children[n] - 获取第n个子元素,自定义获取子元素
3.childNodes
- 语法：
DOM.childNodes - 返回目标所有子节点集合，为即时更新的集合。
- 包含文本节点，属性节点等
4.firstchild || lastchild
- 语法：
DOM.firstchild||DOM.lastchild - 返回子节点的第一个节点 || 返回子节点的最后一个节点
- 包含文本节点，属性节点等
5.firstElemetchild || lastElemetchild
- 返回子节点的第一个节点 || 返回子节点的最后一个节点
- 只返回元素节点
- IE9以上支持
三、兄弟节点查找：
1.nextElementSibling || previousElementSibling
- 语法：
DOM.nextElementSibling||DOM.previousElementSibling - 返回下一个兄弟节点 || 返回上一个兄弟节点
- 只返回元素节点
- IE9以上支持
2.nextSibling || previousSibling
- 语法：
DOM.nextSibling||DOM.previousSibling - 返回下一个兄弟节点 || 返回上一个兄弟节点
- 返回的节点包括属性节点、文本节点等
增加节点
增加节点两步：
- 1.创建一个新的节点
- 2.把创建的新的节点放入到指定的元素内部
创建节点
- 即创造一个新的网页元素
- 创建元素节点语法：
document.createElement('标签名')- 输出结果：
追加节点
- 要想在界面看到，还得插入到某个父元素中
1.append || prepend
- 语法：
DOM.append()||element.prepend() - 父元素最后一个子节点之后，插入节点元素 || 父元素第一个子元素的之前，插入节点元素
2.insertBefore
- 语法：
DOM.insertBefore(newNode,referenceNode) - 将元素添加到某个节点之前插入
- 参数一
newNode：将要插入的节点 - 参数二
referenceNode：被参照的节点（即要插在该节点之前），也可用children[n]等作为第二个参数。
删除节点
- 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从DOM树中删除。
- 若一个节点在页面中已不需要时，可以删除它
1.remove
- 语法：
DOM.remove() - 把对象从它所属的 DOM 树中删除
2.removeChild
- 语法：
DOM.removeChild() - 从DOM中删除一个子节点
- 返回值 ： 删除的节点
克隆节点
cloneNode
- 语法：
DOM.cloneNode(false / true) - 方法返回节点的一个副本，也称为拷贝节点
- 括号为 false 或者为空 则是浅拷贝，只克隆节点本身。
- 括号为 true 则是深拷贝，复制节点里的内容。
