DOM节点操作

一、层级关系的获取

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

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

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

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

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

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

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

二、创建新节点

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

三、追加节点

找到要追加节点的父元素

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

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

四、克隆节点

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

五、插入节点

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

六、移除结点

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

七、替换结点

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

转载：https://blog.csdn.net/w2515543429/article/details/81841200