<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">節点</anchor>の<dfn><rubyb xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">変異<rt xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">mutation</rt></rubyb></dfn>とは、次のような操作による<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">節点木</anchor>の変化をいいます。</p><figure class="short list"><ul><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">挿入</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">削除</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">属性の変更</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">属性の削除</anchor></li></ul></figure><section><h1>文脈</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="15" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[15]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">変異</anchor>や、<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">節点</anchor>の生成に関する操作h、
次のものを含む様々な <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">DOM API</anchor> 等により行われます。</p><figure class="short list"><ul><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">構文解析器</anchor></li><li><code class="DOMm" xml:lang="en">createElement</code></li><li><code class="DOMm" xml:lang="en">createDocument</code></li><li><code class="DOMm" xml:lang="en">appendChild</code></li><li><code class="DOMm" xml:lang="en">insertBefore</code></li><li><code class="DOMm" xml:lang="en">replaceChild</code></li><li><code class="DOMm" xml:lang="en">removeChild</code></li><li><code class="DOMm" xml:lang="en">cloneNode</code></li><li><code class="DOMm" xml:lang="en">setAttribute</code></li><li><code class="DOMm" xml:lang="en">removeAttribute</code></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">反映</anchor>する<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">IDL属性</anchor></li></ul></figure><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="21" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[21]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">著者</anchor>の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクリプト</anchor>のみならず、<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ブラウザー拡張</anchor>や <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">WebDriver</anchor>、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">開発者ツール</anchor>などから操作されることもあります。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="16" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[16]</anchor-end> 次のような<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">利用者</anchor>の操作により変更されることもあります。<figure class="list"><ul><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">編集ホスト</anchor>での編集</li><li><code class="HTMLe" xml:lang="en">details</code> の表示状態の変更</li><li><code class="HTMLe" xml:lang="en">textarea</code> の表示サイズの変更</li></ul></figure></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">仕様書</anchor>上に必ずしも明確な規定があるわけではありませんが、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">利用者</anchor>の操作や<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ブラウザー拡張</anchor>等に基づく変更であっても、
副作用が適切に発生するよう、相当する <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">DOM Standard</anchor> の規定する操作が行われたものとして扱う必要があります。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[5]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">カスタム要素反応</anchor>に関しては、<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">バックアップ要素キュー</anchor>を用いるとの規定があります。</p></section><section><h1>副作用</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">節点</anchor>の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">変異</anchor>にあっては、それに連動して色々な動作が起こります。</p><figure class="list"><ul><li>同期的に動作するもの<ul><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">挿入手順群</anchor>、<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">削除手順群</anchor>、<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">属性変更手順群</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">live</anchor> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">collection</anchor> (<code class="DOMi" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">NodeList</anchor></code>, <code class="DOMi" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTMLCollection</anchor></code>, <code class="DOMi" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">NamedNodeMap</anchor></code> など) の更新</li><li><code class="DOMi" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">NodeIterator</anchor></code> の更新</li><li><code class="DOMi" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Range</anchor></code> の更新</li><li><code class="DOMi" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">XPathResult</anchor></code> の無効化</li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">カスタム要素反応</anchor></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">mutation event</anchor></li></ul></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">event loop</anchor> の次のタイミングで動作するもの<ul><li><code class="DOMi" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">MutationObserver</anchor></code></li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">レンダリング</anchor>の更新</li><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSSOM</anchor> の読み込み (外部の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スタイル・シート</anchor>を<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">輸入</anchor>している場合)</li></ul></li></ul></figure><comment-p xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:"><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end> <code xmlns="http://www.w3.org/1999/xhtml" class="DOMi" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">TreeWalker</anchor></code> は影響を受けません。</comment-p></section><section><h1>観測</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[6]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">著者</anchor>の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スクリプト</anchor>は、<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">変異観察器</anchor>を登録することにより、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">節点木</anchor>に<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">変異</anchor>があった際に<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">コールバック関数の呼び出し</anchor>を受けることができます。</p><history xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:"><p xmlns="http://www.w3.org/1999/xhtml"><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[7]</anchor-end> かつては<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">変異イベント</anchor>が使われました。</p></history></section></body></html>