利用文档碎片处理结果
代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 初次渲染结构 -->
<div class="content-box">
<div class="title">我是标题</div>
<div class="title">介绍</div>
<div class="title">介绍</div>
<div class="title">介绍</div>
<div class="list-box">
<div class="handle-item">接口返回数据</div>
<div class="list-item">接口返回数据</div>
</div>
<div class="handle-item">接口返回数据</div>
<div id="footerId">
<div class="handle-item">接口返回数据</div>
</div>
</div>
</head>
<body>
<script type="text/javascript">
window.onload = ()=>{
handleDom()
}
function handleDom(){
// 获取当前dom 结构
const curDom = document.querySelector('.content-box')
// 创建文档碎片
const range = document.createRange()
// 创建虚拟节点用于处理当前的渲染的dom
const fragment = range.createContextualFragment(
`<div class="content-box-copy">${curDom?.innerHTML|| ''}</div>`
)
// 将指定的class = handle-item 替换成其他div
// 找到当前div集合
const handleDiv = fragment.querySelectorAll('div.handle-item')
if(handleDiv && handleDiv.length){
// 将当前的div元素换成空内容用于处理后续字符替换时不影响当前div
handleDiv.forEach(item=>{
item.outerHTML = '<div class="handle-item-copy"><div>'
})
}
// 剔除指定内容后获取文档碎片中的html字符串
const curDomCopy = fragment.querySelector('.content-box-copy')
// 处理需要替换的文本内容（）
const replaceHtml = curDomCopy?.innerHTML.replace(/介绍/g,'最新文本') || ''
// 处理字符之后插入文档碎片
curDomCopy.innerHTML = replaceHtml
// 获取handle-item-copy
const handleCopyDiv = fragment.querySelectorAll('div.handle-item-copy')
// 将原来抽离的dom 替换成新内容
if(handleCopyDiv && handleCopyDiv.length){
// 替换新结果
handleCopyDiv.forEach(item=>{
item.outerHTML ='<div class="handle-item">最新接口返回内容</div>'
})
}
// 替换处理之后的dom
curDom.innerHTML = curDomCopy.innerHTML
}
</script>
</body>
</html>
