DOM的API_domoai有api吗-优快云博客

本文链接：https://blog.youkuaiyun.com/xibozi/article/details/108294583

本文深入探讨了DOM操作中的节点创建型API，包括createElement、createTextNode、cloneNode和createDocumentFragment的使用方法及注意事项，强调了这些API在创建和复制DOM节点时的重要性和潜在的性能优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节点创建型API
1 .createElement
createElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8以下浏览器不支持自定义标签

var div = document.createElement("div");

使用createElement的时候：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中

2 .createTextNodec
createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要append Child将其添加到HTML文档树中

var textNode = document.createTextNode("hello");

3 .cloneNode
cloneNode是用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 传入true
parent2.id = "parent2";

和createElement一样，cloneNode创建的节点只是游离有html文档外的节点，要调用appendChild方法才能添加到文档树中
如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id
调用接收的bool参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同
4 .createDocumentFragment
在这里插入图片描述

在这里插入图片描述

这段代码将按钮绑定了一个事件，这个事件创建了10个li节点，然后依次将其添加HTML文档中。
如果每次都添加一个li就会一直去调用DOM树就是元素大小和位置会被一直重新计算,如果元素他太多会造成性能问题!
优化后的代码主要是创建了一个fragment，每次生成的li节点先添加到fragment，最后一次性添加到list