「JavaScript/DOM」の版間の差分

削除された内容 追加された内容
Ef3 (トーク | 投稿記録)
M Fix ln
タグ: ビジュアルエディター モバイル編集 モバイルウェブ編集
Ef3 (トーク | 投稿記録)
→‎概要: Fix typo, s/source/syntaxhighlight/
タグ: 2017年版ソースエディター
18 行
<body>
<div id="output">JaveScriptが無効です。</div>
<scripscript>
const output = document.querySelector("#output");
output.innerHTML = "Hello, world!";
30 行
 
<code>document.querySelector</code>メソッドはDOMの一部で<ref>https://dom.spec.whatwg.org/#dom-parentnode-queryselector</ref>、this(この場合は document)の子孫の中でCSSセレクタ <code>"#output"</code> と一致する最初の要素をツリー順に返し、一致する要素がない場合は <code>null</code> を返します。
ここでは "output" というIDを持つ要素、すなわち<sourcesyntaxhighlight lang="html5" inline><div id="output"></div></sourcesyntaxhighlight>というDIV要素を参照し、要素に対応するElementオブジェクトを<code>output</code>という<code>const</code>な変数に代入しています。
 
<code>output.innerHTML</code>プロパティを使用するとDIV要素の中身を取得したり設定したりすることができます。