Phương thức normalize() trong HTML DOM

Giới thiệu

Phương thức normalize() trong HTML DOM loại bỏ các Text Node rỗng (empty Text Nodes) và gộp các Text Node liền kề (adjacent Text Nodes) từ một node được chỉ định.

Cú pháp

Gọi normalize():

document.normalize()

Ví dụ

Ví dụ tạo nhiều Text Node (kể cả rỗng), sau đó dùng normalize() để gộp và xóa node rỗng.

<!DOCTYPE html> <html> <head> <title>HTML DOM normalize()</title> <style> 
  form { width:70%; margin: 0 auto; text-align: center; } 
  * { padding: 2px; margin:5px; } 
  input[type="button"] { border-radius: 10px; } 
</style> </head> <body> 
  <form> 
    <fieldset> 
      <legend>HTML-DOM-normalize()</legend> 
      <input type="text" id="textSelect" placeholder="type here..."> 
      <input type="button" onclick="makeTextNode()" value="Create Text Node"> 
      <input type="button" onclick="normalizeDocument()" value="Normalize"> 
      <div id="appendedNodes">All Text Nodes: </div> 
      <div id="divDisplay"></div> 
    </fieldset> 
  </form> 
  <script> 
    var divDisplay = document.getElementById("divDisplay"); 
    var textSelect = document.getElementById("textSelect"); 
    var appendedNodesDiv = document.getElementById("appendedNodes"); 
    divDisplay.textContent = 'Total Text Nodes: ' + appendedNodesDiv.childNodes.length; 
    function makeTextNode() { 
      var textNode = document.createTextNode(textSelect.value); 
      appendedNodesDiv.appendChild(textNode); 
      if(textSelect.value === '') 
        divDisplay.textContent = 'Empty Text Node Created'; 
      else 
        divDisplay.textContent = 'Text Node Created with value: ' + textSelect.value; 
      divDisplay.textContent += ', Total Text Nodes: ' + appendedNodesDiv.childNodes.length; 
    } 
    function normalizeDocument() { 
      appendedNodesDiv.normalize(); 
      divDisplay.textContent = 'Total Text Nodes: ' + appendedNodesDiv.childNodes.length; 
    } 
  </script> </body> </html>

Kết quả

Trước khi nhấn nút nào:

Sau khi nhấn Create Text Node với input rỗng:

Sau khi nhấn Create Text Node với input có nội dung:

Sau khi nhấn Normalize: