เมธอด HTML DOM normalize()

เมธอด HTML DOM normalize() ลบ Text Nodes ที่ว่างเปล่า และรวม Text Nodes ที่ติดกันจากโหนดที่ระบุ

ไวยากรณ์ (Syntax)

การเรียกใช้ normalize():

document.normalize()

ตัวอย่างการใช้งาน

<!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>

ผลลัพธ์

ก่อนคลิกปุ่มใดๆ:

หลังจากคลิก 'Create Text Node' ด้วย input ว่าง:

หลังจากคลิก 'Create Text Node' ด้วย input ไม่ว่าง:

หลังจากคลิก 'Normalize':

หลังจากคลิก 'Normalize':