DOM にホワイトスペースが存在すると、レイアウトの問題が発生したり、ホワイトスペースがある場所によっては、予期せぬ方法でコンテンツツリーの操作が困難になることがあります。この記事では、どのような場合に問題が発生するかを探り、その結果生じる問題を軽減するために何ができるかを見ていきます。
ホワイトスペースとは、スペース、タブ、改行 (正確には、CRLF シーケンス、キャリッジリターン、改行) のみで構成されたテキストの文字列のことです。これらの文字を使用することで、自分や他の人が読みやすいようにコードを整形することができます。実際、私たちのソースコードの多くはこれらのホワイトスペースであふれており、コードのダウンロードサイズを減らすために、本番のビルド段階でホワイトスペースを取り除く傾向があります。
HTML の場合、ホワイトスペースはほとんど無視されます。単語と単語の間のホワイトスペースは 1文字として扱われ、要素の開始と終了、要素外のホワイトスペースは無視されます。以下の最小限の例を見てみましょう。
<!DOCTYPE html> <h1> Hello World! </h1>
このソースコードには、DOCTYPE の後に 2 つの改行と <h1> 要素の前後と内部に空白文字の束が含まれていますが、ブラウザーは全く気にしていないようで、これらの文字が全く存在しないかのように "Hello World!" という言葉を表示しています。
{{EmbedLiveSample('HTML_largely_ignores_whitespace')}}
これは、ホワイトスペースがページのレイアウトに影響を与えないようにするためです。要素の周囲や内部に余白を作るのは CSS の仕事です。
しかし、ただ消えるだけではありません。
元の文書で HTML 要素の外にあるホワイトスペースはすべて DOM で表現されます。これは、エディターが文書の書式を保持するために内部的に必要です。これは、次のことを意味します。
例えば、次の文書を見てください。
<!DOCTYPE html>
<html>
<head>
<title>My Document</title>
</head>
<body>
<h1>Header</h1>
<p>
Paragraph
</p>
</body>
</html>
この DOM ツリーは次のように見えます。
DOM でホワイトスペースを保存することは多くの点で便利ですが、特定のレイアウトを実装するのが難しくなったり、DOM 内のノードを反復処理したい開発者にとっては問題が生じたりする場所があります。これらの問題と解決策については、後ほど見ていきましょう。
ほとんどのホワイトスペースは無視されますが、すべてが無視されるわけではありません。先ほどの例では、"Hello" と "World!" の間のホワイトスペースの一つは、ブラウザーでページがレンダリングされたときにまだ存在しています。ブラウザーエンジンには、どのホワイトスペースが有用でどれが不要かを決定する規則があります — これらは、少なくとも CSS テキストモジュールレベル 3、特に CSS の white-space プロパティとホワイトスペースの処理の詳細についての部分で規定されていますが、以下ではより簡単な説明を提供します。
もう一つ、本当に簡単な例を挙げてみましょう。簡単にするように、すべての空白を ◦ で、すべてのタブを ⇥ で、すべての開業を ⏎ で表現します。
例を示します。
<h1>◦◦◦Hello◦⏎ ⇥⇥⇥⇥<span>◦World!</span>⇥◦◦</h1>
これはブラウザーで次のようにレンダリングされます。
<h1> Hello
<span> World!</span> </h1>
{{EmbedLiveSample('Hidden_example')}}
<h1> 要素はインライン要素のみを含んでいます。実際にはこのようなものを含んでいます。
<span> で、中に空白と "World!" という語を含む)このため、インライン整形コンテキストと呼ばれるものを確立します。これは、ブラウザーエンジンが作業を行う存在する可能性のあるレイアウトレンダリングコンテキストの一つです。
このコンテキストの中では、ホワイトスペース文字の処理は次のように要約されます。
まず、改行の直前と直後の空白とタブはすべて無視されるので、以前のマークアップの例を参考にして、この最初の規則を適用すると、次のようになります。
<h1>◦◦◦Hello⏎ <span>◦World!</span>⇥◦◦</h1>
次に、タブ文字がすべて空白として扱われるので、この例は次のようになります。
<h1>◦◦◦Hello⏎ <span>◦World!</span>◦◦◦</h1>
次に、改行が空白に変換されます。
<h1>◦◦◦Hello◦<span>◦World!</span>◦◦◦</h1>
その後で、空白の直後に他の空白がある場合は (2 つが別々なインライン要素をまたぐ場合も含めて) 無視されるので、次のようになります。
<h1>◦Hello◦<span>World!</span>◦</h1>
そして、行頭と行末の一連の空白が削除されるので、ようやくこんな感じになります。
<h1>Hello◦<span>World!</span></h1>
このため、ウェブページを訪れた人は、ひどく字下げされた "Hello" に続いてもっとひどく字下げされた "World!" をその下の行に見かけるのではなく、ページの先頭にきれいに書かれた "Hello World!" という文言を見ることになります。
メモ: Firefox DevTools ではバージョン 52 以降、テキストノードの強調表示に対応しており、どのノードにホワイトスペース文字が含まれているかを正確に確認できるようになりました。純粋なホワイトスペースノードには "whitespace" ラベルが付けられます。
Above we just looked at elements that contain inline elements, and inline formatting contexts. If an element contains at least one block element, then it instead establishes what is called a block formatting context.
Within this context, whitespace is treated very differently. Let’s take a look at an example to explain how. We've marked the whitespace characters as before.
<body>⏎ ⇥<div>◦◦Hello◦◦</div>⏎ ⏎ ◦◦◦<div>◦◦World!◦◦</div>◦◦⏎ </body>
We have 3 text nodes that contain only whitespace, one before the first <div>, one between the 2 <divs>, and one after the second <div>.
This renders like so:
<body> <div> Hello </div> <div> World! </div> </body>
{{EmbedLiveSample('Hidden_example_2')}}
We can summarize how the whitespace here is handled as follows (the may be some slight differences in exact behavior between browsers, but this basically works):
Because we’re inside a block formatting context, everything must be a block, so our 3 text nodes also become blocks, just like the 2 <div>s. Blocks occupy the full width available and are stacked on top of each other, which means that we end up with a layout composed of this list of blocks:
<block>⏎⇥</block> <block>◦◦Hello◦◦</block> <block>⏎◦◦◦</block> <block>◦◦World!◦◦</block> <block>◦◦⏎</block>
This is then simplified further by applying the processing rules for whitespace in inline formatting contexts to these blocks:
<block></block> <block>Hello</block> <block></block> <block>World!</block> <block></block>
The 3 empty blocks we now have are not going to occupy any space in the final layout, because they don’t contain anything, so we’ll end up with only 2 blocks taking up space in the page. People viewing the web page see the words "Hello" and "World!" on 2 separate lines as you’d expect 2 <div>s to be laid out. The browser engine has essentially ignored all of the whitespace that was added in the source code.
Let's move on to look at a few issues that can arise due to whitespace, and what can be done about them. First of all, we'll look at what happens with spaces in between inline and inline-block elements. In fact, we saw this already in our very first example, when we described how whitespace is processed inside inline formatting contexts.
We said that there were rules to ignore most characters but that word-separating characters remain. When you’re only dealing with block-level elements such as <p> that only contain inline elements such as <em>, <strong>, <span>, etc., you don’t normally care about this because the extra whitespace that does make it to the layout is helpful to separate the words in the sentence.
It gets more interesting however when you start using inline-block elements. These elements behave like inline elements on the outside, and blocks on the inside, and are often used to display more complex pieces of UI than just text, side-by-side on the same line, for example navigation menu items.
Because they are blocks, many people expect that they will behave as such, but really they don’t. If there is formatting whitespace between adjacent inline elements, this will result in space in the layout, just like the spaces between words in text.
Consider this example (again, the whitespace characters in the HTML are marked so they are visible):
.people-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.people-list li {
display: inline-block;
width: 2em;
height: 2em;
background: #f06;
border: 1px solid;
}
<ul class="people-list">⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ ◦◦<li></li>⏎ </ul>
This renders as follows:
.people-list { list-style-type: none; margin: 0; padding: 0; }
.people-list li { display: inline-block; width: 2em; height: 2em; background: #f06; border: 1px solid; }
<ul class="people-list"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
{{EmbedLiveSample('Hidden_example_3')}}
You probably don't want the gaps in between the blocks — depending on the use case (is this a list of avatars, or horizontal nav buttons?), you probably want the element sides flush with each other, and to be able to control any spacing yourself.
The Firefox DevTools HTML Inspector will highlight text nodes, and also show you exactly what area the elements are taking up — useful if you are wondering what is causing the problem, and are maybe thinking you've got some extra margin in there or something!
There are a few ways of getting around this problem:
Use Flexbox to create the horizontal list of items instead of trying an inline-block solution. This handles everything for you, and is definitely the preferred solution:
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
If you need to rely on inline-block, you could set the font-size of the list to 0. This only works if your blocks are not sized with ems (based on the font-size, so the block size would also end up being 0). rems would be a good choice here:
ul {
font-size: 0;
...
}
li {
display: inline-block;
width: 2rem;
height: 2rem;
...
}
Or you could set negative margin on the list items:
li {
display: inline-block;
width: 2rem;
height: 2rem;
margin-right: -0.25rem;
}
You can also solve this problem by putting your list items all on the same line in the source, which causes the whitespace nodes to not be created in the first place:
<li></li><li></li><li></li><li></li><li></li>
When trying to do DOM manipulation in JavaScript, you can also encounter problems because of whitespace nodes. For example, if you have a reference to a parent node and want to affect its first element child using Node.firstChild, if there is a rogue whitespace node just after the opening parent tag you will not get the result you are expecting. The text node would be selected instead of the element you want to affect.
As another example, if you have a certain subset of elements that you want to do something to based on whether they are empty (have no child nodes) or not, you could check whether each element is empty using something like Node.hasChildNodes(), but again, if any target elements contain text nodes, you could end up with false results.
The JavaScript code below defines several functions that make it easier to deal with whitespace in the DOM:
/**
* スクリプト全体で、ホワイトスペースを以下のいずれかの文字として定義しています。
* "\t" TAB \u0009
* "\n" LF \u000A
* "\r" CR \u000D
* " " SPC \u0020
*
* JavaScript の \s は非改行スペース (および他のいくつかの文字) を含んでいる為
* このスクリプトでは使用しません。
*/
/**
* ノードのテキスト内容が完全に空白であるか判断
*
* @param nod CharacterData インターフェイスを実装したノード
* (例: Text, Comment, CDATASection ノード)
* @return nod のテキスト内容がすべてホワイトスペースであれば true
* それ以外は false
*/
function is_all_ws( nod )
{
// ECMA-262 第3版 の String および RegExp の機能を使用
return !(/[^\t\n\r ]/.test(nod.data));
}
/**
* 反復処理関数がノードを無視するべきかどうか判断
*
* @param nod DOM1 の Node インターフェイスを実装したノード
* @return ノードが次のいずれかであれば true:
* 1) すべてホワイトスペースである Text ノード
* 2) Comment ノード
* それ以外は false
*/
function is_ignorable( nod )
{
return ( nod.nodeType == 8) || // コメントノード
( (nod.nodeType == 3) && is_all_ws(nod) ); // 全空白テキストノード
}
/**
* 完全に空白あるいはコメントのノードを無視するようにした previousSibling
* (通常 previousSibling はすべての DOM ノードが持つプロパティのことで、親が
* 同じで参照ノードの直前にある兄弟ノードを表します)
*
* @param sib 参照ノード
* @return 次のいずれか:
* 1) is_ignorable 検査で無視できないと判断された sib に
* 最も近い前方の兄弟ノード、あるいは
* 2) 該当するノードがなければ null
*/
function node_before( sib )
{
while ((sib = sib.previousSibling)) {
if (!is_ignorable(sib)) return sib;
}
return null;
}
/**
* 完全に空白あるいはコメントのノードを無視するようにした nextSibling
*
* @param sib 参照ノード
* @return 次のいずれか:
* 1) is_ignorable 検査で無視できないと判断された sib に
* 最も近い後方の兄弟ノード、あるいは
* 2) 該当するノードがなければ null
*/
function node_after( sib )
{
while ((sib = sib.nextSibling)) {
if (!is_ignorable(sib)) return sib;
}
return null;
}
/**
* 完全に空白あるいはコメントのノードを無視するようにした lastChild
* (通常 lastChild はすべての DOM ノードが持つプロパティのことで、参照ノードに
* 直接含まれる最後のノードを表します)
*
* @param sib 参照ノード
* @return 次のいずれか:
* 1) is_ignorable 検査で無視できないと判断された sib の
* 最後の子供ノード、あるいは
* 2) 該当するノードがなければ null
*/
function last_child( par )
{
var res=par.lastChild;
while (res) {
if (!is_ignorable(res)) return res;
res = res.previousSibling;
}
return null;
}
/**
* 完全に空白あるいはコメントのノードを無視するようにした firstChild
*
* @param sib 参照ノード
* @return 次のいずれか:
* 1) is_ignorable 検査で無視できないと判断された sib の
* 最初の子供ノード、あるいは
* 2) 該当するノードがなければ null
*/
function first_child( par )
{
var res=par.firstChild;
while (res) {
if (!is_ignorable(res)) return res;
res = res.nextSibling;
}
return null;
}
/**
* 最初と最後にホワイトスペースを含まず、すべてのホワイトスペースを単一スペースに正規化する
* ようにした data
* (通常 data はテキストノードが持つプロパティのことで、ノードのテキストを
* 表します)
*
* @param txt data が返されるべきテキストノード
* @return 当該テキストノードの内容が与えるホワイトスペースを纏めた文字列
*/
function data_of( txt )
{
var data = txt.data;
// ECMA-262 第3版 の String および RegExp の機能を使用
data = data.replace(/[\t\n\r ]+/g, " ");
if (data.charAt(0) == " ")
data = data.substring(1, data.length);
if (data.charAt(data.length - 1) == " ")
data = data.substring(0, data.length - 1);
return data;
}
The following code demonstrates the use of the functions above. It iterates over the children of an element (whose children are all elements) to find the one whose text is "This is the third paragraph", and then changes the class attribute and the contents of that paragraph.
var cur = first_child(document.getElementById("test"));
while (cur)
{
if (data_of(cur.firstChild) == "This is the third paragraph.")
{
cur.className = "magic";
cur.firstChild.textContent = "This is the magic paragraph.";
}
cur = node_after(cur);
}