DOM 问题合集

DOM 操作是什么？

一、DOM（Document Object Model）文档对象模型的一个集合

1. 现在的Vue和React框架应用十分广泛，程序员一般接触不到DOM操作。都是直接使用Vue和React封装好的进行操作。
2. 虽然Vue和React框架已经可以让我们方便快捷的操作DOM，但是如果你不会DOM操作肯定是不可以的。

二、DOM 的本质

1. 首先XML 指可扩展标记语言
   XML 被设计用来传输和存储数据。

2. 然后HTML是特定的XML，就是已经被规定了。你要弄个容器必须DIV，你要超链接必须a标签。各种的规范

3. 最后DOM是什么？DOM就是一个树，就是浏览器初始化好的树状结构。

三、获取DOM 的节点

1. getElementById("id")
2. getElementsByClassName("className")
3. getElementsByTagName("tagName")
4. querySelector(".className")(或者#id或者直接写tag)

四、property和attribute

1. property：修改对象属性，不回体现到HTML结构中。
2. attribute：修改HTML属性，会改变HTML结构。
3. 晾着都可能引起DOM 重新渲染。

五、对DOM的结构的操作

1. 添加节点：appendChild(Node newNode):将newNode 添加成当前节点的最后一个子节点；insertBefore(Node newNode,Node refNode):在ref节点之前插入newNode节点；replaceChild(Node newChild,Node oldChild):将oldChild节点替换成newChild节点。

2. 移除节点：removeChild(oldChild):删除oldChild子节点。

3. 复制节点：Node cloneNode(bo olean deep):复制当前节点，当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点，当为false时，表示进复制当前节点。

六、对DOM的结构的操作

const div1 =document.getElementById('div1');
//添加新节点
const p1 =document.createElement('p');
p1.innerHTML='this is p1';
div1.appendChild(p1)//添加创建的元素
//移动节点
const p2 =document.getElementById('p2')
div1.appendChild(p2)
//获取子元素列表
const div=document.getElementById('div1')
const child=div.childNodes
//获取父元素
const div1 =document.getElementById('div1')
const parent=div1.parentNode
// 删除节点
const div1=document.getElementById('div1')
const child = div1.childNodes
div1.removeChild(child[0])

七、DOM性能

1. DOM对内存操作是很昂贵的。
2. 对DOM的查询做缓存。
3. 将频繁操作改成一次性操作。

DOM查询做缓存

//不缓存DOM查询结果
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {
    //每次循环都会重新计算length，频繁进行DOM 查询
}
//缓存DOM查询结果
const plist = document.getElementsByTagName('p')
const length = plist.length
for (let i = 0; i < length; i++) {
    //缓存lengt查询结果，只进行一次查询
}

将多次操作改成一次操作

const listNode = document.getElementById('list')

// 创建一个文档片段，此时还没有插入到DOM树中去
const frag = document.createDocumentFragment()

// 执行插入

for (let i = 0; i < 10; i++) {
    const li = document.createElement('li')
    li.innerHTML = "list item" + x;
    frag.appendChild(li)
}

// 都完成之后，再插入到DOM树中去

listNode.appendChild(frag)`