HTML - DOM 元素 normalize() 方法

normalize() 方法用於透過刪除任何空文字節點來組合 HTML 元素內的相鄰文字節點。

語法

node.normalize();

返回值

此方法不返回任何值。

HTML DOM 元素“normalize()”方法示例

以下是 normalize() 方法的一些示例，演示了它如何合併 HTML DOM 元素內的相鄰文字節點。

合併相鄰文字節點

此示例向我們展示了 normalize() 方法如何透過刪除多餘的空格來組合巢狀在<div>元素內的相鄰文字節點。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>normalize() Method Example</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>normalize() Method</h2>
    <p>Combines the adjacent text nodes and 
        removing extra whitespace.
        </p>

    <div id="pt">
        <p>This is <em>some</em> text nodes</p>
        <div>-----spaces----</div>
        <p>Another     text node  with    spaces</p>
        <div>---spaces----and a;lll</div>
        <p>And <em>more   </em>  text nodes</p>
    </div>

    <div id="output"></div>

    <div style="margin-top: 20px;">
        <button onclick="normalizeAndDisplay()">
                Normalize Content
        </button>
    </div>

    <script>
        function normalizeAndDisplay() {
            const pDiv = document.getElementById('pt');
            pDiv.normalize();

            const outputDiv=document.getElementById('ot');
            outputDiv.innerHTML = 
            `<p><strong>Normalized HTML:</strong></p>
            ${pDiv.innerHTML}`;

            // Remove spacer elements from output
            const spacerElements = 
            outputDiv.querySelectorAll('div');
            spacerElements.forEach(element => {
                element.remove();
            });
        }
    </script>
</body>

</html>

動態合併和規範化元素

此示例演示了 normalize() 方法的動態用法。單擊按鈕後，它將組合並規範化 HTML 元素的內容。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>normalize() Method Example</title>
</head>

<body>
    <h1>The Element Object</h1>
    <h2>The normalize() Method</h2>
    <p>Add Text Normalize</p>
    <p id="paragraph">Click one button to add text to this 
        paragraph, click the other button to normalize the paragraph.
    </p>

    <div class="button-container">
        <button onclick="addText()">Add Text</button>
        <button onclick="normalizeParagraph()">
            Normalize Paragraph
        </button>
    </div>

    <p id="output">The paragraph above has 
        <span id="child-count">1</span> child node(s).
    </p>

    <script>
        function addText() {
            const paragraph = document.getElementById
            ('paragraph');
            const newText = document.createTextNode
            (' Additional text.');
            paragraph.appendChild(newText);
            updateChildCount();
        }

        function normalizeParagraph() {
            const paragraph = document.getElementById
            ('paragraph');
            paragraph.normalize();
            updateChildCount();
        }

        function updateChildCount() {
            const childCount = document.getElementById
            ('paragraph').childNodes.length;
            document.getElementById
            ('child-count').textContent = childCount;
        }
    </script>
</body>

</html>

支援的瀏覽器

方法
normalize()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面