DOM
javascriptにおけるDOMでは、以下のようにスタイルプロパティを設定します。 node.style.prop [= value] // node: 対象のノード prop: スタイルプロパティ value:設定値 .cssファイルで、次のようなスタイルを設定するとします。 { text-decoration: line-th…
これまで私が触れてきたCSSは.cssファイルにコードを記述し、<head>にてCSSファイルを読み込むものでした。 javascriptにおけるDOMでCSSを操作する場合、htmlファイル中のタグに直接スタイルの書き込みを行います。このやり方は「インラインスタイル」と呼ばれます</head>…
繰り返し処理のwhileです。条件式がtrueの場合に処理を行います。while (条件式)｛ 実行する文; ｝ （適用例） while (lists.firstChild) { lists.removeChild(lists.firstChild); } ~TIPs~ ・listsの小ノードが無くなるまで、上の小ノードから順番に消去す…
・ノードの削除 parent.removeChild(node)// parent: 親ノード node:削除対象のノード ~TIPs~ :nodeはparentの子ノードでないといけない :nodeは単体ノードでないといけない(基本的にノードの集合は推薦されていない)。従って頭の子ノードを繰り返し文を用い…
タグ指定による子ノードの取得は、他の親ノードにまで範囲を持つから、以下の方法を用いると良いでしょう。 子ノードを取得 parent.childNodes // 子ノードをすべて取得parent.firstChild // 一番最初の子ノードを取得parent.lastChild // 一番末尾の子ノー…
appendChildメソッドを用いて特定の親ノードの最後の子ノードとしてノードを追加する parent.appendChild(node); parent: 親ノード node: 追加するノード 適用例 <script> const lists = document.getElementById("lists") //ulの取得。あとのリスト追加用 const tar…
・新しいノードの生成document.createElement(name);// name: 要素名→単に生成するだけです。配置はされません 例) <script> const list = document.createElement("li") </script>
Document Object Model Javascriptでは、htmlを編集することでウェブページに動的変化を与えます。その編集をやりやすくするための仕組みがDOMです。 DOMはHTMLをドキュメントツリーとして扱います。 このツリー状になったオブジェクトをノードと呼びます。
