JavaScript学习笔记---DOM节点操作
## DOM操作
document object model 文档对象模型 操作节点，标签
## 获取子元素
1.childNodes 子节点（包含文本节点）
父元素.childNodes;
2.children 子节点（不包含文本节点）
父元素.children;
## 获取父元素
1.parentNode 直系父元素
子元素.parentNode
2.offsetParent 在父系元素中获取最近一个含有定位属性(值非static)的元素，若父系元素中都没有定位属性，则找到body元素
子元素.offsetParent
## 节点的基本属性
1.nodeType 【节点类型】 返回数字 1-12 常用 1、2、3、9
1-标签
2-属性 通过getAttributeNode获取
3-文本 文本节点
9-document 文档
2.nodeName 节点名 【大写标签名】
3.nodeValue 获取文本节点的内容
## 其他节点
1.第一个子节点
firstChild 【能取到文本节点】
父元素.firstChild
firstElementChild 【不会取到文本节点】 直接取到第一个标签节点
父元素.firstElementChild
2.最后一个子节点
lastChild 【能取到文本节点】
父元素.lastChild
lastElementChild 【不会取到文本节点】 直接取到最后一个标签节点
父元素.lastElementChild
3.下一个节点
nextSibling 【能取到文本节点】
元素.nextSibling
nextElementSibling 【不会取到文本节点】 直接取到下一个标签节点
元素.nextElementSibling
4.上一个节点
previousSibling 【能取到文本节点】
元素.previousSibling
previousElementSibling 【不会取到文本节点】 直接取到上一个标签节点
元素.previousElementSibling
## 操作节点
1.创建节点 创建文本 [需要追加]
创建节点：document.createElement('标签名');
创建文本：document.createTextNode('文本内容')
2.追加节点
appendChild
父元素.appendChild(要追加的元素); 【在末尾追加】
3.插入节点
insertBefore 在...之前
父元素.insertBefore(要插入的节点,参考节点)
4.删除节点
1.remove() 将该元素删除
元素.remove();
2.removeChild() 将某个元素中的某个子元素删除
父元素.removeChild(具体子元素)
5.替换节点
replaceChild
父元素.replaceChild(新的节点，被替换的节点)
6.复制节点
cloneNode
元素.cloneNode(boolean【选填】) true-标签+文本都拷贝 【默认】false-只拷贝标签不拷贝文本
## 获取元素方法
1.document.querySelector('css选择器/标签名'); 只能获取到第一个元素【适用于获取id】
2.document.querySelectorAll('css选择器/标签名'); 数组，通过下标取用【适用于类名、标签名】
## 获取/设置元素自定义属性
自定义属性：在标签中，自己定义属性名，自己赋属性值。
1.设置自定义属性 // 可以体现在结构中
setAttribute // 怎么设置就怎么获取
元素.setAttribute(自定义属性名，自定义属性值)
2.获取自定义属性
getAttribute 【元素原有属性也可以通过此方法获取，原有属性的设置与获取通常用.方法】
元素.getAttribute('属性名')
## 表格操作
1.获取表格 var tab = document.querySelector('table');
【基于整个表格获取】
获取表头： tHead
tab.tHead;
获取表身： tBodies 获取到的是个数组，需要通过下标取用
tab.tBodies[0]
获取表尾： tFoot
tab.tFoot;
获取行： rows 获取到的是个数组
tab.rows 所有行（包括表头表尾）
tab.tBodies[0].rows 表身中的所有行（不包括表头表尾的行）
获取列： cells 获取到的是个数组 行数rows必须明确下标
tab.tBodies[0].rows[0].cells // 表身中第一行所有列，通过下标取用
