HTML DOM normalize()メソッドとは？テキストノードの正規化をわかりやすく解説
normalize()メソッドとは
HTML DOMのnormalize()メソッドは、指定したノード内にある空のテキストノードを削除し、隣接するテキストノードどうしをひとつのノードに結合するためのメソッドです。
JavaScriptでDOMを動的に操作していると、意図せず空のテキストノードが残ったり、複数のテキストノードが連続して存在したりすることがあります。normalize()メソッドを使えば、こうした不要なノードを一括で整理でき、childNodesリストをクリーンな状態に保つことができます。
構文
normalize()メソッドの基本的な呼び出し方は以下の通りです。
document.normalize()
なお、normalize()はdocumentオブジェクトだけでなく、個々の要素ノードに対しても呼び出すことができます。後述のサンプルでは、特定のdiv要素に対してnormalize()を実行しています。
使用例
以下のサンプルでは、テキストボックスに入力した内容からテキストノードを作成し、「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」ボタンをクリックした後 − 空のテキストノードが作成され、テキストノードの総数が増加します。
入力欄に文字列を入力して「Create Text Node」ボタンをクリックした後 − 入力した値を持つテキストノードが作成されます。
「Normalize」ボタンをクリックした後 − 空のテキストノードが削除され、テキストノードの総数が減少します。
「Normalize」ボタンをクリックした後 − 隣接するテキストノードが結合され、ノード全体が整理された状態になります。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや