一、document.normalize()
该方法用于:合并相邻的文本节点并删除空的文本节点
node.normalize();
Html+js代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//创建文本节点函数
function createTextNode(){
var textNode=document.createTextNode('刘德华');
var div=document.getElementsByClassName('demo')[0];
div.appendChild(textNode);
var span=document.getElementsByClassName('count')[0];
span.innerHTML=div.childNodes.length;
}
//合并文本节点函数
function normalTextNode(){
// 合并文本节点
document.normalize();
var div=document.getElementsByClassName('demo')[0];
var span=document.getElementsByClassName('count')[0];
span.innerHTML=div.childNodes.length;
}
window.onload=function(){
var create=document.getElementById('create');
var normal=document.getElementById('normal');
// 绑定"创建文本节点"事件处理函数
create.onclick=function(){
// 调用函数
createTextNode();
}
//绑定"合并文本节点"事件处理函数
normal.onclick=function(){
//调用函数
normalTextNode();
}
}
</script>
</head>
<body>
<div class="demo">刘德华</div>
<p><span class="count">1</span>个文本节点</p>
<input type="button" value="创建文本节点" id="create">
<input type="button" value="合并文本节点" id="normal">
</body>
</html>
点击“创建文本节点”按钮:
点击“合并文本节点”按钮: