JavaScript normalize()

红太狼 2020-05-24 15:37 932阅读 0赞

# JavaScript normalize()

normalize() 方法可以删除空文本节点和合并相邻的文本节点。

语法结构：

```html
node.normalize()
```

**浏览器支持：**

（1）.IE 浏览器支持此方法。

（2）.edge 浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera 浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safari 浏览器支持此方法。

**代码实例如下：**

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
#demo, #show {
  width: 180px;
  height: 30px;
  border: 2px dotted green;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: green;
}
</style>  
<script>
window.onload = ()=> {
  let addBt = document.getElementById("add");
  let normalizeBt = document.getElementById("normalize");
  let oP=document.getElementById("demo");  
  let oResult = document.querySelector("#show > span");
 
  addBt.onclick = ()=> {
    let txtNode = document.createTextNode("www.dandelioncloud.cn");
    oP.appendChild(txtNode);
    oResult.innerHTML = oP.childNodes.length;
  }
 
  normalizeBt.onclick = ()=> {
    oP.normalize();
    oResult.innerHTML = oP.childNodes.length;
  }
}
</script>
</head>
<body>
  <p id="demo">蒲公英云</p>
  <input type="button" id="add" value="添加文本节点"/>
  <input type="button" id="normalize" value="规格化段落"/>
  <p id="show"><span>1</span>个子节点</p>
</body>
</html>
```

代码运行效果截图如下：

![a:3:{s:3:\"pic\";s:43:\"portal/202004/14/194209xkvbckc9gjz3j5d0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}](C:\Users\kf\Downloads\194209xkvbckc9gjz3j5d0.png)

代码分析如下：
（1）.默认在 demo 中有一个子文本节点。
（2）.点击添加按钮可以添加一个新的文本节点，此时 demo 具有两个子文本节点。
（3）.点击另一个按钮，可以将两个文本节点合并成一个节点。