前端JS 操作DOM节点的方法总结

在原生js中，如何对dom结构进行添加、移除、移动、复制顿号创建等操作，以下是对dom结构操作的总结。

1. 创建新节点的方法

createElement 创建一个具体元素对象

createElement是创建了具体元素对象，想在页面上显示需要通过添加DOM节点的方法配合

//创建一个select标签元素
let test = document.createElement("select")
//为test对象添加option值
test.options[0] = new Option("测试选项1","")
test.options[1] = new Option("测试选项2","")
DomNode.appendChild(test)

运行截图

createDocumentFragment 创建一个DOM片段

createDocumentFragment()本方法是创建了一个虚拟的节点对象，如果我们用的createElement方法，每次对文档的插入都会引发重绘和回流，也就是页面会重新进行渲染，降低了运行效率，我们可以通过渲染DOM操作的次数来提高效率。

因为createDocumentFragment()是只存在于内存的片段，所以讲子元素插入到片段中不会引发页面回流，我们可以通过该方法优化js对页面操作DOM节点的操作。

    let DomNode = document.getElementById("DomNode")
    let  frag = document.createDocumentFragment()
    for(let i = 0;i < 3;i++) {
        let li = document.createElement("li")
        li.innerHTML = "你好"+i
        frag.appendChild(li)
    }
    DomNode.appendChild(frag)

运行截图

但createDocumentFragment()也有相对于createElement相对麻烦的地方，createElement创建的元素可以进行多次重复操作，添加之后在文档中删除依旧可以进行再添加等操作，但createDoucmentFragment不行，添加后不能在进行操作了，它创建的元素是一次性的。更多细节在

https://blog.csdn.net/qiao13633426513/article/details/80243058 这篇文章里。

2. 添加、移除、替换、插入

appendChild 添加节点

appendChild方法可以向节点的子节点列表的末尾添加新的子节点

removeChild 移除节点

removeChild方法可以从子节点列表中删除某个节点，删除成功返回该节点，否则返回Null

let DomNode = document.getElementById("DomNode")
console.log(DomNode.removeChild(document.getElementById("RemoveNode")))

运行截图：

replaceChild 替换节点

replaceChild实现子节点的替换，返回被替换对象节点。

    let ReplaceDom = document.getElementById("ReplaceDom")
    let new1  = document.createElement("li")
    new1.textContent = "我是新的"
    console.log(ReplaceDom)
    console.log(ReplaceDom.replaceChild(new1,ReplaceDom.firstElementChild))

运行截图

insertBefore 插入节点

insertBefore可以在参考节点前插入一个拥有指定父节点的子节点，返回插入对象节点

    let Before = document.createElement("li")
    Before.textContent = "我是插入在父节点前的数据"
    ReplaceDom.insertBefore(Before,ReplaceDom.firstChild)

运行截图：

3. 查找

getElementsByTagName 返回带有指定标签名的对象的集合

getElementsByName得到的是标签的类数组对象，即使只有一个元素，也会封装到数组中返回。

    let TagName = document.getElementsByTagName('div')
    console.log(TagName)

运行截图：

getElementsByName 返回拥有指定name的节点对象集合

getElementsByName返回的是类数组对象，和getElementsByName类似，getElementById和getElementsByName不同的地方就是指定id整篇文档只能存在一个，而指定name整篇文档可以存在多个，且即使文档中指定name的元素节点只有一个，依旧会返回一个类数组对象。

    let ByName = document.getElementsByName('wohao')
    console.log(ByName)

运行截图：

getElementById 返回指定id的节点对象

getElementById 获取一个元素节点对象，根据元素的id属性获取一个元素节点，且只会返回一个对象，如果文档中存在多个相同id节点，只会返回第一个元素节点。