JavaScript での HTML (DOM) 操作について。
標準は, 2003年1月の DOM Level 2 HTML だったが, WHATWG Living Standard で置き換えられた。
さらには, React の仮想DOM (Virtual DOM; VDOM) があれば、直接 DOM を操作する機会はほとんどなさそう。
(2002.12.14)
HTML table
要素は,JavaScriptでは HTMLTableElement
オブジェクトとなる。HTMLTableElement#rows
プロパティは,行オブジェクトの集合である HTMLCollection
オブジェクトを返す。このオブジェクトのitem()
メソッドで行オブジェクトを取り出せる。行は HTMLTableRowElement
オブジェクトとなる。
対象 | DOM クラス |
---|---|
表 | HTMLTableElement
|
キャプション | HTMLTableCaptionElement
|
行グループ: thead , tfoot , tbody
| HTMLTableSectionElement
|
列グループ: colgroup , col
| HTMLTableColElement
|
行: tr
| HTMLTableRowElement
|
セル: th , td
| HTMLTableCellElement
|
特定のセルの値を取り出すには,次のようにする。
<table id="hoge"> <tr><td>cell 1<td>cell 2 </table>
function cell(id, x, y) { table = document.getElementById(id); row = table.rows.item(y); cell = row.cells.item(x); document.write("cell(" + x + ", " + y + ") is " + cell.firstChild.data); } cell('hoge', 1, 0);
利用者に何らかのデータを表形式で入力してもらうとき,最初に生成したフォームの表の行数では足りなくなることがある。余裕を持ってフォームを生成すればいいが,あまりにも行数が多いと結構間抜け。そこで,JavaScriptで行を追加する。
HTMLTableElement#insertRow()
メソッドで行を追加し,HTMLTableRowElement#insertCell()
メソッドでセルを追加する。
<table id="foo" border="1"> <tr><td>1<td>2<td>3 <tr><td>4<td>5<td>6 <tr><td>7<td>8<td>9 </table>
function add_row(id) { table = document.getElementById(id); new_row = table.insertRow(table.rows.length); new_row.insertCell(0).appendChild(document.createTextNode('foo')); new_row.insertCell(1).appendChild(document.createTextNode('bar')); new_row.insertCell(2).appendChild(document.createTextNode('baz')); } add_row('foo');
HTMLTableCellElement
クラス(2002.4.28) この節を追加。
th
, td
要素を表すクラス。
プロパティ
メソッド
(2002.12.2)
windowオブジェクトのalertメソッドを使う。
function a() { window.alert('メッセージボックス'); }
次のようにして呼び出す。
<button onclick="a()">メッセージボックス</button>
(2002.12.2)
要素オブジェクトのstyleプロパティのdisplayプロパティを使う。このプロパティは,CSSのdisplayプロパティと対応しており,'block'や'none'を設定できる。
また,img要素オブジェクトのsrcプロパティを変更して,例えばフォルダアイコンを表示したりする。
function tree_toggle(id) { e = document.getElementById(id); i = document.getElementById(id + 'i'); if (e.style.display == "none") { e.style.display = "block"; i.src = "../images/tree_o.gif"; } else { e.style.display = "none"; i.src = "../images/tree_c.gif"; } }
初期状態は,次のように設定する。
aタグのhref属性でtree_toggle()を呼び出すようにする。tree_toggle()の引数として,クリックしたときに折り畳む要素のid属性値を指定する。初期状態で畳むときは,style属性として"display:none"を設定する。
人間がいちいちやっていると大変なので,サーバ側で自動的に生成するのが吉。
<img src="../images/tree_o.gif" id="t1i"> <a href="javascript:tree_toggle('t1')">parent</a> <div id="t1" > <img src="../images/tree_c.gif" id="t2i"> <a href="javascript:tree_toggle('t2')">child</a> <div id="t2" style="display:none"> sub text </div> </div>
HTMLInputElement
クラス(2002.4.28) この節を追加。
HTML input
要素を表すクラス。
プロパティ
2002.4.28 この節を追加。
2002.12.15 更新
要素の内容としてのテキストを表すクラス。
プロパティ
Textオブジェクトを生成するには,Document#createTextNode()を使う。
ウィンドウ、文書、それからWebブラウザ自身を表すオブジェクト。
それぞれのWebブラウザで, 次のようなスクリプトを実行した。
<script> function prop_out(obj) { document.write("<p>", obj, "<br>\n"); for (prop in obj) { document.write(prop, " "); } } prop_out(window); prop_out(navigator); prop_out(document); prop_out(history); prop_out(location); // "[...]"ではなく,値が返る。 prop_out(document.forms); prop_out(document.anchors); prop_out(window.screen); </script>
window
オブジェクト[2020.11] 現代では, WHATWG HTML Living Standard にて標準化されている。
closeddefaultStatusdocument frames history length location name navigator opener parentscreenself status top window
[2020.11] noopener について。
window.opener
属性は, 新しく開かれたウィンドウから, 元のウィンドウを得る。例えば, 新しい方のウィンドウで window.opener.close()
すると、元のウィンドウを閉じることができる。
現在のウィンドウが別のウィンドウから開かれたものでない場合, null
を返す. セキュリティ上のリスクがあるため, same-origin でない場合は, オブジェクトは得られるが, 機能が制限される。
JavaScript で開いた場合だけでなく, a
HTML要素でも, target
属性をつければ新しいウィンドウを開ける。
<a href="http://example.com/new_window.html" target="_blank">Click here!</a>
機能が制限されると云っても, 元ウィンドウのアドレスをこっそり移動させて phishing 攻撃することが可能。次の図で, new_window.html
が元のウィンドウを書き換える。ユーザは元のウィンドウと思って, evil.html
で何かをする。
出典 https://yoru9zine.hatenablog.com/entry/2017/03/17/230729
そこで, Firefox 79 から, a target="_blank"
で開かれたウィンドウは, rel="noopener"
が付いているとみなされる。新しいウィンドウから元のウィンドウオブジェクトを取得できなくなる。逆に, 新しいウィンドウから操作してほしいときは, 明示的に rel="opener"
を付けなければならない。
Chrome 88 から同様の挙動に追従。
navigator
オブジェクトグローバルな navigator
オブジェクトか, window.navigator
オブジェクト。どちらも同じ。Webブラウザの情報を持つ。
appCodeName appName appVersion cookieEnabled mimeTypes platform plugins userAgent
document
オブジェクトこれも, グローバルなオブジェクトか, window.document
オブジェクト。どちらも同じ。表示されている文書。
HTML であれば HTMLDocument
クラス. Document
クラスから派生している。
URL alinkColor anchors applets bgColor body childNodes cookie dir documentElement domain embeds fgColor forms images lastModified linkColor links location plugins referrer styleSheets title vlinkColor
プロパティ:
title
fgColor
deprecated
body
要素を使え。
bgColor
deprecated
body
要素を使え。
メソッド:
getElementById(id_str)
Document
で宣言。
HTMLTableCellElement
オブジェクト,HTMLInputElement
オブジェクトなど, Element
派生オブジェクトを返す。見つからないときは null
.
getElementsByName(elementName)
NodeList
を返す。
createTextNode(str)
Text
オブジェクトを生成して返す。
GlobalEventHandlers
インタフェイスすべてのHTML要素, document
オブジェクトおよび window
オブジェクトでサポートされるイベントハンドラ。
onSelectStart
, onSelectionChange
はいまだに草案。
Selection API W3C Working Draft 18 August 2020. Internet Explorer や Chrome でも昔から使えていた。W3C の最初の草案は2014年10月。2020年になってもまだ草案。短い仕様に, 何がそんなに時間が掛かるのか。