JavaScript normalize()

admin發表於2020-04-14
JavaScriptORM

normalize() 方法可以刪除空文字節點和合並相鄰的文字節點。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
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.softwhy.com/" />
<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.softwhy.com");
    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;}

程式碼分析如下：
（1）.預設在 demo 中有一個子文字節點。
（2）.點選新增按鈕可以新增一個新的文字節點，此時 demo 具有兩個子文字節點。
（3）.點選另一個按鈕，可以將兩個文字節點合併成一個節點。

相關文章