js节点操作总结

一.层级关系的获取

在对一些元素进行节点操作的时候需要通过对其父节点以及其他有关系的节点来进行相关设置，以下为部分层级关系的获取

元素.parentNode  //获取父元素节点

元素.firstElementChild  //获取第一个子节点，也有firstChild来获取的，但是存在bug

元素.children  //获取所有子节点

元素.ownerDocument  //获取该节点文档根节点

元素.previousElementSibling //获取当前节点的前一个同级节点

元素.nextElementSibling //获取当前节点的后一个同级节点

二.创建新节点

var newnode = document.createElement("节点类型")
newnode.innerHTML = "创建的节点内容"

三.追加节点

找到要追加节点的父元素

父元素.appendChild(追加的节点)

追加的节点一般由一二中的方法创建一个节点，也可以是克隆的节点

四.克隆节点

要克隆的节点.cloneNode(true)  //传入参数true则复制所有节点内容

此处的要克隆的节点经常会用层级关系来获取

五.插入节点

直接父元素.insertBefore(要插入的节点，插入位置的后一个节点)
//在使用的时候前面的父元素必须是新旧元素共同的父元素

注意！！在对table操作时会自动出现tbody,使得tr的直接父元素不再是table，一般用HTML DOM来对表格进行操作

六.移除节点

父节点.removeChild(要移除的节点)

七.替换节点

父节点.replaceChild(要换成的节点，被替换的节点)

八.HTML DOM来对table进行操作

tableb表格对象

属性：rows

返回包含表格中所有行的一个数组

方法：

insertRow()在表格中插入一个新行

deleteRow()从表格中删除一行

tableRow表格行对象

属性：

Cells 返回包含行中所有单元格的一个数组

rowIndex 返回该行在表格中的位置

方法：

insertCell() 在一行中指定的位置插入一个空 的标签

deleteCell()删除行中指定单元格

tableCell单元格对象

属性：

cellIndex：返回单元格在某行中的位置

InnerHTML:设置或返回单元格的开始标签和结束标签之间的HTML

align设置或返回单元格内部数据的水平排列方式

className 设置或返回元素的class属性