在原生js中,如何对dom结构进行添加、移除、移动、复制顿号创建等操作,以下是对dom结构操作的总结。
创建新节点的方法
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)
运行截图
![](https://i-blog.csdnimg.cn/blog_migrate/28f89631f044f5dce68498b86e9879f6.png)
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)
运行截图
![](https://i-blog.csdnimg.cn/blog_migrate/963f715c29407f526135fb7328d2bd3f.png)
但createDocumentFragment()也有相对于createElement相对麻烦的地方,createElement创建的元素可以进行多次重复操作,添加之后在文档中删除依旧可以进行再添加等操作,但createDoucmentFragment不行,添加后不能在进行操作了,它创建的元素是一次性的。更多细节在
https://blog.csdn.net/qiao13633426513/article/details/80243058 这篇文章里。
添加、移除、替换、插入
appendChild 添加节点
appendChild方法可以向节点的子节点列表的末尾添加新的子节点
removeChild 移除节点
removeChild方法可以从子节点列表中删除某个节点,删除成功返回该节点,否则返回Null
let DomNode = document.getElementById("DomNode")
console.log(DomNode.removeChild(document.getElementById("RemoveNode")))
运行截图:
![](https://i-blog.csdnimg.cn/blog_migrate/956938c490af1c662e4427c8facd53e7.png)
replaceChild 替换节点
replaceChild实现子节点的替换,返回被替换对象节点。
let ReplaceDom = document.getElementById("ReplaceDom")
let new1 = document.createElement("li")
new1.textContent = "我是新的"
console.log(ReplaceDom)
console.log(ReplaceDom.replaceChild(new1,ReplaceDom.firstElementChild))
运行截图
![](https://i-blog.csdnimg.cn/blog_migrate/b0b7fbabff93cdee0231f6526599a113.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bb153499671e27975627659d90aed469.png)
insertBefore 插入节点
insertBefore可以在参考节点前插入一个拥有指定父节点的子节点,返回插入对象节点
let Before = document.createElement("li")
Before.textContent = "我是插入在父节点前的数据"
ReplaceDom.insertBefore(Before,ReplaceDom.firstChild)
运行截图:
![](https://i-blog.csdnimg.cn/blog_migrate/c53c7b655e29afc42d9e162dd1fe74bc.png)
查找
getElementsByTagName 返回带有指定标签名的对象的集合
getElementsByName得到的是标签的类数组对象,即使只有一个元素,也会封装到数组中返回。
let TagName = document.getElementsByTagName('div')
console.log(TagName)
运行截图:
![](https://i-blog.csdnimg.cn/blog_migrate/3e4d1a17c06f258b49a111eba684cdcb.png)
getElementsByName 返回拥有指定name的节点对象集合
getElementsByName返回的是类数组对象,和getElementsByName类似,getElementById和getElementsByName不同的地方就是指定id整篇文档只能存在一个,而指定name整篇文档可以存在多个,且即使文档中指定name的元素节点只有一个,依旧会返回一个类数组对象。
let ByName = document.getElementsByName('wohao')
console.log(ByName)
运行截图:
![](https://i-blog.csdnimg.cn/blog_migrate/8e3f82805cd915ed13f472382d19359e.png)
getElementById 返回指定id的节点对象
getElementById 获取一个元素节点对象,根据元素的id属性获取一个元素节点,且只会返回一个对象,如果文档中存在多个相同id节点,只会返回第一个元素节点。