JavaScript/DOM をテンプレートにして作成

開始行:
*DOM｜Documment Object Model https://www.w3schools.com/js/js_htmldom.asp ~ Document Object Model (DOM) は、ウェブ上の文書のコンテン... -HTML文書は、タグ・属性・値・テキストなどの部品で構成され... -HTML文書がブラウザに読み込まれると、JavaScript の内部で... -''オブジェクトはプロパティーとメソッドを持つ''ので、Java... ちなみに、Document オブジェクトの上位には、[[ブラウザオブ... ~ ***CONTENTS #contents2_1 ~ **DOMの概要 #image(https://upload.wikimedia.org/wikipedia/commons/thu... ***DOMツリー HTML文書は、以下のようなツリー状の階層構造で記述できるも... -html要素：document.documentElement --head要素：document.head ---title要素：document.title --body要素：document.body ---header要素 ---nav要素 ---main要素 ---footer要素 &small(図版：https://commons.wikimedia.org/wiki/File:DOM-... ブラウザ開発ツールのコンソールを開いた状態で、以下のスク... <script> console.dir(document.documentElement); </script> ~ ***NodeとElememt DOMのマニュアルには、Node と Element という言葉が頻出しま... -''Node'' DOMツリーの各構成要素を Node（ノード）といいます。Nodeは... -要素ノード（Element Node）：<p class="abc">Hello!</p> -属性ノード（Attribute Node）：class="abc" -テキストノード（Text Node）：Hello! -''Element'' Element とは、上記の Element型のNodeのことで「開始タグか... ~ ***インターフェイスの概観 DOMには、様々なインターフェイスが用意されています。以下、... -document.title：TITLE要素へのインターフェイス -document.body：BODY要素へのインターフェイス -document.getElementById( ID名 ) ：該当ID要素１つを取得 -document.getElementsByClassName( Class名 ) ＞ 配列に複... -document.getElementsByTagName( Tag名 ) ＞ 配列に複数要素... -document.querySelector( セレクタ名 ) ：１つの要素のみ取得 -document.querySelectorAll( セレクタ名 ) ： NodeListに複... -document.createElement(要素名)：要素を作成（作成のみ） -document.createTextNode(ノード名)：ノードを作成 -parentNode.appendChild( 要素 )：親要素に子要素を追加 -parentNode.removeChild( 要素 )：子要素を削除 -element.innerHTML：HTMLコンテンツの定義 -element.style：スタイル定義 -element.setAttribute()：属性をセット -element.getAttribute()：属性を取得 -element.addEventListener()：イベントリスナーの登録 ~ ~ **DOMインターフェイス ***document.title ページタイトルの読み書きに対応するプロパティー -タイトルの取得 var title = document.title -タイトルの変更 document.title = 'NewTitle'; ~ ***document.body ページボディーの読み書きに対応するプロパティー -ページのbody要素の取得 var obj = document.body; -ページの最後に生成した要素を追加 document.body.appendChild( 要素 ); ~ ***document.getElementById タグにIDを与えておけば、それを捉えることがでます。例えばH... <div id="ABC">・・・ </div> のような記述がある場合、 var obj = document.getElementById('ABC'); と記述することで、div id="ABC" の適用範囲（の識別情報）を... 例えば、以下のようなHTMLとJavaScriptがあった場合、button ... ''HTML'' <button onClick="DisplayMessage();">Click Me!</button> 　： <div id="messageArea"> [メッセージエリア] </div> ''JavaScript'' function DisplayMessage(){ var obj = document.getElementById('messageArea'); obj.innerHTML = 'Hello World !'; } ちなみに「関数の呼び出し」は、マウスのクリック以外にも、... ~ ***document.getElementsByClassName クラスはページ内に複数存在する前提なので、配列変数に取得... var obj = document.getElementsByClassName('ABC'); とした... ABCクラスが定義された最初の要素が obj[0]、２つめの要素が ... obj[1].style.backgroundColor = 'red'; のような書き方で制... ~ ***document.getElementsByTagName これも同一の要素が複数存在する前提になるので、配列変数に... var obj = document.getElementsByTagName('a'); とした場合、 最初のaタグ要素が obj[0]、２つめのaタグ要素が obj[1] です。 obj[1].style.backgroundColor = 'red'; のような書き方で制... ''綴りに注意'' Idはページ内の唯一の存在なので ''getElement''ById。ClassN... ~ ***querySelector( ) CSSセレクタでマッチした要素をひとつ取得します。複数ある場... -document.querySelector( ) /* 最初の .sampleを取得 */ var obj = document.querySelector('.sample'); /* 最初の ul .sample を取得 */ var foo02 = document.querySelector('ul .sample'); -''element.querySelector( )'' /* ABCの子要素：最初の .sampleを取得 */ val obj = document.getElementById('ABC'), val sample = obj.querySelector('.sample'); ~ ***querySelectorAll( ) CSSセレクタでマッチした要素をすべて取得して NodeList とし... -document.querySelectorAll( ) /* すべての .sample を取得 */ var obj = document.querySelectorAll('.sample'); /* すべての ul .sample を取得 */ var obj = document.querySelectorAll('ul .sample'); -element.querySelectorAll( ) /* ABCの子要素：すべての .sampleを取得 */ var obj = document.getElementById('ABC'); var sample = obj.querySelectorAll('.sample'); ~ ***その他参考 -element.children( ) /* ABCの子要素：そのすべてを抽出します。*/ var obj = document.getElementById('ABC').children( ); -element.children( '指定したいタグ名' ) /* ABCの子要素：すべての pタグ要素を抽出します。*/ var obj = document.getElementById('ABC').children('p'); ~ -document.getElementById( ).getElementsByTagName( ); /* ABCの子要素：すべての pタグ要素を抽出します。*/ var obj = document.getElementById('ABC').getElementsByTa... ~ ~ **要素の追加・削除 ***要素の追加 var elem = document.createElement( 'p' ); var txt = document.createTextNode( 'Hello World!' ); document.body.appendChild( elem ).appendChild( txt ); body直下に p要素（段落）が追加され、さらにそこに Hello Wo... ~ ***要素の変更 var newNode = document.createElement( タグ名 ); var oldNode = document.getElementById( ID名 ); var parentNode = oldNode.parentNode; parentNode.replaceChild(newNode,oldNode); ~ ***要素の削除 var elem = document.getElementById( ID名 ); elem.parentNode.removeChild( elem ); ~ ~ 参考：https://www.w3schools.com/jsref/dom_obj_document.asp ~ ~

終了行:
*DOM｜Documment Object Model https://www.w3schools.com/js/js_htmldom.asp ~ Document Object Model (DOM) は、ウェブ上の文書のコンテン... -HTML文書は、タグ・属性・値・テキストなどの部品で構成され... -HTML文書がブラウザに読み込まれると、JavaScript の内部で... -''オブジェクトはプロパティーとメソッドを持つ''ので、Java... ちなみに、Document オブジェクトの上位には、[[ブラウザオブ... ~ ***CONTENTS #contents2_1 ~ **DOMの概要 #image(https://upload.wikimedia.org/wikipedia/commons/thu... ***DOMツリー HTML文書は、以下のようなツリー状の階層構造で記述できるも... -html要素：document.documentElement --head要素：document.head ---title要素：document.title --body要素：document.body ---header要素 ---nav要素 ---main要素 ---footer要素 &small(図版：https://commons.wikimedia.org/wiki/File:DOM-... ブラウザ開発ツールのコンソールを開いた状態で、以下のスク... <script> console.dir(document.documentElement); </script> ~ ***NodeとElememt DOMのマニュアルには、Node と Element という言葉が頻出しま... -''Node'' DOMツリーの各構成要素を Node（ノード）といいます。Nodeは... -要素ノード（Element Node）：<p class="abc">Hello!</p> -属性ノード（Attribute Node）：class="abc" -テキストノード（Text Node）：Hello! -''Element'' Element とは、上記の Element型のNodeのことで「開始タグか... ~ ***インターフェイスの概観 DOMには、様々なインターフェイスが用意されています。以下、... -document.title：TITLE要素へのインターフェイス -document.body：BODY要素へのインターフェイス -document.getElementById( ID名 ) ：該当ID要素１つを取得 -document.getElementsByClassName( Class名 ) ＞ 配列に複... -document.getElementsByTagName( Tag名 ) ＞ 配列に複数要素... -document.querySelector( セレクタ名 ) ：１つの要素のみ取得 -document.querySelectorAll( セレクタ名 ) ： NodeListに複... -document.createElement(要素名)：要素を作成（作成のみ） -document.createTextNode(ノード名)：ノードを作成 -parentNode.appendChild( 要素 )：親要素に子要素を追加 -parentNode.removeChild( 要素 )：子要素を削除 -element.innerHTML：HTMLコンテンツの定義 -element.style：スタイル定義 -element.setAttribute()：属性をセット -element.getAttribute()：属性を取得 -element.addEventListener()：イベントリスナーの登録 ~ ~ **DOMインターフェイス ***document.title ページタイトルの読み書きに対応するプロパティー -タイトルの取得 var title = document.title -タイトルの変更 document.title = 'NewTitle'; ~ ***document.body ページボディーの読み書きに対応するプロパティー -ページのbody要素の取得 var obj = document.body; -ページの最後に生成した要素を追加 document.body.appendChild( 要素 ); ~ ***document.getElementById タグにIDを与えておけば、それを捉えることがでます。例えばH... <div id="ABC">・・・ </div> のような記述がある場合、 var obj = document.getElementById('ABC'); と記述することで、div id="ABC" の適用範囲（の識別情報）を... 例えば、以下のようなHTMLとJavaScriptがあった場合、button ... ''HTML'' <button onClick="DisplayMessage();">Click Me!</button> 　： <div id="messageArea"> [メッセージエリア] </div> ''JavaScript'' function DisplayMessage(){ var obj = document.getElementById('messageArea'); obj.innerHTML = 'Hello World !'; } ちなみに「関数の呼び出し」は、マウスのクリック以外にも、... ~ ***document.getElementsByClassName クラスはページ内に複数存在する前提なので、配列変数に取得... var obj = document.getElementsByClassName('ABC'); とした... ABCクラスが定義された最初の要素が obj[0]、２つめの要素が ... obj[1].style.backgroundColor = 'red'; のような書き方で制... ~ ***document.getElementsByTagName これも同一の要素が複数存在する前提になるので、配列変数に... var obj = document.getElementsByTagName('a'); とした場合、 最初のaタグ要素が obj[0]、２つめのaタグ要素が obj[1] です。 obj[1].style.backgroundColor = 'red'; のような書き方で制... ''綴りに注意'' Idはページ内の唯一の存在なので ''getElement''ById。ClassN... ~ ***querySelector( ) CSSセレクタでマッチした要素をひとつ取得します。複数ある場... -document.querySelector( ) /* 最初の .sampleを取得 */ var obj = document.querySelector('.sample'); /* 最初の ul .sample を取得 */ var foo02 = document.querySelector('ul .sample'); -''element.querySelector( )'' /* ABCの子要素：最初の .sampleを取得 */ val obj = document.getElementById('ABC'), val sample = obj.querySelector('.sample'); ~ ***querySelectorAll( ) CSSセレクタでマッチした要素をすべて取得して NodeList とし... -document.querySelectorAll( ) /* すべての .sample を取得 */ var obj = document.querySelectorAll('.sample'); /* すべての ul .sample を取得 */ var obj = document.querySelectorAll('ul .sample'); -element.querySelectorAll( ) /* ABCの子要素：すべての .sampleを取得 */ var obj = document.getElementById('ABC'); var sample = obj.querySelectorAll('.sample'); ~ ***その他参考 -element.children( ) /* ABCの子要素：そのすべてを抽出します。*/ var obj = document.getElementById('ABC').children( ); -element.children( '指定したいタグ名' ) /* ABCの子要素：すべての pタグ要素を抽出します。*/ var obj = document.getElementById('ABC').children('p'); ~ -document.getElementById( ).getElementsByTagName( ); /* ABCの子要素：すべての pタグ要素を抽出します。*/ var obj = document.getElementById('ABC').getElementsByTa... ~ ~ **要素の追加・削除 ***要素の追加 var elem = document.createElement( 'p' ); var txt = document.createTextNode( 'Hello World!' ); document.body.appendChild( elem ).appendChild( txt ); body直下に p要素（段落）が追加され、さらにそこに Hello Wo... ~ ***要素の変更 var newNode = document.createElement( タグ名 ); var oldNode = document.getElementById( ID名 ); var parentNode = oldNode.parentNode; parentNode.replaceChild(newNode,oldNode); ~ ***要素の削除 var elem = document.getElementById( ID名 ); elem.parentNode.removeChild( elem ); ~ ~ 参考：https://www.w3schools.com/jsref/dom_obj_document.asp ~ ~

ページ名: